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 1

JS

Using MathJax and my Physics extension in MathJax-third-party-extensions/physics2, 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 3:

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

1+1=2

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

  1. from my folk of ickc/peg-multimarkdown-latex-support, you can setup the amsthm in LaTeX in parallel with the CSS there 

  2. it doesn’t provide everything the Physics package in LaTeX provides, because I practically know nothing about Javascript… 

  3. I cheated because the HTML here is generated by kramdown (and the highlight by rouge that kramdown used) that Jekyll used. See this one for a full demo of an output by MMD to HTML directly.