Mimic LaTeX in HTML by CSS and JS Including Heading Number, List Types, Math (Including Amsthm) and Physics Package.

First, this post is only relevant if you use MultiMarkdown.

CSS

I want to make the MMD to HTML output looks closer to the MMD to LaTeX output. In short, you can use my multimarkdown-latex.css from ickc/multimarkdown-latex-css to mimic

1. Nested list styling
2. Heading numbering (including the same numbering in the TOC element)
3. And amsthm ¹

JS

Using MathJax and my Physics extension in MathJax-third-party-extensions/physics², many Math packages and the Physics package behavior can be mimic in HTML (and hence Markdown too).

You can use the MathJax setup in ickc/multimarkdown-latex-css/load-mathjax-cdn.min.html (put in in the head of the HTML or add a metadata of HTMLHeader in MultiMarkdown). That one already includes the Physics, cancel, AMS numbering extensions.

Lastly, there’s a highlight.js setup in multimarkdown-latex-css/load-highlight-cdn.min.html

The following is a demo of all these features ³:

Demo

MathJax and Physics

Physics:

\[\begin{equation} \ket{\upsilon} \end{equation}\]

Cancel:

\[\begin{equation} \cancel{p} \end{equation}\]

Also see the equation numbering above.

Highlight

#!/bin/bash
while IFS='' read -r line || [[ -n "$line" ]]; do
    iconv -f big5-2003 -t utf-8 "$line" > temp
    sed -i '' s/big5/utf-8/ temp
    mv -f temp "$line"
done < "$1"

Amsthm

List

Ordered

1. testing
2. testing
   1. testing
   2. testing
      1. testing
      2. testing
         1. testing
         2. testing

Unordered

• testing
• testing
  • testing
  • testing
    • testing
    • testing
      • testing
      • testing

Heading

See the heading numbering above