Syntax highlighting & Mathematical markup in HTML

Why do I need syntax highlighting?

Syntax highlighting of “code” blocks in a HTML is useful if say you want to create a blog on a programming language and you would like to convey to the readers the code clearly.

Syntax highlighting in HTML is super simple and improves the overall readability of the page content.

HighlightJS

Though there are a number of solutions available, in my experience the simplest one which gets the job done is highlightJS.

HighlightJS is a simple syntax highlighting javascript library.

To add syntax highlighting on your webpage, add this code within the head tag.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/androidstudio.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

First we load up the CSS & JS script for highlightJS, next we initialize them so they can be used.

To add syntax highlighting to the following python code snippet, the html code will be:

<pre><code class="python hljs">def map(key, value):
  # key: document name
  # value: document contents
  for each word w in value:
    EmitIntermediate(w, "1");

def reduce( key, values):
  # key: a word
  # values: a list of counts
  int result = 0;
  for each v in values:
    result += ParseInt(v);
    Emit(AsString(result));</code></pre>

The result would look something like this:

def map(key, value):
  # key: document name
  # value: document contents
  for each word w in value:
    EmitIntermediate(w, "1");

def reduce( key, values):
  # key: a word
  # values: a list of counts
  int result = 0;
  for each v in values:
    result += ParseInt(v);
    Emit(AsString(result));

For more information on syntax highlighting for other languages, you can check the highlightJS demo.

Why do I need mathematical markup?

Although the mark-up language HTML has a large repertoire of tags, it does not cater for math. With no means of using HTML tags to mark up mathematical expressions, authors have resorted to drastic means. For example, a popular method involves inserting images - literally snap shots of equations taken from other packages and saved in GIF format - into technical documents which have a mathematical or scientific content.

Mathematical Markup Langauge (MathML)

MathML is intended to facilitate the use and re-use of mathematical and scientific content on the Web. MathML can be used to encode both the presentation of mathematical notation for high-quality visual display, and mathematical content.

To add MathML to your webpage, we need to import the libraries for the same within the head tag. Both CSS and the JS script can be imported with a single link.

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>

MathML needs to be initialized and this can be done by adding this script within the head tag.

<script type="text/x-mathjax-config">
  //Note the above <script> attribute type="text/x-mathjax-config" 
  MathJax.Hub.Config({
      tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  });
</script>

For example to display the following mathematical equation:

\[(X^2 + Y^2) \le \Delta\]

The HTML code for the same would be:

<p>$$(X^2 + Y^2) \le \Delta$$</p>

Click on the hyperlink to find more information on the LaTeX commands for the math symbols.