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.
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>
The script calling the function w3CodeColor() needs to be added after each snippet.
HTML, JavaScript and CSS can all be highlighted.