我有一个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。为了实现这一点,请确保这一点
<div>
元素和<span>
元素中的内联数学中,大多数降价解释器将单独留下。<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设置)。
如果您对发布过程有足够的控制权(例如,您自己运行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 $$
。
如果你使用kramdown
作为降价味道,那很简单。 Kramdown内置了对mathjax
的支持。
</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>
_config.yml
线之后,在markdown: kramdown
将此设置为true。
mathjax: true
\( ... \)
,
阻止,使用\[ ... \]
。
唯一要注意的是使用markdown时反斜杠的转义,因此分隔符分别成为内联和块数学的\\( ... \\)
和\\[ ... \\]
。\\( 1/x^{2} \\)
的示例,这里是一个块渲染:\\[ \frac{1}{n^{2}} \\]
。我在我的博客上使用它。
我写了一篇关于设置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;}
可能不是最好的方法,但它在我的博客中工作了多年,我从来没有遇到任何进一步的问题。
您可以尝试我的静态博客生成器:Jekyde。 Jekyde与Jekyll类似,但它很好地处理了Markdown文件中的LaTeX。您只需要将公式放在$ ... $和$$ ... $$中。此外,Jekyde在浏览器中包含一个带有LaTeX预览的降价编辑器。
选项0
即使使用--incremental
也会增加构建时间,并且在大多数情况下可能会使用1
选项,但是,如果您在可能无法访问的客户端的网络上部署,这可能需要花费额外的空间。到CDN。
这两个选项都在私有服务器上进行了测试,kramdown
作为降价解释器,mathjax: true
在项目的_config.yml
文件中设置;请参阅Step 2
of Soham Bhattacharyya的答案及其前言,以及Caramdir的前两个代码块,了解这些位的操作方法。
0
下载并将解压缩的源复制到project-name
cd ~
mkdir -p git/hub && cd git/hub
git clone --depth 1 https://github.com/mathjax/MathJax.git
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/
git
跟踪cd git/lan/project-name/
git add assets/JS_3rd_Party/MathJax
git commit -m 'Added MathJax.js unpacked source to git tracking'
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
声明。
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的建议似乎完全可以解决问题。此外,span
s中的额外新行没有错,没有'那里仍然存在渲染输出的问题。
git
跟踪git add _posts/$(date +'%Y-%d-')math-tests.markdown
git add _includes/MathJax.html
bundle exec jekyll build --destination /tmp/www/project-name --config _config.yml --incremental
1
复制只是latest.js
使用CDN(内容传递网络)Option 0
step 1.
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/
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
Option 0
Step 5.
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'
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
希望有助于通过包含加载资产。