在圆圈中配置Katex（代码注入）。

Question

我正在为IB数学学生建立一个在线社区，为此我计划使用 circle.so 。鉴于其功能（例如代码注入）和设计，Circle.So似乎是一个不错的选择。

论坛工具（例如圆形）需要具有的功能之一是呈现数学符号（乳胶）或允许代码注入的能力，因此可以使用Katex或MathJax。 katex 似乎可以解决问题。我正在测试/尝试安装KATEX，并且可以选择在头部和JavaScript片段中注入代码（如下图所示）。

我的编程技能为零，我想知道是否有人做过或可以帮助我实现这一目标。对于头部部分，我放置了以下代码（它不起作用）。

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

可以找到Katex的文档在这里。

obs：circle.O可以选择插入自定义CSS（如果有帮助）

Answer 1

这是一个2部分问题，一个非常容易。

问题1

解析Katex

这相对容易，

我们在页面上添加脚本和样式，并在我们的自定义脚本上选择和渲染文本。

这可以在标题代码段

下进行

注意：否 defer 属性在JS代码运行之前将其加载。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-jJFDzw6Rh7jzIumRp31oSKurBXlvFPBHbzi9KbVukp6ZNECGD4UKyhO5tJaJ1uHA" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.js" integrity="sha384-Xfbu6aqAjKdi+UhRmQROxVxvx/iT6irqZqIPGKTbtyjUVRkdg3aEiaxuMdfVqNyu" crossorigin="anonymous"></script>

还有一些JS渲染Katex字符串。

katex.renderToString( katexText, {
  throwOnError: false
});

未解决的问题

我们不知道的

1. ...哪个文本呈现Katex。
2. 在哪里放置渲染文字。

问题2

用户如何插入katex

这是一个充满挑战的一个，因为我们无法控制UI。但是，解决方法可能是使用工具栏中使用代码选项。

​Katex 和关键字只能是 katex 。因此，要使用KATEX，用户将在第一行中添加一个用 katex 添加一个代码块，我们的JS将从那里添加。

这可以在标题代码段

下进行

<script id=''>
    // Find all `pre` tags
    document.querySelectorAll('.trix-content pre').forEach(function(el) {
        // Get text inside
        var text = el.innerText.replace(/^\s+|\s+$/gm, '');
        // Do stuff if text starts with `latex`
        if (0 === text.indexOf('katex')) {
            var renderedKatex = katex.renderToString(
                text.replace('katex', ''),
                {throwOnError: false}
            );
            // Populate katex and additional markup for formatting
            el.outerHTML =
                '<span></span><section class="katex-wrap">' +
                renderedKatex + '</section>';
        }
    })
<script>

之前

scripts

工作片段

// Find all `pre` tags
document.querySelectorAll('.trix-content pre').forEach(function(el) {
  // Get text inside
  var text = el.innerText.replace(/^\s+|\s+$/gm, '');
  // Do stuff if text starts with `latex`
  if (0 === text.indexOf('katex')) {
    var renderedKatex = katex.renderToString(text.replace('katex', ''), {
      throwOnError: false
    });
    // Populat katex and additional markup for formatting
    el.outerHTML = '<span></span><section class="katex-wrap">' + renderedKatex + '</section>';
  }
})

.post__more {
  display: none;
}

<!-- THIS GOES IN HEAD CODE SNIPPETS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-jJFDzw6Rh7jzIumRp31oSKurBXlvFPBHbzi9KbVukp6ZNECGD4UKyhO5tJaJ1uHA" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.js" integrity="sha384-Xfbu6aqAjKdi+UhRmQROxVxvx/iT6irqZqIPGKTbtyjUVRkdg3aEiaxuMdfVqNyu" crossorigin="anonymous"></script>

<h1>Typical circle.so markup</h1>

<h2>Main post content markup</h2>

<div class="post__body">
  <div class="post__inside trix-v2  expanded">
    <div class="react-trix-content fullscreen-preview-enabled">
      <div>
        <div class="trix-content">
          <pre>katex
c = \pm\sqrt{a^2 + b^2}</pre>
        </div>
      </div>
    </div>
  </div>
</div>

<h2>Comment post content markup</h2>

<div class="post__body" data-controller="post">
  <div class="post__inside">
    <div class="trix-content">
      <div>Ordinary code block,</div>
      <pre>const jsVar = 'mi secreto';</pre>
      <div>
        <br>Latex code block<br><br>
      </div>
      <pre>katex
e = mc^2</pre>
      <div></div>
    </div>
  </div>
</div>