将MathJax与Jekyll一起使用

Question

我有一个Jekyll博客,我想用它来使用MathJax,因为我希望能够输入类似的内容

$$\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}$$

在我的markdown文件中,并使用MathJax生成正确的LaTeX表达式,其方式与在math.stackexchange中完成的方式类似.

最简单的方法是什么？目前我在我的目录中有文件jsmath.js(GitHub gist),我想我可以mathjs在我的_includes目录中用一行命名一个简单的文件

<script src="path/to/jsmath.js></script>

并在每个帖子中包括

{% include mathjs %}

但这似乎不起作用 - 当我运行jekyll --server页面时生成,但没有任何内容可见.

我是以正确的方式来做这件事的吗？有没有更好的方法将MathJax与Jekyll一起使用？

Answer 1

当然你可以和Jekyll一起使用mathjax.为了实现这一点,请确保这一点

1. 如果你在降价处写你的帖子,那么你的降价翻译不会扼杀你的数学输入.我发现保护它的最好方法是始终将<div>元素中的显示数学和元素中的内联数学放在一起<span>,大多数降价解释器都会单独留下.

2. javascript行是否在html源中正确显示？我发现指向mathjax CDN更容易,更快,而不是提供我自己的副本.尝试使用该行

   <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

(这些配置选项允许您使用更多的tex表示法来启动数学环境,例如\begin{equation},等).

也许你的jsmath.js脚本存在一些问题; CDN版本将更快,可能更可靠.(我在每个页面上都有javascript加载我的页脚,但是如果你不想在不需要的时候加载javascript,那么你的包含策略当然有意义.)

如果您给我们链接到您的博客,我们可以提供更多帮助吗？你可以在我的博客上看到一些例子(如果有帮助的话,还可以链接到github上的Jekyll设置).

Answer 2

如果您对发布过程有足够的控制权(例如,您自己运行Jekyll),一个简单的解决方案是将markdown解析器切换为支持TeX的解析器.例如,使用kramdown:

gem install kramdown

将markdown行更改_config.yml为

markdown: kramdown

并添加类似的东西

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

到_layouts/default.html.现在,您只需在帖子中标记任何数学$$.

Answer 3

如果您使用的kramdown是降价味道,那很简单.Kramdown内置支持mathjax.

1. </head>在默认布局中的标记之前添加此项.

   <script type="text/javascript" async 
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?
   config=TeX-AMS-MML_HTMLorMML"></script>
   

2. 在行_config.yml之后将此设置为true markdown: kramdown.

   mathjax: true
   

3. 完成.用于重新连接Mathjax

   • 内联,使用\( ... \),

   • 阻止,使用\[ ... \].

     看出来的唯一的事情就是用降价时反斜杠的转义,所以分隔符变得\\( ... \\)和\\[ ... \\]分别为行内和块数学.

4. 这是MathJax内联渲染的一个示例\\( 1/x^{2} \\),这里是一个块渲染: \\[ \frac{1}{n^{2}} \\].

我在我的博客上使用它.

Answer 4

我写了一篇关于设置MathJax的博客文章:Latex Math Magic

从本质上讲,你必须阻止Markdown 搞乱 MathJax.

我最终使用了代码块,这对我来说很好.所以,在使用至少4个空格,你写的东西之前,或使用急性符号:`; 不幸的是,MathJax <code>默认跳过标签,因为它不想转换它不应该转换的代码.

所以在你的主布局文件中的某个地方你必须添加一些javascript代码:

MathJax.Hub.Config({
  tex2jax: {
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
  }
});

另外,我们必须告诉MathJax忽略非乳胶代码块或普通代码块:

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';
    }
});

在他看来,我们所有的乳胶代码块都会在其类名中包含has-jax字符串.因此,我们可以在我们的css表中应用一些简单的样式,以赋予它我们自己的样式.

code.has-jax {font: inherit; font-size: 100%; background: inherit; border: inherit;}

可能不是最好的方法,但它在我的博客中工作了多年,我从来没有遇到任何进一步的问题.