Security News
Python Overtakes JavaScript as Top Programming Language on GitHub
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
rehype-katex
Advanced tools
The rehype-katex package is a plugin for the rehype ecosystem that allows you to transform LaTeX math expressions into HTML using KaTeX. This is particularly useful for rendering mathematical content in web pages.
Basic LaTeX to HTML Conversion
This feature allows you to convert LaTeX math expressions within your HTML content into properly formatted HTML using KaTeX. The code sample demonstrates how to use rehype-katex to process a string containing a LaTeX expression.
const rehype = require('rehype');
const rehypeKatex = require('rehype-katex');
const html = rehype()
.use(rehypeKatex)
.processSync('Here is some math: $E = mc^2$')
.toString();
console.log(html);
Custom KaTeX Options
This feature allows you to customize the behavior of KaTeX by passing options. In the code sample, the `throwOnError` option is set to `false` to prevent errors from being thrown, and `errorColor` is set to customize the color of error messages.
const rehype = require('rehype');
const rehypeKatex = require('rehype-katex');
const html = rehype()
.use(rehypeKatex, { throwOnError: false, errorColor: '#cc0000' })
.processSync('Here is some math: $E = mc^2$')
.toString();
console.log(html);
remark-math is a plugin for the remark ecosystem that parses and renders LaTeX math expressions in Markdown. It is similar to rehype-katex but is used within the remark ecosystem for Markdown processing.
markdown-it-katex is a plugin for the markdown-it Markdown parser that allows you to render LaTeX math expressions within Markdown content. It is similar to rehype-katex but is used within the markdown-it ecosystem.
gatsby-remark-katex is a plugin for Gatsby that allows you to render LaTeX math expressions in Markdown files. It is similar to rehype-katex but is specifically designed for use with Gatsby.
rehype plugin to transform <span class=math-inline>
and
<div class=math-display>
with KaTeX.
npm:
npm install rehype-katex
Say we have the following file, example.html
:
<p>
Lift(<span class="math math-inline">L</span>) can be determined by Lift Coefficient
(<span class="math math-inline">C_L</span>) like the following equation.
</p>
<div class="math math-display">
L = \frac{1}{2} \rho v^2 S C_L
</div>
And our script, example.js
, looks as follows:
const vfile = require('to-vfile')
const unified = require('unified')
const parse = require('rehype-parse')
const katex = require('rehype-katex')
const stringify = require('rehype-stringify')
unified()
.use(parse, {fragment: true})
.use(katex)
.use(stringify)
.process(vfile.readSync('example.html'), 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 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>
rehype().use(katex[, options])
Transform <span class="math-inline">
and <div class="math-display">
with
KaTeX.
options
options.throwOnError
Throw if a KaTeX parse error occurs (boolean
, default: false
).
See KaTeX options.
options.<*>
All other options, except for displayMode
, are passed to
KaTeX.
Use of rehype-katex
renders user content with KaTeX, so any vulnerability
in KaTeX can open you to a cross-site scripting (XSS) attack.
Always be wary of user input and use rehype-sanitize
.
See contributing.md
in remarkjs/.github
for ways
to 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 to abide by its terms.
FAQs
rehype plugin to transform inline and block math with KaTeX
The npm package rehype-katex receives a total of 263,098 weekly downloads. As such, rehype-katex popularity was classified as popular.
We found that rehype-katex demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
Security News
Dutch National Police and FBI dismantle Redline and Meta infostealer malware-as-a-service operations in Operation Magnus, seizing servers and source code.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.