Verwenden von MathJax mit Jekyll

Ich habe einen Jekyll-Blog und möchte MathJax damit verwenden, in dem Sinne, dass ich in der Lage sein möchte, so etwas zu tippen

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

in meinen Markdown-Dateien und lassen Sie den korrekten LaTeX-Ausdruck mit MathJax generieren, ähnlich wie bei math.stackexchange .

Was ist der einfachste Weg, dies zu tun? Derzeit habe ich die Datei jsmath.js (GitHub gist) in meinem Verzeichnis, und ich dachte, ich könnte eine einfache Datei mit der Zeile mathjsin meinem _includesVerzeichnis haben

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

und füge das in jeden Beitrag über ein

{% include mathjs %}

Dies scheint jedoch nicht zu funktionieren. Wenn ich jekyll --serverdie Seite starte, wird sie generiert, aber keiner der Inhalte ist sichtbar.

Gehe ich das richtig an? Gibt es eine bessere Möglichkeit, MathJax mit Jekyll zu verwenden?

Natürlich können Sie Mathjax mit Jekyll verwenden. Um dies zum Laufen zu bringen, stellen Sie sicher, dass

1. Wenn Sie Ihren Beitrag in Markdown schreiben, hämmert Ihr Markdown-Interpreter Ihre Mathjax-Eingabe nicht. Der beste Weg, es zu schützen, besteht darin, Anzeigemathematik immer in <div>Elemente und Inline-Mathematik einzufügen<span> Elemente zu setzen, was die meisten Markdown-Interpreter in Ruhe lassen.

2. Wird die Javascript-Zeile in der HTML-Quelle korrekt angezeigt? Ich finde es einfacher und schneller, auf das Mathjax-CDN zu verweisen, als meine eigene Kopie bereitzustellen. Versuchen Sie es mit der Leitung

   <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

(Mit diesen Konfigurationsoptionen können Sie mehr Tex-Notation verwenden, um Ihre mathematische Umgebung zu starten, z \begin{equation} usw.)

Vielleicht gibt es ein Problem mit Ihrem jsmath.js Skript vor. Die CDN-Version wird schneller und wahrscheinlich zuverlässiger sein. (Ich habe das Laden von Javascript in meiner Fußzeile auf jeder Seite, aber natürlich ist Ihre Strategie mit include sinnvoll, wenn Sie das Javascript nicht laden möchten, wenn Sie es nicht benötigen.)

Wir könnten mehr helfen, wenn Sie uns einen Link zu Ihrem Blog geben? Sie können einige Beispiele in meinem Blog sehen (hat auch einen Link zum Jekyll-Setup auf Github, wenn das hilft).

Wenn Sie eine ausreichende Kontrolle über den Veröffentlichungsprozess haben (z. B. wenn Sie Jekyll selbst ausführen), besteht eine einfache Lösung darin, den Markdown-Parser auf einen zu ändern, der TeX unterstützt. Zum Beispiel mit kramdown :

gem install kramdown

Ändern Sie die markdownZeile in _config.ymlzu

markdown: kramdown

und etwas hinzufügen wie

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

zu _layouts/default.html. Jetzt können Sie einfach jede Mathematik in Ihren Posts mit markieren$$ .

Wenn Sie kramdownals Markdown-Geschmack verwenden, ist es einfach. Kramdown hat Unterstützung für eingebaut mathjax.

1. Fügen Sie dies vor dem </head>Tag in Ihrem Standardlayout hinzu.

   <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. Setzen Sie dies _config.ymlnach der markdown: kramdownZeile auf true .

   mathjax: true
   

3. Getan. Zum Rendern von Mathjax

   • Inline, verwenden \( ... \),

   • blockieren, verwenden \[ ... \].

     Das einzige, worauf Sie achten müssen, ist das Entweichen des Backslashs bei Verwendung von Markdown, sodass die Trennzeichen zu \\( ... \\)und \\[ ... \\]für Inline- bzw. Blockmathematik werden.

4. Hier ist ein Beispiel für das Inline-Rendering von MathJax \\( 1/x^{2} \\)und hier ein Block-Rendering : \\[ \frac{1}{n^{2}} \\].

Ich benutze dies in meinem Blog.

Ich habe vor einiger Zeit einen Blog-Beitrag über das Einrichten von MathJax geschrieben: Latex Math Magic

Im Wesentlichen müssen Sie verhindern, dass der Markdown durcheinander kommt mit dem MathJax in gerät.

Am Ende habe ich Codeblöcke verwendet, was für mich gut funktioniert hat. Verwenden Sie also entweder mindestens 4 Leerzeichen, bevor Sie etwas schreiben, oder verwenden Sie das akute Symbol : `; Leider überspringt MathJax<code> standardmäßig Tags, da es keinen Code konvertieren möchte, den es nicht sollte.

Irgendwo in Ihrer Hauptlayoutdatei müssen Sie also einen kleinen Javascript-Code hinzufügen:

MathJax.Hub.Config({
  tex2jax: {
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
  }
});

Zusätzlich müssen wir MathJax anweisen, Nicht-Latex-Codeblöcke oder normale Codeblöcke zu ignorieren:

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';
    }
});

Zu diesem Zeitpunkt haben alle unsere Latex-Codeblöcke die Has-Jax-Zeichenfolge in ihrem Klassennamen. Daher können wir in unseren CSS-Blättern ein einfaches Styling anwenden, um ihr eigenes Styling zu geben.

code.has-jax {font: inherit; font-size: 100%; background: inherit; border: inherit;}

Könnte nicht der beste Ansatz sein, aber es hat in den letzten Jahren für meinen Blog funktioniert und ich bin nie auf ein weiteres Problem damit gestoßen.

Sie können meinen statischen Blog-Generator ausprobieren : Jekyde . Jekyde ähnelt Jekyll, kümmert sich aber gut um LaTeX in der Markdown-Datei. Sie müssen Ihre Formeln nur in $ ... $ und $$ ... $$ einfügen. Außerdem enthält Jekyde einen Markdown-Editor im Browser mit LaTeX-Vorschau.

Jekyll verwendet kramdown als Standard-Markdown-Konverter ab 2.0+. Und es unterstützt den Mathjax nicht und so weiter. Ich denke, das Folgende kann Ihnen helfen.

Jekyll-Raumschiff - 🚀 Ein Jekyll-Plugin zur leistungsstarken Unterstützung von Table, Mathjax, Plantuml, Youtube, Vimeo, Dailymotion usw.

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

Setzen Sie Ihren mathematischen Ausdruck in $ ... $

$\LaTeX{}$

$\Pi$

$ a * b = c ^ b $

$ 2^{\frac{n-1}{3}} $

$ \int\_a^b f(x)\,dx. $

Der obige Code würde wie folgt analysiert:

Einige Hinweise, bevor Sie eine der folgenden Optionen ausprobieren

Die Option 0erhöht die Erstellungszeiten auch mit --incrementalund die Option 1sollte wahrscheinlich in den meisten Fällen verwendet werden Fällen Dies und der zusätzliche Speicherplatz sind jedoch möglicherweise die Kosten wert, wenn Sie in einem Netzwerk mit Clients bereitstellen, die möglicherweise keinen Zugriff auf CDNs haben.

Beide Optionen wurden auf einem privaten Server mit kramdowndem Markdown-Interpreter getestet und mathjax: truein der Projektdatei festgelegt _config.yml. Siehe die Antwort von Step 2of Soham Bhattacharyya und ihr Vorwort sowie die ersten beiden Codeblöcke von Caramdir für die Anleitung für diese Bits.

Option 0herunterladen und kopieren Sie die entpackte Quelle nachproject-name

1. Laden Sie die Quelle herunter

cd ~
mkdir -p git/hub && cd git/hub
git clone --depth 1 https://github.com/mathjax/MathJax.git

2. Erstellen Sie einen Verzeichnispfad in Ihrem Projekt und kopieren Sie Dateien von MathJax/unpackedin diesen Pfad

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/

3. Fügen Sie die Quelle zum gitTracking hinzu

cd git/lan/project-name/
git add assets/JS_3rd_Party/MathJax
git commit -m 'Added MathJax.js unpacked source to git tracking'

4. Schreiben Sie eine Include-Datei

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

Private Server-Builds werden dort verwendet, MathJax.jswo als Produktionsumgebung (GitHub) latest.jsdie obige Liquid if... elsif... endif-Anweisung verwendet wird.

5. Schreiben Sie einen Beitrag, um ihn zu testen

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

Ich habe es nicht ohne <span>s versucht, weil der Vorschlag von cboettig den Trick völlig zu tun scheint . Außerdem ist diese zusätzliche neue Zeile in spans kein Fehler , ohne dass es dort immer noch Probleme mit der gerenderten Ausgabe gibt.

6. Fügen Sie diese neuesten Dateien zum gitTracking hinzu

git add _posts/$(date +'%Y-%d-')math-tests.markdown
git add _includes/MathJax.html

7. Lokal erstellen oder Push-and-Build auf einem Remote-Server

bundle exec jekyll build --destination /tmp/www/project-name --config _config.yml --incremental

Optionskopie 1nur latest.jszur Verwendung eines CDN (Content Delivery Network)

1. Siehe Option 0Schritt1.

2. Erstellen Sie einen Verzeichnispfad für JavaScripts von Drittanbietern und kopieren Sie ihn MathJax/unpacked/latest.jsdort

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/

3. Schreiben Sie eine Include-Datei

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

4. Siehe Option 0Schritt5.

5. Fügen Sie diese drei Dateien zum gitTracking hinzu

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'

6. Siehe Option 0Schritt 7.zum lokalen Erstellen

Für jede der Optionen

Bei der Bereitstellung auf einem privaten Server müssen Sie möglicherweise auch in baseurlder _config.ymlDatei Ihres Projekts definieren , insbesondere wenn Sie das username.tld/project-nameURL-Schema emulieren , das GitHub auf Ihrem privaten Server verwendet.

Bei der Bereitstellung auf einem privaten Server und auf GitHub ist es möglicherweise besser, eine separate Konfigurationsdatei zu verwenden und beim Erstellen von Problemen --config _config.yml,_config_baseurl.yml, z.

# 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

Hoffe, das hilft beim Laden von Assets über ein Include.