Skip to content

UziTech/marked-katex-extension

Repository files navigation

marked-katex-extension

Render katex code in marked

This is inline katex: $c = \\pm\\sqrt{a^2 + b^2}$

This is block level katex:

$$
c = \\pm\\sqrt{a^2 + b^2}
$$

You will still need to include the css in your html document to allow katex styles.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">

Usage

import {marked} from "marked";
import markedKatex from "marked-katex-extension";

// or in the browser
// <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@{version}/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
// <script defer src="https://cdn.jsdelivr.net/npm/katex@{version}/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
// <script src="https://cdn.jsdelivr.net/npm/marked@{version}/lib/marked.umd.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/marked-katex-extension@{version}/lib/index.umd.js"></script>

const options = {
  throwOnError: false
};

marked.use(markedKatex(options));

marked.parse("katex: $c = \\pm\\sqrt{a^2 + b^2}$");

image

Block level

You can include newlines in block level katex. Block level katex must contain starting and ending delimiters on their own line.

marked.parse(`
$$
\\begin{array}{cc}
   a & b \\\\
   c & d
\\end{array}
$$
`);

DisplayMode

displayMode will be on by default when using two dollar signs ($$) in inline or block katex. And it will be off by default for a single dollar sign ($) in inline or block katex.

Non Standard

If you want to be able to parse mathematical formulas in non-standard markdown format, that is, without spaces before and after $ or $$, you can turn on the nonStandard option.

import {marked} from "marked";
import markedKatex from "marked-katex-extension";

const options = {
  nonStandard: true
};

marked.use(markedKatex(options));

marked.parse(`
afdaf$x=x^2$4$x=x^2$

$$
x = x^2
$$
`);

image

options

Options are sent directly to katex