web-dev-qa-db-ja.com

JekyllでMathJaxを使用する

私はJekyllブログを持っていて、MathJaxを使って、次のようなものを入力できるようにしたいという意味で

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

私のマークダウンファイルで、MathJaxで生成された正しいLaTeX式を持ちます。これは math.stackexchange で行われる方法と同様です。

これを行う最も簡単な方法は何ですか？現在、ディレクトリにファイル jsmath.js （GitHub Gist）があり、mathjsという名前の単純なファイルを_includes行のあるディレクトリ

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

それを各投稿に含める

{% include mathjs %}

しかし、これは機能していないようです-実行するとjekyll --serverページは生成されますが、コンテンツは表示されません。

私はこれについて正しい方法で行っていますか？ JekyllでMathJaxを使用するより良い方法はありますか？

jekyllmathjax
65
Chris Taylor

確かに、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>

（これらの構成オプションにより、\begin{equation}などのように、より多くのtex表記を使用して数学環境を開始できます）。

おそらく、jsmath.jsスクリプトに問題がある可能性があります。 CDNバージョンはより高速で、おそらくより信頼性が高くなります。 （私はすべてのページのフッターにjavascriptをロードしていますが、もちろん、必要でないときにjavascriptをロードしたくない場合は、インクルードを使用した戦略が理にかなっています。）

あなたのブログへのリンクを提供していただければ、さらにお手伝いできますか？いくつかの例を見ることができます 私のブログで （もしそれが役立つなら、githubのJekyllセットアップへのリンクもあります）。

47
cboettig

公開プロセスを十分に制御できる場合（たとえば、自分でJekyllを実行している場合）、 簡単な解決策 は、マークダウンパーサーを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に。これで、単純に 投稿内の数学を$$でマーク にできます。

48
Caramdir

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のリネーダリング用

    • インライン、\( ... \)を使用、

    • ブロックするには、_\[ ... \]_を使用します。

      注目すべき唯一のことは、マークダウンを使用するときにバックスラッシュをエスケープすることです。そのため、区切り文字は、インライン数学とブロック数学でそれぞれ\\( ... \\)と_\\[ ... \\]_になります。

  4. これは例 MathJaxインラインレンダリング\\( 1/x^{2} \\)であり、ブロックレンダリングは_\\[ \frac{1}{n^{2}} \\]_です。

ブログでこれを使用しています。

7
Soham Bhattacharyya

しばらく前にMathJaxの設定に関するブログ記事を書きました： Latex Math Magic

本質的に、MathJaxを使用してmessingからMarkdownを停止する必要があります。

最終的にはコードブロックを使用することになりました。したがって、何かを書く前に少なくとも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;}

最良のアプローチとは言えないかもしれませんが、過去数年間私のブログで機能し、それ以上の問題に遭遇することはありませんでした。

5
cwoebker

静的なブログジェネレーター Jekyde を試してみてください。 JekydeはJekyllに似ていますが、MarkdownファイルのLaTeXをうまく処理します。数式は$ ... $と$$ ... $$に入れるだけです。また、Jekydeには、LaTeXプレビュー付きのブラウザーにマークダウンエディターが含まれています。

2
Z.H.

次のオプションのいずれかを試す前の注意事項

オプション0は、--incrementalを使用してもビルド時間を増加させ、実際にはオプション1をmostインスタンスで使用する必要がありますが、これは、ネットワークに展開する場合は余分なスペースと一緒に使用する価値がありますCDNにアクセスできない可能性のあるクライアントで。

両方のオプションは、マークダウンインタープリターとしてkramdownを使用し、プロジェクトのmathjax: trueファイル内で_config.ymlを設定して、プライベートサーバーでテストされています。 Soham Bhattacharyya の回答とその序文のステップ2を参照し、 Caramdir の最初の2つのコードブロックまでこれらのビットのハウツーについて。

オプション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 trackingに追加します
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）は上記のLiquid if...elsif...endifステートメントを使用してlatest.jsを使用します。

  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

cboettig の提案seemsがトリックを完全に行うため、<span>sなしで試したことはありません。さらに、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. これら3つのファイルを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.を参照してください

いずれかのオプション

プライベートサーバーにデプロイする場合、特にGitHubがプライベートサーバーで使用する_config.yml URLスキームをエミュレートする場合は、プロジェクトのusername.tld/project-nameファイル内でbaseurlを定義する必要もあります。

プライベートサーバーと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

インクルードを介したアセットのロードに役立つことを願っています。

0
S0AndS0