Code Highlighter

Use of higlight.js

In some cases, we would like to show code and the results at the web page. Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework, and has automatic language detection.

We will show you how to use local files downloaded from https://highlightjs.org/ and then with using links to https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/ web page.

Here are steps for local installation:

1) Visit the page https://highlightjs.org/

2) Click on Get version 11.7.0 or latest number

3) Go page down to Custom package

4. Select or deselect languages you need for example Javascript, HTML, PHP and CSS or download all selected languages.

5. Press Download button

The system will download higlight.zip file.

6. Go to local directory of you web page (C:\wamp64\www)

7. Unzip file highlight.js

8. You will get these files and directories

9. Open new HTML file in code editor (Example1.html)

10. Copy code in file:

<!DOCTYPE html>

<html>

<head>

<title>Simple example</title>

href="styles/tokyo-night-dark.min.css">

</head>

<body>

<pre>

<p> id="print"></p>

</pre>

<pre>

var a= 5;

var b= 3;

var c=0;

c= a+b;

document.getElementById("print").innerHTML= " The result is: " + c;

</script>

</code>

</pre>

</body>

</html>

11. Run file in web browser (Chrome)

12. You should get next display:

- at the top there is paragraph print value »The result is: 8«. The paragraph should be separated (copy of code) from <pre> tags to display results.

- as second the HTML code is displayed (you can omit that if not needed).

- as third JavaScript code is shown in colours.

To understand the code here are most important facts.

In head add

href="styles/tokyo-night-dark.min.css">

This will call your css file in styles folder.

If you wish to select another css you can test it at page https://highlightjs.org/static/demo/

You can choose colours and backgrounds of 96 themes.

In body you add

First will call higlight.min.js file in you main folder where Example.html is.

Second will run hljs OnLoad.

In code beginning with <pre> we put whatever we would like to show on screen. You can define code class depending what langue you will use ("language-javascript" or "html").

To see code as is in HTML you should replace < and > with < and >.

Example: <h1> <h1>

<p> id="print"></p>

For javascipt in HTML you use <script> and </script> tags to work.

So, this version is linked to local files you copied to your web folder. You can also link files from cdn folder: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/

The code will change only in link lines.

<!DOCTYPE html>

<html>

<head>

<title>Simple example</title>

<!-- <link rel="stylesheet"

href="styles/tokyo-night-dark.min.css">-->

href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/tokyo-night-dark.min.css">

</head>

<body>

<pre>

<p> id="print"></p>

</pre>

<pre>

var a= 5;

var b= 3;

var c=0;

c= a+b;

document.getElementById("print").innerHTML= " The result is: " + c;

</script>

</code>

</pre>

</body>

</html>

The result should be the same.

If you use code class=" language-plaintext" there will be no colours only monochrome text.

<!DOCTYPE html>

<html>

<head>

<title>Simple example</title>

<!-- <link rel="stylesheet"

href="styles/tokyo-night-dark.min.css">-->

href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/tokyo-night-dark.min.css">

</head>

<body>

<pre>

<p> id="print"></p>

</pre>

<pre>

var a= 5;

var b= 3;

var c=0;

c= a+b;

document.getElementById("print").innerHTML= " The result is: " + c;

</script>

</code>

</pre>

</body>

</html>