1. Type this website source code in website editor:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>HighlightJS, Display Language Syntax and Line Numbering</title>
<link rel="stylesheet" href="libs/styles/highlight.js-11.5.1/default.min.css">
<link rel="stylesheet" href="libs/styles/hljslanguagedisplayplugin-1.0/hljslanguagedisplayplugin.css">
<style type="text/css">
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc;
border-right: 1px solid #CCC;
vertical-align: top;
padding-right: 5px;
/* your custom style here */
width: 2em;
}
/* for block of code */
.hljs-ln-code {}
.hljs-ln {
margin-top: 1em;
}
</style>
</head>
<body>
<h1>Example HighlightJS <span id="versionNum"></span></h1>
<h3>Example HighlightJS</h3>
<pre><code class="hljs language-javascript">class TokenTree {
constructor() {
/** @type DataNode */
this.rootNode = newNode();
this.stack = [this.rootNode];
}
get top() {
return this.stack[this.stack.length - 1];
}
get root() { return this.rootNode; }
/** @param {Node} node */
add(node) {
this.top.children.push(node);
}
/** @param {string} scope */
openNode(scope) {
/** @type Node */
const node = newNode({ scope });
this.add(node);
this.stack.push(node);
}
………
</code></pre>
<script src="libs/scripts/highlight.js-11.5.1/highlight.min.js"></script>
<script src="libs/scripts/highlightjs-line-numbers.js-2.9.0/highlightjs-line-numbers.min.js"></script>
<script src="libs/scripts/hljslanguagedisplayplugin-1.0/hljslanguagedisplayplugin.js"></script>
<script language="javascript" type="text/javascript">
hljs.addPlugin(new HLJSLanguageDisplayPlugin());
hljs.highlightAll(); // initialize highlighting
hljs.initLineNumbersOnLoad({
singleLine: true
}); // apply line numbering
</script>
<script language="javascript" type="text/javascript">
document.getElementById("versionNum").innerText=hljs.versionString;
</script>
</body>
</html>
2. Save as simpleHighlightJS.html
3. Open in internet browser.
Output
Notes
- To see more clear to the screen capture picture, click on the picture.
- In this post, we are using Highlightjs version 11.5.1. Of course you can use to any version depend to your requirements or your needs.
Bibliography
https://github.com/crpietschmann/hljslanguagedisplayplugin
https://github.com/highlightjs/
https://github.com/wcoder/highlightjs-line-numbers.js
https://www.inmotionhosting.com/
https://medium.com/@hizacharylee/
https://preply.com/
Tidak ada komentar:
Posting Komentar