Sun Dial Menu
Menu Documenting Code

The w3-code class

When documenting code on a website it is useful to be able to format and colour highlight the syntax.

For HTML documentation:
<div class="w3-code htmlHigh notranslate">

Using the W3.css Framework the documentation of the for code for the "drop-down" menu is shown below:

A simple HTML file

<html lang="en">
 <p id="para" class="w3-code">Hello World<p>

Note: tags in Brown Attributes in red Values in blue.


and a more complex piece of code:

The HTML for the Sub-Menu

<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:160px;">
  <a href="friends_anomolies.html" class="w3-bar-item w3-button">Friends Experiments
 <div class="w3-bar-item w3-button" onclick="myAccFunc()">
 Accordion <i class="fa fa-caret-down"></i></div>
 <div id="demoAcc" class="w3-hide w3-white w3-card-4">
  <a href="friends_template.html#dropdown" class="w3-bar-item w3-button">Where I am using this</a>
  <a href="friends_template.html#accJS" class="w3-bar-item w3-button">The Modified JS</a>

 <div class="w3-dropdown-click">
<div class="w3-bar-item w3-button" onclick="myDropFunc()">
  Dropdown <i class="fa fa-caret-down"></i>
 <div id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
  <a href="#" class="w3-bar-item w3-button">Link
  <a href="#" class="w3-bar-item w3-button">Link
.....................the test of the div .........................

The code

An example of the usage of w3-code:

<div class="w3-panel w3-card w3-light-grey" id="html">
<h4>The HTML for the Sub-Menu</h4>
<div class="w3-code htmlHigh notranslate">
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:160px;">
   .... The code to be documented ....

The script for the w3codecolor.js needs to be added after the last code snippet.
Before the function call to w3CodeColor().



Site design by Tempusfugit Web Design -