英语 | русский

Diplodoc Latex 扩展名

这是用于 Diplodoc 平台的扩展, 它使用 Latex 语法添加支持 凯特克 图书馆.

扩展部分包括:

• 编写 Katex 运行时间
• 它变换插件
• 用于智能控制 Katex 的反应钩和组件

快速启动

安装软件包

npm install --save @diplodoc/latex-extension

在变压器上附加插件

import latex from '@diplodoc/latex-extension';
import transform from '@diplodoc/transform';

const {result} = await transform(
  `
### Inline latex

Some text $c = \pm\sqrt{a^2 + b^2}$

### Block latex

$$
c = \pm\sqrt{a^2 + b^2}
$$
`,
  {
    plugins: [latex.transform()],
  },
);

将 latex 运行时间添加到您的最后一页

<html>
  <head>
    <link rel="stylesheet" href="_assets/latex-extension.css" />
    <!-- Read more about '_assets/latex-extension.js' in 'MarkdownIt transform plugin' section -->
    <script src="_assets/latex-extension.js" async />
    <script>
      // Read more about 'latexJsonp' in 'Prepared Katex runtime' section
      window.latexJsonp = window.latexJsonp || [];
      window.latexJsonp.push((latex) => {
        window.addEventListener('load', function () {
          latex.run();
        });
      });
    </script>
  </head>
  <body style="background: #000">
    ${result.html}
  </body>
</html>

编写 Katex 运行时间

Katex - 是渲染tex/latex公式最受欢迎和最快的执行.

Katex的问题在于它的大小很大. 最预期的行为是同步装入.

编写 Katex 运行时间 旨在解决这个问题. 我们添加 latexJsonp 处理 Katex 装入的全局调用 .

此外,我们通过以下方法限制已曝光的Katex API:

• 运行( 选项 ): Katex 选项 打开 运行选项(中文(简体) ) - 启动公式渲染

用法示例:

window.latexJsonp = window.latexJsonp || [];

// This callback will be called when runtime is loaded
window.latexJsonp.push((latex) => {
  latex.run();
});

// You can configure more that one callback
window.latexJsonp.push((latex) => {
  console.log('Render diagrams');
});

运行选项

• querySelector - 查找要渲染的元素时使用的查询选择器.
  (默认 : .yfm-latex(中文(简体) )
  

• nodes - 要制造的节点。 如果这是设定的, querySelector 将被忽略.
  

• sanitize - 从最后html中删除危险内容的功能.
  (默认 : identity(中文(简体) )
  

警卫

默认运行时间使用 Katex 安保建议。 。 。 .
但还有延长消毒时间的额外选择。 你可以随意使用自己的消毒器:

import dompurify from 'dompurify';
import domready from 'domready';

window.latexJsonp = window.latexJsonp || [];
window.latexJsonp.push((latex) => {
  domready(() =>
    latex.run({
      sanitize: dompurify.sanitize,
    }),
  );
});

它变换插件

插件用于 @ diplodoc/ 变形 软件包.

配置 :

• runtime - 显示结果的运行时脚本名称 script 财务报告和审定财务报表 style 节.
  若为 bundle 选项已禁用,则可以是普通字符串。 否则应该是字符串记录.
  默认数字 :

  {
    "script": "_assets/latex-extension.js",
    "style": "_assets/latex-extension.css"
  }
  

• bundle - 布尔旗以启用/无法复制捆绑的运行时间到目标目录.
  目标目录所在 <transformer output option>/<plugin runtime option>
  为客户端使用而禁用
  默认: 真实
  

• validate - 布尔旗以启用/失效建筑验证.
  用于服务器侧预建工具 校对:soup 为客户端使用而禁用
  默认: 真实
  

• classes - 将添加到Latex公式容器中的其他类别.
  (例: my-own-class and-other-class(中文(简体) )
  

• katexOptions - 说吧 凯特克 渲染选项

用于智能控制 Katex 的反应钩和组件

用反应来简化 Katex 控制

import React from 'react';
import {transform} from '@diplodoc/transform';
import latex from '@diplodoc/latex-extension/plugin';
import {LatexRuntime} from '@diplodoc/latex-extension/react';

const LATEX_RUNTIME = 'extension:latex';

const Doc: React.FC = ({content}) => {
  const result = transform(content, {
    plugins: [
      // Initialize plugin for client/server rendering
      latex.transform({
        // Do not touch file system
        bundle: false,
        // Set custom runtime name for searching in result scripts
        runtime: LATEX_RUNTIME,
      }),
    ],
  });

  // Load katex only if one or more formulas should be rendered
  if (result.script.includes(LATEX_RUNTIME)) {
    import('@diplodoc/latex-extension/runtime');
  }

  if (result.style.includes(LATEX_RUNTIME)) {
    import('@diplodoc/latex-extension/runtime/styles');
  }

  return <div dangerouslySetInnerHTML={{__html: result.html}} />;
};

export const App: React.FC = ({theme}) => {
  return (
    <>
      <Doc
        content={`
            $$
            c = \pm\sqrt{a^2 + b^2}
            $$
        `}
      />
      <KatexRuntime />
    </>
  );
};