Docsify: 可否支持一下 MathJax？

[40huo]

加载 MathJax 代码后在公式页刷新是有效果的，但是从别的页面点进去就失效了，应该是没有回调？小白不太会弄。。。

[reverland]

mathjax啊，我也比较感兴趣

http://docs.mathjax.org/en/latest/api/hub.html#Rerender 因为路由变化时候要rerender下。你可以写个插件做这个

我更喜欢 https://github.com/Khan/KaTeX

[reverland]

可选的，可以像我在https://github.com/reverland/vud3/blob/master/docs/index.html#L32 里做的一样mogai markdown语法。。

[reverland]

另外，楼主做安全啊

[QingWei-Li]

简单的给个插件的写法吧，应该能满足你的需求（别忘了引入样式）

<script>
  window.$docsify = {
    plugins: [
      function (hook) {
        hook.beforeEach(function (content) {
          return content.replace(/\$\$([\s\S]*?)\$\$/g, function (m, code) {
            return katex.renderToString(code)
          })
        })
      }
    ]
  }
</script>
<script src="//unpkg.com/katex/dist/katex.min.js"></script>
<script src="//unpkg.com/docsify"></script>

README.md

# 测试例子

$$
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
$$

[reverland]

大佬快点去写浏览器端的webpack

[40huo]

<script>
window.$docsify = {
    plugins: [
      function (hook) {
        hook.beforeEach(function (content) {
          return content.replace(/\$\$([\s\S]*?)\$\$/g, function (m, code) {
            MathJax.Hub.Queue(["Typeset",MathJax.Hub])
            return code
          })
        })
      }
    ]
}
</script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script>
<script src="//cdn.bootcss.com/mathjax/2.6.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

我改成这样以后被单个$包围的可以渲染了，然而$$的却不行。。。

## Inline Math

$
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
$

## Display Math

$$
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
$$

感觉是 return 的那部分要改改？
@reverland 正在学习安全，还是个菜鸡。。

[40huo]

  plugins: [
    function (hook) {
      hook.doneEach(function () {
        // 每次路由切换时数据全部加载完成后调用，没有参数。
        // ...
        if (typeof MathJax !== 'undefined') {
          MathJax.Hub.Queue(["Typeset", MathJax.Hub])
        }
      })
    }
  ]

已解决。

[jrappen]

@QingWei-Li The solution for Katex above does not work.

[QingWei-Li]

@jrappen
Sorry, I will not use Katex. I just copied an expression, it is working for me.

# Test

$$
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
$$

plugins: [
      function (hook) {
        hook.beforeEach(function (content) {
          return content.replace(/\$\$([\s\S]*?)\$\$/g, function (m, code) {
            console.log(code)
            return katex.renderToString(code.trim())
          })
        })
      }
    ]

[jrappen]

@QingWei-Li Not working for me, minimal example:

• https://github.com/jrappen/test/blob/master/docs/index.html
• https://github.com/jrappen/test/blob/master/docs/README.md
• https://jrappen.github.io/test

Am I doing something wrong?

[QingWei-Li]

@jrappen Make sure katex is loaded before docsify.

<script src="//unpkg.com/katex/dist/katex.min.js"></script>
<script src="//unpkg.com/docsify"></script>
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>

[jrappen]

@QingWei-Li Ok, thanks.

[iolaizola]

I faced many issues with the proposed solutions. My main problem is that the subscript symol '_' is parsed as <em>. Therefore I wrote a workaround by replacing '_' before parsing and replacing it back after markdown parsing. I tested it with mathjax and works perfectly. I only included the $ and $$ symbols but could be easily extended to '\[" like tags by copy-pasting the rules.

      plugins: [
        function (hook) {
          hook.beforeEach(function (content) {
            return content.replace(/\$\$([\s\S]*?)\$\$/g,
               function(x){ return x.replace(/[_]/g,'[subscript]')}
            )
          })
          hook.beforeEach(function (content) {
            return content.replace(/\$([\s\S]*?)\$/g,
               function(x){ return x.replace('_','[subscript]')}
            )
          })
          hook.afterEach(function(html, next) {
            html = html.replace(/\$\$([\s\S]*?)\$\$/g,
               function(x){ return x.replace(/(\[subscript\])/g,'_') }
            )
            html = html.replace(/\$([\s\S]*?)\$/g,
               function(x){ return x.replace(/(\[subscript\])/g,'_')}
            )
            MathJax.Hub.Queue( ["Typeset",MathJax.Hub] ) // calling it twice
            MathJax.Hub.Queue( ["Typeset",MathJax.Hub] ) //fixes MathJax refresh issue
            next(html)
          })
        }
      ]

[upupming]

Hi, I have created a new project for writing math with docsify.

This is my repo: https://github.com/upupming/docsify-katex, It's based on KaTeX.

If you find any problems, please let me know!

[tmt514]

I faced many issues with the proposed solutions. My main problem is that the subscript symol '_' is parsed as <em>. Therefore I wrote a workaround by replacing '_' before parsing and replacing it back after markdown parsing. I tested it with mathjax and works perfectly. I only included the $ and $$ symbols but could be easily extended to '[" like tags by copy-pasting the rules.

      plugins: [
        function (hook) {
          hook.beforeEach(function (content) {
            return content.replace(/\$\$([\s\S]*?)\$\$/g,
               function(x){ return x.replace(/[_]/g,'[subscript]')}
            )
          })
          hook.beforeEach(function (content) {
            return content.replace(/\$([\s\S]*?)\$/g,
               function(x){ return x.replace('_','[subscript]')}
            )
          })
          hook.afterEach(function(html, next) {
            html = html.replace(/\$\$([\s\S]*?)\$\$/g,
               function(x){ return x.replace(/(\[subscript\])/g,'_') }
            )
            html = html.replace(/\$([\s\S]*?)\$/g,
               function(x){ return x.replace(/(\[subscript\])/g,'_')}
            )
            MathJax.Hub.Queue( ["Typeset",MathJax.Hub] ) // calling it twice
            MathJax.Hub.Queue( ["Typeset",MathJax.Hub] ) //fixes MathJax refresh issue
            next(html)
          })
        }
      ]

Just a comment here: I used MathJax3 and it worked with MathJax.typeset() inside the hook.doneEach() perfectly!