Verwenden von MathJax mit Jekyll


72

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?


2
Nur als Referenz habe ich ein kleines Tutorial über die Verwendung von MathJax mit Jekyll geschrieben. Funktioniert ziemlich gut für mich. cwoebker.com/posts/latex-math-magic
cwoebker

1
@cwoebker Du solltest es zu einer Antwort machen (einige Teile aus deinem Blog kopieren).
Piotr Migdal

1
Los geht's :) Gern geschehen. Es ist nur eine minimale Antwort als Referenz, hoffe es ist genug.
Cwoebker

1
Hier ist die einfachste Erklärung, die ich gefunden habe: christopherpoole.github.io/using-mathjax-on-github-pages
JohnRos

2
@ JohnRos, dieser Link ist tot; versuchen Sie alan97.github.io/random/mathjax - 2 Minuten lesen, 2017.
Denis

Antworten:


53

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).


Danke - ich werde das ausprobieren und dich wissen lassen, wie es geht.
Chris Taylor

Hast du Glück mit dem Mathjax CDN?
Cboettig

Ich bin gerade erst dazu gekommen (!), Aber es funktioniert großartig - danke!
Chris Taylor

@cboettig Ich habe deinen Code in / _layout / post eingegeben. Es scheint jedoch nicht zu funktionieren. Könnten Sie es sich bitte ansehen? tengpeng.github.com/2012/11/10/recognize-vague-words.html
Jill Clover

Ihre Gleichungen werden auf dieser Seite für mich korrekt angezeigt. Möglicherweise blockiert Ihr Browser das Javascript für Sie (oder Sie haben dies bereits behoben).
Cboettig

51

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$$ .


1
Für mich ist das nicht genug. Einige Gleichungen werden durcheinander gebracht. Zum Beispiel: \ begin {align} m_a (t) = \ begin {case} 0, \ quad 0 <t <t_a \\ m_a ^ 0 e ^ {- t / T_ {1b}} \ text {(gepulst)} , \ quad t_a <t <\ tau + \ Delta t \\ m_a ^ 0 e ^ {- t_a / T_ {1b}} \ text {(kontinuierlich)} \\ 0, \ quad t> t_a + \ tau \ end {Fälle} \ Ende {Ausrichtung}
Nr.

7
Neuere Versionen von Jekyll haben kein _layoutsVerzeichnis. Wo sollen wir in diesem Fall das <script>Tag platzieren?
Ian Goodfellow

2
Hinweis aus der Zukunft: cdn.mathjax.org nähert sich dem Ende seiner Lebensdauer. Weitere Tipps zur Migration finden Sie unter mathjax.org/cdn-shutting-down .
Peter Krautzberger

1
Die letzte vorgeschlagene Zeile _layouts/default.htmlwurde nach dem ersten <head>something</head>Block zu meiner Datei hinzugefügt . Wie @PeterKrautzberger betonte, habe ich den srcVerweis auf geändert src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML". Es klappt!
FaCoffee

3
@IanGoodfellow Sie können das Standarddesign überschreiben, indem Sie den Ordner _layouts in Ihr App-Verzeichnis kopieren. Suchen Sie mit dem Befehl den Pfad zu den Quelldateien des Themas bundle show minima. Und fügen Sie <script>zu den HTML-Dateien im Verzeichnis _layouts in Ihrem Projektverzeichnis hinzu.
Chittychitty

10

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.


Können Sie Ihrem Blog einen Link hinzufügen? Ich möchte sehen, wie genau Sie das eingerichtet haben :)
Rylan Schaeffer

@ RylanSchaeffer Sicher. sohambhattacharyya.github.io
Soham Bhattacharyya

1
Ich fand, dass in aktuellen Jekyll-Versionen in Kombination mit github-pagesden Zeilen markdown: kramdownund mathjax: truenicht notwendig sind. Um die neueste MathJax-Version 3 zu verwenden, funktioniert der Code aus der offiziellen MathJax-Dokumentation im Layout-Header einwandfrei.
cbrnr

6

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.


1
Ich glaube, ich habe alles getan, was Sie vorgeschlagen haben, aber es funktioniert nicht: Beispiel, das nicht funktioniert
Martin Thoma


2

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.


1

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:

Geben Sie hier die Bildbeschreibung ein


0

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
  1. 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/
  1. 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'
  1. 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.

  1. 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.

  1. Fügen Sie diese neuesten Dateien zum gitTracking hinzu
git add _posts/$(date +'%Y-%d-')math-tests.markdown
git add _includes/MathJax.html
  1. 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/
  1. 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
  1. Siehe Option 0Schritt5.

  2. 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'
  1. 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.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.