▼

Senin, 26 Mei 2025

Using Highlight JS

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);
    }
    
    &#8230;&#8230;&#8230;
    
</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/
di

Tidak ada komentar:

Posting Komentar