home
PDF letter size
PDF legal size

How to do code syntax highlighting in HTML

Nasser M. Abbasi

June 13, 2016 page compiled on June 13, 2016 at 11:18pm

This small note to document steps for code highlighting in HTML. There are many ways to do this, but these are the steps that works for me.

  1. Downloaded highlight.js from http://highlightjs.readthedocs.io extrated.
  2. Download highlightjs-line-numbers.js-master.zip.zip from

    https://github.com/wcoder/highlightjs-line-numbers.js/

    which adds line number to highlight.js since highlight.js does not support line numbers.

  3. Add these lines to the HTML page head section (change path as needed) per instructions in the reference below.
      <style>
      .hljs-line-numbers {
          text-align: right;
          border-right: 1px solid #ccc;
          color: #999;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
      }
      </style>
      <link rel="stylesheet" type="text/css" href="index.css" />
      <link rel="stylesheet" href="/styles/highlight/styles/default.css">
      <script src="/styles/highlight/highlight.pack.js"></script>
      <script src="/styles/highlightjs-line-numbers.js-master/src/highlightjs-line-numbers.js">
      </script>
      <script>hljs.initHighlightingOnLoad();</script>
      <script>hljs.initLineNumbersOnLoad();</script>
  4. Add the code itself
      <pre><code class="Matlab">
        code here....
      </code></pre>
  5. That is all. But remember to access the file via a web server with the above path as in http://localhost/magine/foo3.html where the HTML page is located in some folder called magine under public_html/.

References:

https://highlightjs.org/
https://github.com/wcoder/highlightjs-line-numbers.js/ Add line numbers to highlightjs
syntax highlighter 4.0
syntax highlighter 3.8