W3.CSS Code
How to Display Code
W3.CSS provides classes for displaying code examples and inline code.
You can also use the W3Schools Code Color library to add syntax highlighting.
Display Code
The w3-code class is designed to display comuter code examples:
It displays code in a readable monospace font:
Example
fruits[0] = "Banana";
fruits[1] = "Apple";
fruits[2] = "Mango";
fruits[3] = "Plum";
Inline Code
The w3-codespan class highlights inline code.
Example: The html element defines an HTML page.
Display Examples
Use the w3-panel class to display examples inside a styled container.
Syntax Highlighting
W3Schools provides the w3codecolor.js library for syntax highlighting.
Example
fruits[0] = "Banana";
fruits[1] = "Apple";
fruits[2] = "Mango";
fruits[3] = "Plum";
You can load the library from:
Example
<script src="https:/edu/lib/w3codecolor.js"></script>
When you use w3codecolor.js, you can add language classes to your code blocks.
Highlight JavaScript Code
Add jsHigh to highlight JavaScript code:
Highlight HTML Code
Add htmlHigh to highlight HTML code:
Highlight CSS Code
Add cssHigh to highlight CSS code:
