Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
rehype-katex
Advanced tools
rehype-katex - npm Package Compare versions
Comparing version 6.0.1 to 6.0.2
@@ -52,3 +52,4 @@ /** | ||
| ) | ||
| } catch (error) { | ||
| } catch (error_) { | ||
| const error = /** @type {Error} */ (error_) | ||
| const fn = throwOnError ? 'fail' : 'message' | ||
@@ -55,0 +56,0 @@ const origin = [source, error.name.toLowerCase()].join(':') |
| { | ||
| "name": "rehype-katex", | ||
| "version": "6.0.1", | ||
| "version": "6.0.2", | ||
| "description": "rehype plugin to transform inline and block math with KaTeX", | ||
@@ -44,3 +44,3 @@ "license": "MIT", | ||
| "hast-util-to-text": "^3.1.0", | ||
| "katex": "^0.13.0", | ||
| "katex": "^0.15.0", | ||
| "rehype-parse": "^8.0.0", | ||
@@ -47,0 +47,0 @@ "unified": "^10.0.0", |
211
readme.md
@@ -11,12 +11,47 @@ # rehype-katex | ||
| [**rehype**][rehype] plugin to transform `<span class=math-inline>` and | ||
| **[rehype][]** plugin to render `<span class=math-inline>` and | ||
| `<div class=math-display>` with [KaTeX][]. | ||
| ## Contents | ||
| * [What is this?](#what-is-this) | ||
| * [When should I use this?](#when-should-i-use-this) | ||
| * [Install](#install) | ||
| * [Use](#use) | ||
| * [API](#api) | ||
| * [`unified().use(rehypeKatex[, options])`](#unifieduserehypekatex-options) | ||
| * [CSS](#css) | ||
| * [Syntax tree](#syntax-tree) | ||
| * [Types](#types) | ||
| * [Compatibility](#compatibility) | ||
| * [Security](#security) | ||
| * [Related](#related) | ||
| * [Contribute](#contribute) | ||
| * [License](#license) | ||
| ## What is this? | ||
| This package is a [unified][] ([rehype][]) plugin to render math. | ||
| You can combine it with [`remark-math`][remark-math] for math in markdown or add | ||
| `math-inline` and `math-display` classes in HTML. | ||
| **unified** is a project that transforms content with abstract syntax trees | ||
| (ASTs). | ||
| **rehype** adds support for HTML to unified. | ||
| **hast** is the HTML AST that rehype uses. | ||
| This is a rehype plugin that transforms hast. | ||
| ## When should I use this? | ||
| This project is useful as it renders math with KaTeX at compile time, which | ||
| means that there is no client side JavaScript needed. | ||
| A different plugin, [`rehype-mathjax`][rehype-mathjax], is similar but uses | ||
| [MathJax][] instead. | ||
| ## Install | ||
| This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): | ||
| Node 12+ is needed to use it and it must be `import`ed instead of `require`d. | ||
| This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). | ||
| In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]: | ||
| [npm][]: | ||
| ```sh | ||
@@ -26,5 +61,19 @@ npm install rehype-katex | ||
| In Deno with [Skypack][]: | ||
| ```js | ||
| import rehypeKatex from 'https://cdn.skypack.dev/rehype-katex@6?dts' | ||
| ``` | ||
| In browsers with [Skypack][]: | ||
| ```html | ||
| <script type="module"> | ||
| import rehypeKatex from 'https://cdn.skypack.dev/rehype-katex@6?min' | ||
| </script> | ||
| ``` | ||
| ## Use | ||
| Say we have the following file, `example.html`: | ||
| Say we have the following file `example.html`: | ||
@@ -42,6 +91,6 @@ ```html | ||
| And our module, `example.js`, looks as follows: | ||
| And our module `example.js` looks as follows: | ||
| ```js | ||
| import {readSync} from 'to-vfile' | ||
| import {read} from 'to-vfile' | ||
| import {unified} from 'unified' | ||
@@ -53,27 +102,37 @@ import rehypeParse from 'rehype-parse' | ||
| const file = readSync('example.html') | ||
| main() | ||
| unified() | ||
| .use(rehypeParse, {fragment: true}) | ||
| .use(rehypeKatex) | ||
| .use(rehypeDocument, { | ||
| css: 'https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css' | ||
| }) | ||
| .use(rehypeStringify) | ||
| .process(file) | ||
| .then((file) => { | ||
| console.log(String(file)) | ||
| }) | ||
| async function main() { | ||
| const file = await unified() | ||
| .use(rehypeParse, {fragment: true}) | ||
| .use(rehypeKatex) | ||
| .use(rehypeDocument, { | ||
| css: 'https://cdn.jsdelivr.net/npm/katex@0.15.0/dist/katex.min.css' | ||
| }) | ||
| .use(rehypeStringify) | ||
| .process(await read('example.html')) | ||
| console.log(String(file)) | ||
| } | ||
| ``` | ||
| Now, running `node example` yields: | ||
| Now running `node example.js` yields: | ||
| ```html | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>example</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.0/dist/katex.min.css"> | ||
| </head> | ||
| <body> | ||
| <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. | ||
| Lift(<span class="math math-inline"><span class="katex">…</span></span>) can be determined by Lift Coefficient | ||
| (<span class="math math-inline"><span class="katex">…</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> | ||
| <div class="math math-display"><span class="katex-display">…</span></div> | ||
| </body> | ||
| </html> | ||
| ``` | ||
@@ -91,21 +150,93 @@ | ||
| #### `options` | ||
| ##### `options` | ||
| ##### `options.throwOnError` | ||
| Configuration (optional). | ||
| All options, except for `displayMode`, are passed to [KaTeX][katex-options]. | ||
| ###### `options.throwOnError` | ||
| Throw if a KaTeX parse error occurs (`boolean`, default: `false`). | ||
| See [KaTeX options][katex-options]. | ||
| ##### `options.<*>` | ||
| ## CSS | ||
| All other options, except for `displayMode`, are passed to | ||
| [KaTeX][katex-options]. | ||
| The HTML produced by KaTeX requires CSS to render correctly. | ||
| You should use `katex.css` somewhere on the page where the math is shown to | ||
| style it properly. | ||
| At the time of writing, the last version is: | ||
| ```html | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.0/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous"> | ||
| ``` | ||
| ## Syntax tree | ||
| This plugin transforms elements with a class name of either `math-inline` and/or | ||
| `math-display`. | ||
| ## Types | ||
| This package is fully typed with [TypeScript][]. | ||
| An extra `Options` type is exported, which models the accepted options. | ||
| ## Compatibility | ||
| Projects maintained by the unified collective are compatible with all maintained | ||
| versions of Node.js. | ||
| As of now, that is Node.js 12.20+, 14.14+, and 16.0+. | ||
| Our projects sometimes work with older versions, but this is not guaranteed. | ||
| This plugin works with unified version 6+ and rehype version 4+. | ||
| ## Security | ||
| Use of `rehype-katex` renders user content with [KaTeX][], so any vulnerability | ||
| in KaTeX can open you to a [cross-site scripting (XSS)][xss] attack. | ||
| Using `rehype-katex` should be safe assuming that you trust KaTeX. | ||
| Any vulnerability in it could open you to a [cross-site scripting (XSS)][xss] | ||
| attack. | ||
| Always be wary of user input and use [`rehype-sanitize`][rehype-sanitize]. | ||
| When you don’t trust user content but do trust KaTeX, you can allow the classes | ||
| added by `remark-math` while disallowing anything else in the `rehype-sanitize` | ||
| schema, and run `rehype-katex` afterwards. | ||
| Like so: | ||
| ```js | ||
| import rehypeSanitize, {defaultSchema} from 'rehype-stringify' | ||
| const mathSanitizeSchema = { | ||
| ...defaultSchema, | ||
| attributes: { | ||
| ...defaultSchema.attributes, | ||
| div: [ | ||
| ...defaultSchema.attributes.div, | ||
| ['className', 'math', 'math-display'] | ||
| ], | ||
| span: [ | ||
| ['className', 'math', 'math-inline'] | ||
| ] | ||
| } | ||
| } | ||
| // … | ||
| unified() | ||
| // … | ||
| .use(rehypeSanitize, mathSanitizeSchema) | ||
| .use(rehypeKatex) | ||
| // … | ||
| ``` | ||
| ## Related | ||
| * [`rehype-mathjax`][rehype-mathjax] | ||
| — same but with MathJax | ||
| * [`rehype-highlight`](https://github.com/rehypejs/rehype-highlight) | ||
| — highlight code blocks | ||
| * [`rehype-autolink-headings`](https://github.com/rehypejs/rehype-autolink-headings) | ||
| — add links to headings | ||
| * [`rehype-sanitize`](https://github.com/rehypejs/rehype-sanitize) | ||
| — sanitize HTML | ||
| * [`rehype-document`](https://github.com/rehypejs/rehype-document) | ||
| — wrap a document around the tree | ||
| ## Contribute | ||
@@ -155,2 +286,4 @@ | ||
| [skypack]: https://www.skypack.dev | ||
| [health]: https://github.com/remarkjs/.github | ||
@@ -168,2 +301,4 @@ | ||
| [unified]: https://github.com/unifiedjs/unified | ||
| [rehype]: https://github.com/rehypejs/rehype | ||
@@ -173,2 +308,4 @@ | ||
| [typescript]: https://www.typescriptlang.org | ||
| [rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize | ||
@@ -179,1 +316,7 @@ | ||
| [katex-options]: https://katex.org/docs/options.html | ||
| [mathjax]: https://www.mathjax.org | ||
| [remark-math]: ../remark-math | ||
| [rehype-mathjax]: ../rehype-mathjax |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by1.37%
74
- Number of lines in readme file
- increased by83.63%
314
Worsened metrics
- Total package byte prevSize
- decreased by-0.65%
12622
Dependency changes
+ Addedkatex@0.15.6(transitive)
- Removedkatex@0.13.24(transitive)
Updatedkatex@^0.15.0