Code Monkey home page Code Monkey logo

mdbook-katex's Introduction

mdBook-KaTeX

Crates.io version Crates.io downloads

mdBook-KaTeX is a preprocessor for mdBook, pre-rendering LaTeX math expressions to HTML at build time.

  • Very fast page loading. Much faster than rendering equations in the browser.
  • No need for client-side JavaScript.
  • Customization such as macros and delimiters.

Pre-rendering uses the katex crate. List of LaTeX functions supported by KaTeX.

Getting Started

First, install mdBook-KaTeX

  • Non-Windows users:

    cargo install mdbook-katex
  • Windows users: The recommended way is to download the latest x86_64-pc-windows-gnu.zip from Releases for the full functionality. See #67 for the reasons.

Then, add the following line to your book.toml file

[preprocessor.katex]
after = ["links"]

You can now use $ and $$ delimiters for inline and display math expressions within your .md files. If you need a regular dollar symbol, you need to escape delimiters with a backslash \$.

# Chapter 1

Here is an inline example, $ \pi(\theta) $,

an equation,

$$ \nabla f(x) \in \mathbb{R}^n, $$

and a regular \$ symbol.

Math expressions will be rendered as HTML when running mdbook build or mdbook serve as usual.

KaTeX options

Most KaTeX options are supported via the katex crate. Specify these options under [preprocessor.katex] in your book.toml:

Argument Type
output "html", "mathml", or "htmlAndMathml"
leqno boolean
fleqn boolean
throw-on-error boolean
error-color string
min-rule-thickness number
max-size number
max-expand number
trust boolean

There are also extra options to configure the behaviour of the preprocessor:

Option Description
no-css Do not inject KaTeX stylesheet link (See Self-host KaTeX CSS and fonts)
macros Path to macros file (see Custom macros)
include-src Include math expressions source code (See Including math Source)
block-delimiter See Custom delimiter
inline-delimiter See Custom delimiter

For example, the default configuration:

[preprocessor.katex]
after = ["links"]
# KaTeX options.
output = "html"
leqno = false
fleqn = false
throw-on-error = true
error-color = "#cc0000"
min-rule-thickness = -1.0
max-size = "Infinity"
max-expand = 1000
trust = false
# Extra options.
no-css = false
include-src = false
block-delimiter = { left = "$$", right = "$$" }
inline-delimiter = { left = "$", right = "$" }

Self-host KaTeX CSS and fonts

KaTeX requires a stylesheet and fonts to render correctly.

By default, mdBook-KaTeX injects a KaTeX stylesheet link pointing to a CDN.

If you want to self-host the CSS and fonts instead, you should specify in book.toml:

[preprocessor.katex]
no-css = true

and manually add the CSS and fonts to your mdBook project before building it.

See mdBook-KaTeX Static CSS Example for an automated example.

Custom macros

Custom LaTeX macros must be defined in a .txt file, according to the following pattern

\grad:{\nabla}
\R:{\mathbb{R}^{#1 \times #2}}

You need to specify the path of this file in your book.toml as follows

[preprocessor.katex]
macros = "path/to/macros.txt"

These macros can then be used in your .md files

# Chapter 1

$$ \grad f(x) \in \R{n}{p} $$

Including math source

This option is added so users can have a convenient way to copy the source code of math expressions when they view the book.

When include-src is set to true, each math block is wrapped within a <data> tag with class="katex-src" with the included math source code being its value attribute.

For example, before being fed into mdBook,

Define $f(x)$:

$$
f(x)=x^2\\
x\in\R
$$

is preprocessed into (the content of the katex spans are omitted and represented as )

Define <data class="katex-src" value="f(x)"><span class="katex">…</span></data>:

<data class="katex-src" value="&#10;f(x)=x^2\\&#10;x\in\R&#10;"><span class="katex-display"><span class="katex">…</span></span></data>

The math source code is included in a minimal fashion, and it is up to the users to write custom CSS and JavaScript to make use of it. For more information about adding custom CSS and JavaScript in mdBook, see additional-css and additional-js.

If you need more information about this feature, please check the issues or file a new issue.

Custom delimiter

To change the delimiters for math expressions, set the block-delimiter and inline-delimiter under [preprocessor.katex]. For example, to use \(and \) for inline math and \[ and \] for math block, set

[preprocessor.katex]
block-delimiter = { left = "\\[", right = "\\]" }
inline-delimiter = { left = "\\(", right = "\\)" }

Note that the double backslash above are just used to escape \ in the TOML format.

Caveats

$\backslash$ does not work, but you can use $\setminus$ instead.

Only the x86_64 Linux, Windows GNU, and macOS builds have full functionality, all other builds have compromised capabilities. See #39 for the reasons.

mdbook-katex's People

Contributors

sichanghe avatar lzanini avatar matthewacon avatar kknives avatar luni-4 avatar lovesegfault avatar mschoenebeck avatar srevinsaju avatar jontze avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.