【问题标题】:Using MathJax with Jekyll在 Jekyll 中使用 MathJax
【发布时间】:2012-06-14 19:46:07
【问题描述】:

我有一个 Jekyll 博客,我想使用 MathJax,因为我希望能够输入类似的东西

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

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

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

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

并将其包含在每个帖子中

{% include mathjs %}

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

我这样做的方式是否正确?有没有更好的方法将 MathJax 与 Jekyll 一起使用?

【问题讨论】:

标签: jekyll mathjax


【解决方案1】:

对我来说,将它添加到我的默认 _layout 或 head _include 作品中(结合前端的 _page 或 _post 变量):

---
mathjax: yes
---
    <!-- mathjax -->
    {% if page.mathjax %}
        <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-MML-AM_CHTML">
            MathJax.Hub.Config({
                tex2jax: {
                    inlineMath: [["$", "$"], ["\\(", "\\)"]],
                    processEscapes: true
                }
            });
        </script>
    {% endif %}

working example

【讨论】:

    【解决方案2】:

    Jekyll 从 2.0+ 开始使用 kramdown 作为默认的降价转换器。而且它不支持mathjax等,我认为下面可以帮助你。

    jekyll-spaceship - ? Jekyll 插件,提供强大的支持 table、mathjax、plantuml、youtube、vimeo、dailymotion 等。

    https://github.com/jeffreytse/jekyll-spaceship

    把你的数学表达式放在 $...$

    $\LaTeX{}$
    
    $\Pi$
    
    $ a * b = c ^ b $
    
    $ 2^{\frac{n-1}{3}} $
    
    $ \int\_a^b f(x)\,dx. $
    

    上面的代码会被解析为:

    【讨论】:

      【解决方案3】:

      尝试以下任一选项之前的一些注意事项

      选项 0 即使使用 --incremental 也会增加构建时间,并且实际上选项 1 应该可能在大多数实例中使用,但是,这以及占用的额外空间可能值得如果您在客户端可能无法访问 CDN 的网络上进行部署,则会产生成本。

      这两个选项都在私有服务器上进行了测试,kramdown 作为降价解释器,mathjax: true 在项目的_config.yml 文件中设置;请参阅 Step 2 of Soham Bhattacharyya 的答案及其前言,以及 Caramdir 的前两个代码块,了解这些位的操作方法。

      选项0下载解压后复制到project-name

      1. 下载源代码
      cd ~
      mkdir -p git/hub && cd git/hub
      git clone --depth 1 https://github.com/mathjax/MathJax.git
      
      1. 在你的项目中创建一个目录路径并将文件从MathJax/unpacked复制到这个路径
      cd ~
      mkdir -p git/lan/project-name/assets/JS_3rd_Party/MathJax
      cp -r git/hub/MathJax/unpacked/* git/lan/project-name/assets/JS_3rd_Party/MathJax/
      
      1. 将源添加到git跟踪
      cd git/lan/project-name/
      git add assets/JS_3rd_Party/MathJax
      git commit -m 'Added MathJax.js unpacked source to git tracking'
      
      1. 编写包含文件
      tee ./_includes/MathJax.html 1>/dev/null <<EOF
      {%- if jekyll.environment == 'production' and site.mathjax == true -%}
        <script type="text/javascript" src="{{'/assets/javascripts/JS_3rd_Party/latest.js?config=TeX-AMS-MML_HTMLorMML' | relative_url}}"></script>
      {%- elsif jekyll.environment != 'production' and site.mathjax == true -%}
        <script type="text/javascript" src="{{'/assets/javascripts/JS_3rd_Party/MathJax.js?config=TeX-AMS-MML_HTMLorMML' | relative_url}}"></script>
      {%- endif -%}
      EOF
      

      私有服务器构建将使用MathJax.js,而生产环境(GitHub)将使用latest.js,使用上面的Liquid if...elsif...endif 声明。

      1. 写一篇文章来测试一下
      tee ./_posts/$(date +'%Y-%d-%m')-math-tests.markdown 1>/dev/null <<EOF
      ---
      layout: post
      title:  "Math Tests"
      date:   $(date +'%Y-%d-%m %H:%M:%S %z')
      categories: math
      ---
      {%- include MathJax.html -%}
      
      <span>
      
      for $x,y,z \in \{1, 2,\dots 9\}$
      </span>
      
      <span>
      
      $$
      \sum_{i=1}^n X_n
      $$
      </span>
      EOF
      

      没有&lt;span&gt;s 我没有尝试过,因为cboettig 的建议似乎完全可以解决问题。 此外,spans 中的额外换行符没有错误,没有它们,渲染输出仍然存在问题。

      1. 将这些最新文件添加到git tracking
      git add _posts/$(date +'%Y-%d-')math-tests.markdown
      git add _includes/MathJax.html
      
      1. 在本地构建,或在远程服务器上推送和构建
      bundle exec jekyll build --destination /tmp/www/project-name --config _config.yml --incremental
      

      选项 1 仅复制 latest.js 以使用 CDN(内容交付网络)

      1. Option 01.

      2. 为第三方 JavaScripts 创建一个目录路径并在那里复制MathJax/unpacked/latest.js

      cd ~
      mkdir -p git/lan/project-name/assets/JS_3rd_Party/MathJax
      cp git/hub/MathJax/unpacked/latest.js git/lan/project-name/assets/JS_3rd_Party/MathJax/
      
      1. 编写包含文件
      cd git/lan/project-name
      tee ./_includes/MathJax.html 1>/dev/null <<EOF
      <script type="text/javascript" src="{{'/assets/javascripts/JS_3rd_Party/latest.js?config=TeX-AMS-MML_HTMLorMML' | relative_url}}"></script>
      EOF
      
      1. Option 05.

      2. 将这三个文件添加到git tracking

      git add _includes/MathJax.html
      git add _posts/$(date +'%Y-%d-')math-tests.markdown
      git add assets/JS_3rd_Party/MathJax
      git commit -m 'Added `MathJax.html`, `latest.js`, and a test post to git tracking'
      
      1. 本地构建参见Option 0 步骤7.

      对于任一选项

      如果部署在私有服务器上,您可能还需要在项目的 _config.yml 文件中定义 baseurl,尤其是在模拟 GitHub 在您的私有服务器上使用的 username.tld/project-name URL 方案时。

      如果同时部署到私有服务器和 GitHub,最好使用单独的配置文件,并且在构建问题 --config _config.yml,_config_baseurl.yml 时,例如...

      # Write the special config file
      tee ./_config_baseurl.yml 1>/dev/null <<EOF
      baseurl: "project-name"
      EOF
      
      # Build with extra config
      bundle exec jekyll build --destination /tmp/www/project-name --config _config.yml,_config_baseurl.yml --incremental
      

      希望有助于通过包含加载资产。

      【讨论】:

        【解决方案4】:

        如果您使用kramdown 作为降价风格,这很容易。 Kramdown 内置了对mathjax 的支持。

        1. 在默认布局中的 &lt;/head&gt; 标记之前添加它。

          <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

          • 内联,使用\( ... \)
          • 阻止,使用\[ ... \]

            唯一需要注意的是使用 Markdown 时反斜杠的转义,因此分隔符分别变为 \\( ... \\)\\[ ... \\] 用于内联和块数学。

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

        我在我的博客上使用这个。

        【讨论】:

        • 你能添加一个链接到你的博客吗?我想看看你到底是怎么设置的:)
        • @RylanSchaeffer 当然。 sohambhattacharyya.github.io
        • 我发现在当前的 Jekyll 版本中结合github-pagesmarkdown: kramdownmathjax: true 行是不必要的。此外,要使用最新的 MathJax 版本 3,布局标题中包含的 code from the official MathJax documentation 可以正常工作。
        【解决方案5】:

        如果您对发布过程有足够的控制权(例如,您自己运行 Jekyll),easy solution 会将 Markdown 解析器切换到支持 TeX 的解析器。例如,使用kramdown:

        gem install kramdown
        

        _config.yml中的markdown行改为

        markdown: kramdown
        

        并添加类似

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

        _layouts/default.html。现在你可以简单地mark any mathematics in your posts with $$

        【讨论】:

        • 对我来说,这还不够。一些方程搞砸了。例如,\begin{align} m_a(t) = \begin{cases} 0, \quad 0 t_a + \tau \end {case} \end{align}
        • 较新版本的 Jekyll 没有 _layouts 目录。在这种情况下,我们应该把&lt;script&gt;标签放在哪里?
        • 未来注意事项:cdn.mathjax.org 即将结束生命周期,请查看mathjax.org/cdn-shutting-down 了解迁移提示。
        • 在我的_layouts/default.html 文件中添加了建议的最后一行,位于第一个&lt;head&gt;something&lt;/head&gt; 块之后。正如@PeterKrautzberger 指出的那样,我将src 引用更改为src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"。它有效!
        • @IanGoodfellow 您可以通过将 _layouts 文件夹复制到您的应用程序目录来覆盖默认主题。使用命令bundle show minima 查找主题源文件的路径。并将&lt;script&gt;添加到项目目录下_layouts目录下的html文件中。
        【解决方案6】:

        不久前我写了一篇关于设置 MathJax 的博文:Latex Math Magic

        本质上,您必须阻止 Markdown 弄乱 MathJax。

        我最终使用了代码块,这对我来说很好用。因此,在你写东西之前至少使用 4 个空格或使用锐角符号:`; 不幸的是,MathJax 默认跳过&lt;code&gt; 标签,因为它不想转换不应该转换的代码。

        因此,您必须在主布局文件的某处添加一些 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;}
        

        可能不是最好的方法,但它在过去几年里对我的博客很有效,而且我再也没有遇到过任何问题。

        【讨论】:

        【解决方案7】:

        你可以试试我的静态博客生成器:Jekyde。 Jekyde 类似于 Jekyll,但它很好地处理了 Markdown 文件中的 LaTeX。您只需要将公式放入 $...$ 和 $$...$$ 中。 Jekyde 还包含一个带有 LaTeX 预览的浏览器中的降价编辑器。

        【讨论】:

          【解决方案8】:

          当然,你可以在 Jekyll 中使用 mathjax。要使其正常工作,请确保

          1. 如果您使用 markdown 编写帖子,则您的 markdown 解释器不会敲击您的 mathjax 输入。我发现保护它的最好方法是始终将显示数学放在&lt;div&gt; 元素中,将内联数学放在&lt;span&gt; 元素中,大多数降价解释器都会不理会。
          2. javascript 行是否在 html 源代码中正确显示?我发现指向 mathjax CDN 比提供我自己的副本更容易、更快捷。尝试使用该行

            &lt;script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"&gt;&lt;/script&gt;

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

          您的jsmath.js 脚​​本可能有问题; CDN 版本会更快,可能更可靠。 (我在每个页面的页脚中都加载了 javascript,但是如果您不想在不需要的时候加载 javascript,那么使用 include 的策略当然是有意义的。)

          如果您给我们一个指向您博客的链接,我们可以提供更多帮助吗?你可以看到一些例子on my blog(如果有帮助的话,也可以在 github 上找到 Jekyll setup 的链接)。

          【讨论】:

          • 谢谢 - 我会试试这个,让你知道它是怎么回事。
          • mathjax CDN 运气好吗?
          • 我才刚开始做这个(!)但效果很好 - 谢谢!
          • @cboettig 我已将您的代码放在 /_layout/post 中。但是,它似乎不起作用。你能看一下吗? tengpeng.github.com/2012/11/10/recognize-vague-words.html
          • 您的方程式在该页面上为我正确显示。也许您的浏览器为您阻止了 javascript(或者您已经解决了这个问题)。
          猜你喜欢
          • 2014-09-28
          • 2016-03-17
          • 2017-05-09
          • 2018-12-28
          • 1970-01-01
          • 1970-01-01
          • 2020-03-27
          • 2017-07-10
          • 2015-04-27
          相关资源
          最近更新 更多