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)