Adding style to your equations and code using Mathjax and Prism

By Juan M. Fonseca-Solís, Nov 2018.

Before starting, remember the basic structure of an HTML document:

<!DOCTYPE html>
<html>
	<head>...</head>
	<body>...</body>
</html>

Let's say you are familiar with Latex and want to add an equation to your blog, and you add Mathjax support by including the following HTML code to your header:

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

Then you are able to write an inline equation, like this $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$, by adding the following code:

\(x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\),

and its expanded version: $$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}, $$ by writting the same formula inside the dollar symbols:

$$
x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
$$.

Now, let's say that you also want to add bash and java code to your blog, so you link your document to Prism.js by adding the following lines in the header:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.js">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-bash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-java.js"></script>;

In that way you can add Bash code:

git clone git@github.com:juanfonsecasolis/juanfonsecasolis.github.io.git
echo "I was here" >> README.md
git commit -a -m "Appending a surprise"
git push origin master

And Java code:

package juanfonsecasolis.samples;

public class Main implements MyInterface{ 
	public static void main(String [] args){
		// Print something in screen
		System.out.println("Hello world!");
	}
}

To add support for more languajes please visit https://cdnjs.com/libraries/prism.

Esta obra está bajo una Licencia Creative Commons Atribución 4.0 Internacional. El sitio juanfonsecasolis.github.io es un blog costarricence dedicado a la investigación independiente en temas relacionados al procesamiento digital de señales.