Skip to content

Add the attribute `translate="no"` to the katex formula generated by rehype-katex to prevent the formulas from being recognized and translated by webpage and browser translation tools.

License

Notifications You must be signed in to change notification settings

PrinOrange/rehype-katex-notranslate

Repository files navigation

rehype-katex-notranslate

This package is a unified (rehype) plugin. It Add the attribute translate="no" to the katex formula generated by rehype-katex to prevent the formulas from being recognized and translated by webpage and browser translation tools, like Chrome translate.

Contents

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install rehype-katex-notranslate

Usage

Generally, this plugin is usually used with rehype-katex.

Say our document is

<p>
  Lift(<code class="language-math">L</code>) can be determined by Lift
  Coefficient (<code class="language-math">C_L</code>) like the following
  equation.
</p>
<pre><code class="language-math">
  L = \frac{1}{2} \rho v^2 S C_L
</code></pre>
import rehypeDocument from 'rehype-document';
import rehypeKatex from 'rehype-katex';
import rehypeParse from 'rehype-parse';
import rehypeStringify from 'rehype-stringify';
import rehypeKatexNotranslate from 'rehype-katex-notranslate';
import {read, write} from 'to-vfile';
import {unified} from 'unified';

const file = await unified()
  .use(rehypeParse, {fragment: true})
  .use(rehypeDocument, {
    // Get the latest one from: <https://katex.org/docs/browser>.
    css: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css',
  })
  .use(rehypeKatex)
  .use(rehypeKatexNotranslate) // Use this plugin after rehype-katex
  .use(rehypeStringify)
  .process(await read('input.html'));

file.basename = 'output.html';
await write(file);

Then it will outputs with

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>input</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <p>
      Lift(<span class="katex" translate="no"><!--…--></span>) can be determined
      by Lift Coefficient (<span class="katex" translate="no"><!--…--></span>)
      like the following equation.
    </p>
    <span class="katex-display"><!--…--></span>
  </body>
</html>

This plugin will add the attribute translate="no" for every katex blocks.

License

MIT © Codemetic

About

Add the attribute `translate="no"` to the katex formula generated by rehype-katex to prevent the formulas from being recognized and translated by webpage and browser translation tools.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published