将MathJax与Jekyll一起使用

问题描述 投票:63回答:6

我有一个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
6个回答
47
投票

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

  1. 如果你在降价处写你的帖子,那么你的降价翻译不会扼杀你的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,那么你的包含策略当然有意义。)

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


48
投票

如果您对发布过程有足够的控制权(例如,您自己运行Jekyll),则easy solution将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。现在你可以简单地mark any mathematics in your posts with $$


7
投票

如果你使用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线之后,在markdown: kramdown将此设置为true。 mathjax: true
  3. 完成。用于重新连接Mathjax 内联,使用\( ... \), 阻止,使用\[ ... \]。 唯一要注意的是使用markdown时反斜杠的转义,因此分隔符分别成为内联和块数学的\\( ... \\)\\[ ... \\]
  4. 下面是MathJax内联渲染\\( 1/x^{2} \\)的示例,这里是一个块渲染:\\[ \frac{1}{n^{2}} \\]

我在我的博客上使用它。


5
投票

我写了一篇关于设置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;}

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


2
投票

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


0
投票

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

选项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使用上面的液体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 step 1.
  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 0 Step 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 0 Step 7.在当地建造

对于任一选项

如果在私有服务器上进行部署,您可能还需要在项目的baseurl文件中定义_config.yml,尤其是在模拟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

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

© www.soinside.com 2019 - 2024. All rights reserved.