将MathJax与Jekyll结合使用

72

我有一个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结合使用？

jekyll  mathjax 
— 克里斯·泰勒
source
2
仅供参考，我编写了一个关于将MathJax与Jekyll结合使用的小教程。对我来说效果很好。cwoebker.com/posts/latex-math-magic
— cwoebker 2012年
1
@cwoebker您应该将其作为答案（从博客中复制某些部分）。
— Piotr Migdal
1
你去那里：）不客气。它只是一个最低限度的参考答案，希望它足够。
— cwoebker 2013年
1
这是我找到的最简单的解释：christopherpoole.github.io/using-mathjax-on-github-pages
— JohnRos 2015年
2
@JohnRos，该链接已死；尝试alan97.github.io/random/mathjax-2分钟阅读，2017
— denis

Answers:

53

当然，您可以将Mathjax与Jekyll一起使用。要使此工作正常进行，请确保

  1. 如果您使用markdown编写帖子，那么markdown解释器不会影响您的mathjax输入。我发现最好的保护方法是始终将显示数学放在<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，那么您当然可以使用include的策略。）

如果您给我们链接到您的博客，我们可以提供更多帮助？您可以在我的博客上看到一些示例（如果有帮助的话，也可以链接到github上的Jekyll设置）。

— cboettig
source
谢谢-我将尝试一下，让您知道如何进行。
— 克里斯·泰勒
Mathjax CDN有运气吗？
— cboettig 2012年
我只是到处做这个（！），但效果很好-谢谢！
— 克里斯·泰勒
@cboettig我已经将您的代码放在/ _layout / post中。但是，似乎不起作用。你能看看吗？tengpeng.github.com/2012/11/10/recognize-vague-words.html
— 吉尔·
您的方程式在该页面上为我正确显示。也许您的浏览器正在为您阻止JavaScript（或者您已经解决了该问题）。
— cboettig 2012年
51

如果您对发布过程有足够的控制权（例如，您自己在运行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。现在，您可以使用标记所有数学信息$$。

— 卡拉姆迪尔
source
1
对我来说，这还不够。一些方程式混乱了。例如，\ begin {align} m_a（t）= \ begin {cases} 0，\ quad 0 <t <t_a \\ m_a ^ 0 e ^ {-t / T_ {1b}} \ text {（pulsed）} ，\ quad t_a <t <\ tau + \ Delta t \\ m_a ^ 0 e ^ {-t_a / T_ {1b}} \ text {（continuous）} \\ 0，\ quad t> t_a + \ tau \ end {箱子} \ {端对齐}
— 号
7
较新版本的Jekyll没有_layouts目录。在这种情况下，我们应该将<script>标签放在哪里？
— 伊恩·古德费洛
2
未来的注意事项：cdn.mathjax.org即将到期，请查看mathjax.org/cdn-shutting-down以获取迁移提示。
— Peter Krautzberger '17
1
_layouts/default.html在第一个程序<head>something</head>段之后，将建议的最后一行添加到我的文件中。正如@PeterKrautzberger指出的那样，我将src引用更改为src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"。有用！
— FaCoffee '17
3
@IanGoodfellow，您可以通过将_layouts文件夹复制到应用程序目录中来覆盖默认主题。使用命令查找主题源文件的路径bundle show minima。并添加<script>到项目目录中_layouts目录中的html文件中。
— chittychitty
10

如果您将其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}} \\]。

我在我的博客上使用它。

— 苏厄姆·巴塔查里亚（Soham Bhattacharyya）
source
您可以将链接添加到博客吗？我想看看您是如何设置的：)
— Rylan Schaeffer
@RylanSchaeffer当然。sohambhattacharyya.github.io
— Soham Bhattacharyya
1
我发现在当前的Jekyll版本中github-pages，与markdown: kramdown和mathjax: true并不需要。此外，要使用最新的MathJax版本3，布局标头中包含的来自官方MathJax文档的代码也可以正常工作。
— cbrnr
6

不久前，我写了一篇有关设置MathJax的博客文章：Latex Math Magic

从本质上说，你必须从停止降价搞乱与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;}

可能不是最好的方法，但过去几年它一直在我的博客上工作，我再也没有遇到任何问题。

— 乔布克
source
1
我认为我已按照您的建议进行了所有操作，但未成功：无效的示例
— Martin Thoma 2013年
— Martin Thoma 2013年
2

您可以尝试使用我的静态博客生成器：Jekyde。Jekyde与Jekyll类似，但是它可以很好地处理Markdown文件中的LaTeX。您只需要将公式放入$ ... $和$$ ... $$。Jekyde还在带有LaTeX预览的浏览器中包含markdown编辑器。

— ZH
source
1

Jekyll使用kramdown作为2.0+起的默认降价转换器。而且它不支持mathjax等，我认为以下内容可以为您提供帮助。

jekyll-spaceship-Je一个Jekyll插件，为表格，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. $

上面的代码将解析为：

在此处输入图片说明

— 日本电信
source
0

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

选项 0即使使用也会增加构建时间--incremental，实际上1应该在大多数情况下使用Option ，但是，如果您在具有无法访问CDN的客户端的网络上进行部署，那么此选项以及占用的额外空间可能值得花费。

这两个选项都已在带有kramdownmarkdown解释器的专用服务器上进行了测试，并mathjax: true在项目_config.yml文件中进行了设置；看到2Soham 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

私有服务器构建将使用上述LiquidMathJax.js作为生产环境（GitHub）latest.js使用的地方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

我没有尝试过<span>s，因为cboettig的建议似乎完全可以解决问题。此外，spans中多余的换行符是没有错的，没有它们，渲染输出仍然存在问题。

  1. 将这些最新文件添加到git跟踪
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 0步骤1.

  2. 让第三方JavaScript的目录路径和复制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 0步骤5.

  2. 将这三个文件添加到git跟踪中

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 07.本地构建步骤

对于任何一个选项

如果部署在专用服务器上，则可能还需要定义 baseurl在项目的_config.yml文件中，尤其是模拟username.tld/project-nameGitHub在私有服务器上使用的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

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

— S0和S0
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.