feat: KaTeX compatibility

[xinkeng0]

目前插件正常情况下可以工作，但是需要做一些兼容性方面的改进 。

KaTeX Auto-render Extension

目前公式渲染的方式为：

renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\(', right: '\)', display: false},
              {left: '\[', right: '\]', display: true}
          ],
          // 鈥� rendering keys, e.g.:
          throwOnError : false
        });

可能的改进点：

1. document.body 需要更换为特定的Dom标记,例如 <Math></Math> 必须修改此项，来最大限度解决错误处理等类似问题。
   • https://github.com/halo-sigs/plugin-katex/issues/5#issuecomment-1627584057
2. 相应的更新richer-editor公式生成的Dom结构以支持改动。

• 5

[xinkeng0]

需要考虑的一点是，其他编辑器是否可以达到生成指定的Dom标记。

[ruibaby]

我的建议：

1. 约定一个 dom 节点。
2. 支持在插件设置中设置 dom 节点。

[xinkeng0]

我的建议：

1. 约定一个 dom 节点。
2. 支持在插件设置中设置 dom 节点。

这样如何？ <span math-inline>, <div math-display> 之后这样去渲染：

const renderMath = (selector:string,displayMode: boolean)=>{
  const els = postBody.querySelectorAll<HTMLElement>(selector)
  els.forEach((el) => {
   katex.render(el.innerText, el, { displayMode })
  })
}
renderMath('[math-inline]', false)
renderMath('[math-display]', true)

需要在插件设置中支持2个选项

1. inline css selector
2. display css selector