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 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< /a>
 <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>
  <a href="#" class="w3-bar-item w3-button">Link</a>
.....................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 linking the JavaScript w3codecolor.js needs to be added once after the last code snippet.
Before the last function call to w3CodeColor().

<script src=""></script>

The script calling the function w3CodeColor() needs to be added after each snippet.

HTML, JavaScript and CSS can all be highlighted.




Site design by Tempusfugit Web Design -