web-dev-qa-db-ja.com

GitHubページでラテックスをサポートするには？

Jekyllを使用して投稿を作成し、github-pagesで表示します。ソースファイルがマークダウンで書き込まれます。

数式をマークダウンファイルに挿入するにはどうすればよいですか？

式を画像に保存してマークダウンファイルに画像をロードしたくない実際にラテックス式をマークダウンファイルに直接書きたい。

jekyllgithub-pages
42
Samuel

この質問に関してオンラインリソースが変更されたため、GitHubページでLateXをサポートするための更新を以下に示します。

画像としてエクスポートせず、JekyllサイトでネイティブにサポートせずにLatexレンダリングに最も近いのは、MathJaxを使用することです。

MathJaxが実際に推奨されますin Jekyllrb docs Kramdownでの数学サポートでは、LaTeXからPNGに変換します。詳細については、 Kramdown documentation

オプション1：MathURL に方程式を記述し、埋め込みます。

MathURLを使用して方程式を記述し、方程式を永続的に指すURLを生成し、<iframe>タグで表示できます。ただし、MathURLがオフラインになると動作しなくなります。

オプション2：実装 jsMath

jsMathは、ほぼLateXのような構文を許可し、正しくセットアップされていればブログでサポートされます。 これに関する広範なドキュメント があります。

オプション3：Mathjax（私の意見では最も簡単です）

多くのサイトで、MathjaxはjsMathの後継と見なされており、Jekyllで実装する方がはるかに簡単であると述べています。 MathJaxはmathematics.stackexchange.comでも使用されています！

  • ステップ1：数学を表示したいサイトにスクリプトをロードさせます。 （通常はヘッダーで行われます）

  • オプション：_config.ymlでマークダウンパーサーを確認します。この例では、redcarpetまたはkramdownが推奨されています。 discountのような特定のパーサーは構文に干渉しますが、以下の解決策があります。

  • ステップ2：方程式を書きます。

Gaston Sanchezによるこのチュートリアルの引用：

MathJaxは、LaTeXとまったく同じ動作をしません。デフォルトでは、tex2jaxプリプロセッサはLaTeX数学区切り文字を定義します。これは、インライン数学の場合は\（... \）、表示される方程式の場合は\ [... \]です。また、表示される方程式のTeX区切り文字$$ ... $$を定義しますが、インライン数学区切り文字として$ ... $を定義しません。

詳細については、構文の documentation を参照してください。

  • 注：raw液体タグを使用して、MarkdownパーサーがMathJax構文に干渉しないようにします。
  • バックスラッシュ（たとえば、\\[ \frac{1}{n^{2}} \\]）をエスケープして、適切に解析されるようにすることもできますが、 Chistopher Pooleのチュートリアルで説明されているように 、これは必ずしも直感的ではなく、複雑に見えます。より簡単な解決策は、未加工の液体タグを使用して、Markdownプロセッサによってテキストが無視され、静的なHTMLとして直接出力されるようにすることです。これは{% raw %}および{% endraw %}でも実行されます

コードサンプルは次のとおりです。

 {% raw %}
  $$a^2 + b^2 = c^2$$ --> note that all equations between these tags will not need escaping! 
 {% endraw %}

最後に、一部のフォントサイズが小さすぎるなどの問題があるため、フォントがLateXの表示をサポートしていることも確認してください。または、ラテックスStackExchange姉妹サイトで説明されている Google ChartsやMathMLのような追加のメソッド があります。

35
matrixanomaly

GitHubページでJekyllを使用した場合は、追加できます

  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
        inlineMath: [['$','$']]
      }
    });
  </script>
  <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

ファイル_includes/head.html、GitHub PagesサイトがMathJaxをサポートします

24
PeaShooter

今すぐこれを行う最も簡単な方法は、 KaTeXauto-render extension を使用することです。 （これはプレリリースドキュメントに当てはまることに注意してください。現時点では、より包括的です！）

以下を<head>にドロップするだけです：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

これは、次の区切り文字がHTMLに表示されることを前提としていることに注意してください。

$$\LaTeX code$$   (for display)
\\[\LaTeX code\\] (also for display)
\\(\LaTeX code\\) (for inline)

Jekyllを使用する場合は、_config.ymlに次のものが必要です。

markdown: kramdown
kramdown:
    math_engine: katex

警告：math_engine: mathjaxを使用しないでください。これは、LaTeX区切り文字を自動的に削除することにより、これを破ります。

0
daviewales

現在のIMOは、MathJaxバックエンド（kramdownの一部、つまりGitHub Pagesで利用可能）を使用し、レンダリングのためにフロントエンドで KaTeX を使用することです。 KaTeXはMathJaxよりも軽量で高速であるため、ブログのテーマにより適しています。

私はこのテクニックを使って、ジキルのテーマに大成功を収めています Hydejack 。以下を実行して、自分のサイトで自由に使用してください。

config.yml、数学エンジンをmathjaxに設定します。

kramdown:
  math_engine: mathjax

KaTeXをサイトに追加し、次のコードがロードされてから実行されることを確認してください。

const mathBlocks = document.querySelectorAll('script[type^="math/tex"]');
Array.from(mathBlocks).forEach((el) => {
  const tex = el.textContent.replace("% <![CDATA[", "").replace("%]]>", "");
  el.outerHTML = window.katex.renderToString(tex, {
    displayMode: el.type === "math/tex; mode=display",
  });
});

私が使用している実際のコードは少し複雑です。 GitHubで確認してください 。

0
qwtel