76

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

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

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

これを行う最も簡単な方法は何ですか?現在、ディレクトリにjsmath.jsmathjs (GitHub gist)ファイルがあり、_includesディレクトリに次の行の名前が付いた単純なファイルを作成できると思いました。

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

経由して各投稿にそれを含めます

{% include mathjs %}

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

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

4

8 に答える 8

53

確かに、Jekyllでmathjaxを使用できます。これを機能させるには、次のことを確認してください

  1. 投稿をマークダウンで書いている場合、マークダウンインタープリターはmathjax入力をハンマーで叩いていません。私が見つけたそれを保護するための最良の方法は、常に表示演算を<div>要素に入れ、インライン演算を要素に入れる<span>ことです。これは、ほとんどのマークダウンインタープリターがそのままにしておきます。
  2. javascriptの行がhtmlソースに正しく表示されていますか?自分のコピーを提供するよりも、mathjaxCDNを指す方が簡単で速いと思います。ラインを使ってみてください

    <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セットアップへのリンクもあります)。

于 2012-06-19T01:37:53.900 に答える
51

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

于 2013-11-20T19:31:32.713 に答える
11

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}} \\]

私は自分のブログでこれを使用しています。

于 2017-09-21T16:46:55.640 に答える
6

しばらく前に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;}

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

于 2013-06-26T09:02:48.563 に答える
2

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

于 2013-06-01T01:17:33.043 に答える
2

Jekyllは、2.0以降のデフォルトのマークダウンコンバーターとしてkramdownを使用しています。そして、それはmathjaxなどをサポートしていません、私は以下があなたを助けることができると思います。

jekyll-spaceship-テーブル、mathjax、plantuml、youtube、vimeo、dailymotionなどの強力なサポートを提供するJekyllプラグイン。

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

数式を$...$以内に入れてください

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

上記のコードは次のように解析されます。

ここに画像の説明を入力してください

于 2019-12-30T03:48:58.097 に答える
0

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

オプションを使用0するとビルド時間が長くなり--incremental、実際にはほとんどの1場合オプションを使用する必要がありますが、CDNにアクセスできないクライアントを含むネットワークにデプロイする場合は、これと余分なスペースを使用することでコストに見合う価値があります。

両方のオプションはkramdown、マークダウンインタープリターとしてのプライベートサーバーでテストされmathjax: true、プロジェクトの_config.ymlファイル内に設定されています。これらのビットのハウツーについては、Step of Soham Bhattacharyyaの回答とその序文、およびCaramdirの最初の2つのコードブロックまでを参照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ソースをトラッキングに追加します
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

cboettigの提案が完全にうまくいくよう<span>に見えるので、私はsなしでそれを試していません。さらに、s内の余分な改行は間違いありませんが、レンダリングされた出力で問題が発生する場合はありません。span

  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

CDN(コンテンツ配信ネットワーク)を使用するためのオプション1コピーlatest.js

  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これらの3つのファイルを追跡に追加します

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

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

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

于 2019-03-26T07:52:21.943 に答える
0

私の場合、これをデフォルトの_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 %}

実例

于 2021-03-24T21:59:30.533 に答える