Syntax highlighting using SHJS

SHJS is a JavaScript program which highlights source code passages in HTML documents. Documents using SHJS are highlighted on the client side by the web browser.

In the head element of your document, include the sh_main.js script and the script for the programming language you are using. (If you have multiple languages in the same document, you can include multiple scripts.) For example, for C++ the correct script is lang/sh_cpp.js, assuming that language-specific scripts are stored in the lang/ directory.

<script src="sh_main.js" type="text/javascript"></script>
<script src="sh_php.js" type="text/javascript"></script>
<script src="sh_css.js" type="text/javascript"></script>
<link href="sh_style.css" type="text/css" rel="stylesheet" />

Call the function sh_highlightDocument(); in the onload section of the body element.

Place each code snippet in <pre> element. The pre element must have the class sh_LANGUAGE where the LANGUAGE specifies the language of the snippet. Below is the code example

<body onload="sh_highlightDocument();">
    <h3>PHP Code</h3>
    <pre class="sh_php">
    
        $a = 3;
        $b = 4;
        function add($a, $b){
            $c = $a + $b;
            return $c;
        }
        
        $c = add($a, $b);
        
        echo "The sum is ". $c;
    </pre>

    <h3>CSS Code</h3>
    <pre class="sh_css">
        
            .myclass{
                height: 300px;
                width: 200px;
                color: #FFEEFF;
                background: #DDAACC;
            }
        
    </pre>
</body>

This has resulted in the following output in the browser.

For more details follow the documentation

Leave a ReplyCancel reply