remark-math
remark and rehype plugins to support math!
Install
This package is ESM only:Node 12+ is needed to use it and it must be imported instead of required.
npm:
npm install remark-math rehype-katex
Use
Say we have the following file, example.md:
Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.
$$
L = \frac{1}{2} \rho v^2 S C_L
$$
And our module, example.js, looks as follows:
import {readSync} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkMath from 'remark-math'
import remarkRehype from 'remark-rehype'
import rehypeKatex from 'rehype-katex'
import rehypeStringify from 'rehype-stringify'
const file = readSync('example.md')
unified()
.use(remarkParse)
.use(remarkMath)
.use(remarkRehype)
.use(rehypeKatex)
.use(rehypeStringify)
.process(file)
.then((file) => {
console.log(String(file))
})
Now, running node example yields:
<p>Lift(<span class="math math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>L</mi></mrow><annotation encoding="application/x-tex">L</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.68333em;vertical-align:0em;"></span><span class="mord mathnormal">L</span></span></span></span></span>) can be determined by Lift Coefficient (<span class="math math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding="application/x-tex">C_L</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.83333em;vertical-align:-0.15em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.07153em;">C</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.32833099999999993em;"><span style="top:-2.5500000000000003em;margin-left:-0.07153em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">L</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span></span></span>) like the following equation.</p>
<div class="math math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>L</mi><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mi>ρ</mi><msup><mi>v</mi><mn>2</mn></msup><mi>S</mi><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding="application/x-tex">L = \frac{1}{2} \rho v^2 S C_L</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.68333em;vertical-align:0em;"></span><span class="mord mathnormal">L</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:2.00744em;vertical-align:-0.686em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.32144em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">2</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">1</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.686em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span><span class="mord mathnormal">ρ</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">v</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mord mathnormal" style="margin-right:0.05764em;">S</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.07153em;">C</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.32833099999999993em;"><span style="top:-2.5500000000000003em;margin-left:-0.07153em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">L</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span></span></span></div>
Wow, that’s a lot!But in a browser, that looks something like this:
Note: you should also use
katex.csssomewhere on the page to style mathproperly:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">
Packages
This repo houses three packages:
remark-math— Parses$asinlineMathand$$asmathnodesrehype-katex— Transforms math nodes with KaTeXrehype-mathjax— Transforms math nodes with MathJax
See their readmes for more information.
Security
Use of rehype-katex or rehype-mathjax renders user content with KaTeX,so any vulnerability in KaTeX can open you to across-site scripting (XSS) attack.
Always be wary of user input and use rehype-sanitize.
If you are using rehype-sanitize and trust KaTeX, youcan allow the classes added by remark-math by extending the default schemalike so:
const mathSanitizeSchema = {
...defaultSchema,
attributes: {
...defaultSchema.attributes,
div: [
...defaultSchema.attributes.div,
['className', 'math', 'math-display']
],
span: [
['className', 'math', 'math-inline']
]
}
}
And applying the rehype-katex plugin after therehype-sanitize plugin like so:
[
rehypeRaw,
// …
[rehypeSanitize, mathSanitizeSchema],
rehypeKatex
// …
]
Related
remark-breaks– Support hard breaks without needing spaces (like on issues)remark-gfm— GFM (autolink literals, strikethrough, tables, tasklists)remark-github— Autolink references like in GitHub issues, PRs, and commentsremark-footnotes— Footnotesremark-frontmatter— Frontmatter (YAML, TOML, and more)
Contribute
See contributing.md in remarkjs/.github for waysto get started.See support.md for ways to get help.
This project has a code of conduct.By interacting with this repository, organization, or community you agree toabide by its terms.
License
-
MATH7861 (S1, 2023) Assignment 1 Due: 4pm on 20 March 2023 All assignments in this course must be submitted electronically and SUBMITTED AS A SINGLE PDF FILE. Prepare your assignment solutions using W
-
数学头文件定义了很多数学函数。 宏: HUGE_VAL 函数: acos(); asin(); atan(); atan2(); ceil(); cos(); cosh(); exp(); fabs(); floor(); fmod(); frexp(); ldexp(); log(); log10(); modf(); pow(); sin(); sinh(); sqrt(); tan();
-
remark（remark.js）是一个简单的基于浏览器的 Markdown 幻灯片工具。 特性： Markdown 格式，带智能插件 演示者模式 语法高亮，支持众多语言 幻灯片可伸缩，适应各种设备 自带一些简单的 Markdown 模板 手机与平板上支持触屏操控
-
Remark-java 是一个 java 库，实现将 HTML 内容转成 Markdown 格式。Remark 依赖于 jsoup 库。 Maven: <dependency> <groupId>com.kotcrab.remark</groupId> <artifactId>remark</artifactId> <version>1.0.0</version></dependency>