remark-math
remark
npm :
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 script, example.js, looks as follows:
const vfile = require ( ' to-vfile ' )
const unified = require ( ' unified ' )
const markdown = require ( ' remark-parse ' )
const math = require ( ' remark-math ' )
const remark2rehype = require ( ' remark-rehype ' )
const katex = require ( ' rehype-katex ' )
const stringify = require ( ' rehype-stringify ' )
unified ( )
. use ( markdown )
. use ( math )
. use ( remark2rehype )
. use ( katex )
. use ( stringify )
. process ( vfile . readSync ( ' example.md ' ) , function ( err , file ) {
if ( err ) throw err
console . log ( String ( file ) )
} )
Now, running node example yields:
< p > Lift( < span class = " math math-inline " > < span class = " katex " > < span class = " katex-mathml " > < math > < 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 mathdefault " > 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 > < 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 mathdefault " 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 mathdefault 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 > < 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 mathdefault " > 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 mathdefault " > ρ </ span > < span class = " mord " > < span class = " mord mathdefault " 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 mathdefault " style = " margin-right:0.05764em; " > S </ span > < span class = " mord " > < span class = " mord mathdefault " 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 mathdefault 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 >
remark().use(math[, options])Parse and stringify math.
Get’s useful when combined with rehype-katexremark-html-katex
You can also support only inline, or online block math, by importing them
directly:
const mathInline = require ( ' remark-math/inline ' )
unified ( )
. use ( mathInline )
optionsoptions.inlineMathDoubleAdd an extra math-display class to inline $$ math (default: false).
You can escape dollar signs with a back slash (\):
\$\alpha\$
$\alpha\$$
$$
\beta\$
$$
Use of remark-math itself doesn’t open you up to cross-site scripting
(XSS) attacks.
Always be wary of user input and use rehype-sanitize
See contributing.mdremarkjs/.githubsupport.md
This project has a code of conduct .
By interacting with this repository, organization, or community you agree to
abide by its terms.
MIT © Junyoung Choi
