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

<!DOCTYPE>
<html lang="en">
<head>
</head>
<body>
 <p id="para" class="w3-code">Hello World<p>
</body>
</html>

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

Top

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>

 <div class="w3-dropdown-click">
<div class="w3-bar-item w3-button" onclick="myDropFunc()">
  Dropdown <i class="fa fa-caret-down"></i>
 </div>
 <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
 </div>
 </div>
.....................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 ....
   ........
<div>
<div>

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

Links

Top

Site design by Tempusfugit Web Design -