Skip to content

LATEX-superfence

What is that ?

This project aims to convert LATEX code to svg images when integrated to markdown documents, for example on this mkdocs-material website where it can automatically adapt to dark/light theme.

It is based on pymdown-extensions superfences and an operational texlive installation (pdflatex, pdfcrop pdf2svg).

Here is a demo using tikz library

```{.latex blackstroke="red" width="100%"}
\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{trees}
\begin{document}
\pagestyle{empty}
\tikzset{
every node/.style={font=\Huge\bfseries},  
every path/.style={ultra thick},    
}
\hbox to \hsize{\hfil{
\begin{tikzpicture}[level distance=2cm,
    level 1/.style={sibling distance=4cm},
    level 2/.style={sibling distance=2cm}]
    % First tree
    \node {a}
    child {node {b}
        child {node {d}
        child{node {}}
        child{node {}}
        }
        child {node {}}
    }
    child {node {c}
        child {node {e}
        child{node {}}
        child{node {}}
        }
        child {node {}}
    };
\end{tikzpicture}
}\hfil}
\end{document}
```

Install it...

latex-superfence is a custom formatter used by pymdown-extensions on mkdocs-material theme... so to use it :

Installation
pip install latex-superfence
sudo apt install texlive-full

Configure Mkdocs material

A minimal configuration could be this one :

mkdocs.yml
site_name: Mkdocs-latex
theme:
  name: material #Need to install mkdocs-material
  palette: 
    # Palette toggle for light mode
    - scheme: default
      toggle:
        icon: material/brightness-7 
        name: Switch to dark mode
    # Palette toggle for dark mode
    - scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to light mode

markdown_extensions:
  - pymdownx.superfences: # Latex SuperFence, need to install latex-superfence
      custom_fences:
        - name: latex    
          class: latex
          format: !!python/object/apply:latex_superfence.formatter
            kwds:
              blackfill: var(--md-typeset-color)   # Here is the magic for 
              blackstroke: var(--md-typeset-color) # dark/light theme adaptation
              whitefill: var(--md-default-bg-color)
              whitestroke: var(--md-default-bg-color)
          validator: !!python/name:latex_superfence.validator

Use it

  • Latex fences are either opened by ```latex or ```{.latex}
  • You can add blackfill, whitefill, blackstrokeand whitestroke colors to the latex fences, for example ```{.latex blackfill="yellow" blackstroke="red"}, or globally in mkdocs.yml (see below). This will replace all black/white fills/strokes by the specified colors.
  • Same way, you can set heightand width of the generated svg.
  • Use mkdocs-material variables for colors that adapt to light/dark mode, for example var(--md-typeset-color) and var(--md-default-bg-color)