highlight.js example
In this article I will show you how to use the highlight.js JavaScript module to present your code beautifully syntax highlighted.
The code below is a simple html page with two source code samples in typescript and Python. The first example only has the plain source code. The second example shows the usage of the highlightjs-line-number addon that adds line numbers to the source code which makes it much easier to refer the lines in the code you want to show in your html page.
<html> <head> <!--Highlight.js: https://highlightjs.org/usage/--> <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/styles/default.min.css" /> <script src="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script> </head> <body> <h1>Source code highlighting</h1> <h2>Typescript</h2> <pre name="source" id="source1" ><code id="source" class="language-typescript"> class MyClass { public static myValue: string; constructor(init: string) { this.myValue = init; } } import fs = require("fs"); module MyModule { export interface MyInterface extends Other { myProperty: any; } } declare magicNumber number; myArray.forEach(() => { }); // fat arrow syntax </code></pre> <h2>Python</h2> <pre name="source" id="source2" ><code id="source" class="language-python"> @requires_authorization(roles=["ADMIN"]) def somefunc(param1='', param2=0): r'''A docstring''' if param1 > param2: # interesting print 'Gre\'ater' return (param2 - param1 + 1 + 0b10l) or None class SomeClass: pass </code></pre> <script lang="javascript"> var source1 = document.getElementById('source1') hljs.highlightElement(source1); var source2 = document.getElementById('source2') hljs.highlightElement(source2); hljs.lineNumbersBlock(source2, { startFrom: 1 }); </script> </body> </html> Below you can see the result in the browser
You can read all the details about highlight.js and the highlightjs-line-number module here:
Top comments (0)