Running a blog about mathematics or computer science requires adding syntax highlighting to show code snippets as well as LaTeX support to show mathematical concepts and formulas.

Code Highlighting with Prism

The simplest solution for code highlighting is to use the Prism library, a lightweight, extensible syntax highlighter, and the quickest way to do just that is by linking it directly from a CDN network.

All of the installation is happening in the Code injection menu of Ghost.

The stylesheets, or css, are injected into the Blog Header. For this blog the standard theme and the toolbar plugin, which is used to show the actual coding language, are injected:

<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet"/>

The actual java scripts are injected into the Blog Footer. For this blog, the core component, prism.min.js, three plugins and support for various languages is injected:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/show-language/prism-show-language.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-lua.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-c.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-cpp.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-parigp.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-latex.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-html.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-markdown.min.js"></script>

The toolbar plugin allows the show-language plugin to show the actual language the code snipped was coded in and the copy-to-clipboard plugin shows a button in the toolbar allowing to copy the entire code snippet into the clipboard by a single click.

For this blog, language support for C, C++, Lua, Pari-GP, LaTeX, HTML and Markdown is activated.

Using Prism now is as easy as writing code snippets inside blocks like this:

```cpp
// insert C++ code here
```

LaTeX Support with MathJax

MathJax is a joint project of the American Mathematical Society and the Society for Industrial and Applied Mathematics to advance mathematical and scientific content on the web.

Once again we can use this by simply linking to a CDN network and injecting the following code into the Blog Footer:

<script type="text/javascript" async src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [["$", "$"], ["\\(", "\\)"]],
        processEscapes: true
    }
});
</script>

Mathematics that is written in TeX or LaTeX format is indicated using math delimiters that surround the mathematics, telling MathJax what part of the page represents mathematics and what is normal text. There are two types of equations: ones that occur within a paragraph (in-line mathematics), and larger equations that appear separated from the rest of the text on lines by themselves (displayed mathematics).

The default math delimiters are \$\$ ... \$\$ (considered as obsolete in modern LaTeX) and \ [ ... \ ] for displayed mathematics, and \ ( ... \ ) for in-line mathematics. Note in particular that the \$ ... \$ in-line delimiters are not used by default. For this reason, in the above script, the \$ ... \$ delimiter is explicitly enabled.

The CHTML keyword automatically loads the following extensions:

• TeX/AMSmath.js: defines the AMS math environments and macros.
• TeX/AMSsymbols.js: defines the macros for the symbols in the msam10 and msbm10 fonts.
• TeX/noErrors.js: shows the original TeX code rather than an error message when there is a problem processing the TeX.
• TeX/noUndefined.js: prevents undefined macros from producing an error message, and instead shows the macro name in red.

Here is an example:

$$\prod_{\mathfrak{p} \in \Omega}\(\frac{\alpha,-1}{\mathfrak{p}})=1,$$
and
\\[(X,\beta) \oplus (X,-\beta) \text{ is split }.\]]

produces:

$$\prod_{\mathfrak{p} \in \Omega}(\frac{\alpha,-1}{\mathfrak{p}})=1,$$
and
\[(X,\beta) \oplus (X,-\beta) \text{ is split }.\]

FontAwesome

As a bonus, to add FontAwesome icons, simply inject the following link to the header:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">        

References

• Prism
• MathJax
• FontAwesome](https://fontawesome.com/)