Syntax highlighting using Highlight JS

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