HighlightJS library offers syntax highlighting for over 170 languages. It can provide many attractive styles .
The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad
:
<link href="styles/arta.css" rel="stylesheet" type="text/css" /> <script src="highlight.pack.js" type="text/javascript"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad() </script>
To add a code highlight and syntax highlighting we need to use the <pre> tags and <code> tags within the <pre> tag. The <code> tag should have a class which suggests the syntax highlighting for a specific language.
Following is the example of CSS code highlighting.
<h3>CSS Code</h3> <pre> <code class="CSS"> .myclass{ height: 300px; width: 200px; color: #FFEEFF; background: #DDAACC; } </code> </pre>
This will result in the following syntax highlighting for CSS
Following is the example of PHP syntax highlighting
<h3>PHP Code</h3> <pre> <code class="PHP"> $a = 3; $b = 4; function add($a, $b){ $c = $a + $b; return $c; } $c = add($a, $b); echo "The sum is ". $c; </code> </pre>
This will result in the following PHP code output in the browser.
Further in-depth documentation for the API and other topics is at http://highlightjs.readthedocs.io/.
Leave a Reply