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

<!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< /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>

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

<script src="https://www.w3schools.com/lib/w3codecolor.js"></script>
<script>w3CodeColor();</script>

Both of the scripts need to be added after the last code snippet.

HTML, JavaScript and CSS can all be highlighted. (HTML and Javascript documentation are shown above)

Links

External Links Disabled.

tempusfugit.me.uk is a non-commercial website. No payment or benefit is gained by the placement of links toother websites.

The External link is disabled to on this page, please visit other pages

Unlike most genealogical research websites tempusfugit.me.uk does not attempt to get you to "sign-up" when you click on one of their links.

This Wikipedia link is disabled.

The link on Wikipedia was to:

External Links Disabled.

tempusfugit.me.uk is a non-commercial website. No payment or benefit is gained by the placement of links to other websites.

The External link is disabled to on this page, please visit other pages

Top

External Links - references

Site design by Tempusfugit Web Design -