Comment afficher les équations mathématiques dans le démarquage général de Github (pas le blog de Github)


151

Après avoir enquêté, j'ai découvert que mathjax pouvait le faire. Mais lorsque j'écris un exemple dans mon fichier markdown, il ne montre pas les équations correctes:

J'ai ajouté ceci dans la tête du fichier markdown:

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

Et tapez l'instruction mathjax:

(E = mc ^ 2) , $$ x_ {1,2} = \ frac {-b \ pm \ sqrt {b ^ 2-4ac}} {2b}. $$

Mais github ne montre rien pour les symboles mathématiques! S'il vous plaît aidez-moi, merci! Dites-moi comment afficher les symboles mathématiques dans les pages markdown de github.


2
Cela ne résout pas le problème pour les utilisateurs généraux, mais cette réponse suggère un script de navigateur qui peut au moins vous permettre de voir les équations: stackoverflow.com/q/11255900/180892
Jeromy Anglim

gitlab utilise KaTeX
Foad

Réponses:


144

Mais github ne montre rien pour les symboles mathématiques! s'il vous plaît aidez-moi, merci!

GitHub analyse syntaxique de démarquage est effectuée par la Sundown bibliothèque (ex libUpSkirt).

La devise de la bibliothèque est « Bibliothèque de traitement de démarque en C conforme aux normes, rapide et sécurisée » . Le mot important étant «sécurisé» là-bas, compte tenu de votre question :).

En effet, autoriser l'exécution de javascript serait un peu en dehors du contrat text-to-HTML standard de MarkDown.

De plus, tout ce qui ressemble à une balise HTML est échappé ou supprimé.

Dites-moi comment afficher les symboles mathématiques dans le démarquage général de github.

Votre meilleur pari serait de trouver un site Web similaire à yuml.me qui peut générer des images à la volée à partir de l'analyse de la chaîne de requête URL fournie.

Mettre à jour

J'ai trouvé des sites offrant un tel service aux utilisateurs: codedogs.com ( ne semble plus prendre en charge l'intégration ) ou iTex2Img . Vous voudrez peut-être les essayer. Bien sûr, d'autres peuvent exister et certains Google-fu vous aideront à les trouver.

étant donné la syntaxe de démarque suivante

![equation](http://www.sciweavers.org/tex2img.php?eq=1%2Bsin%28mc%5E2%29&bc=White&fc=Black&im=jpg&fs=12&ff=arev&edit=)

il affichera l'image suivante

équation http://www.sciweavers.org/tex2img.php?eq=1%2Bsin%28mc%5E2%29&bc=White&fc=Black&im=jpg&fs=12&ff=arev&edit=

Remarque : pour que l'image s'affiche correctement, vous devez vous assurer que la partie chaîne de requête de l'URL est codée en pourcentage . Vous pouvez facilement trouver des outils en ligne pour vous aider dans cette tâche, tels que www.url-encode-decode.com


6
@nultoken, merci pour votre réponse utile. J'ai utilisé le site iTex2Img que vous avez référencé ci-dessus et j'ai ajouté deux formules à ma documentation. J'ai un problème lorsque j'ouvre la page de documentation sur GitHub, les deux formules sont affichées de la même manière alors qu'elles sont en fait différentes. Sauriez-vous pourquoi cela se produit?
Sam

3
mathurl.com est également un site Web remarquable si vous devez générer l'image.
Martin Thoma

2
Cela ne semble pas fonctionner sur github. L'image n'est pas rendue. Quelqu'un sait pourquoi?
OganM

1
@OganM La syntaxe a changé. Le lien a également été corrigé et testé dans GitHub
nulltoken

1
Le site iTex2Img ne semble pas toujours fonctionner pour moi. L'image ne semble pas s'afficher sur Github.
timbram

91

Markdown prend en charge le HTML en ligne. Le HTML en ligne peut être utilisé pour des équations en ligne simples et rapides et, avec un outil externe, pour un rendu plus complexe.

En ligne rapide et simple

Pour des éléments en ligne simples et rapides, utilisez des codes d'entité et des esperluettes HTML . Un exemple qui combine cette idée avec un texte en indice dans le démarquage est: h θ (x) = θ o x + θ 1 x, dont le code suit.

    h<sub>&theta;</sub>(x) = &theta;<sub>o</sub> x + &theta;<sub>1</sub>x

Les codes d'entité HTML pour les symboles mathématiques courants peuvent être trouvés ici . Codes pour les lettres grecques ici .

Bien que cette approche ait des limites, elle fonctionne dans pratiquement tous les démarques et ne nécessite aucune bibliothèque externe.

Rendu en ligne évolutif complexe avec LaTeX et les codecogs

Si vos besoins sont plus grands, utilisez un moteur de rendu LaTeX externe comme CodeCogs. Créez une équation avec l' éditeur CodeCogs . Choisissez svg pour le rendu et HTML pour le code d'intégration. Svg rend bien lors du redimensionnement. HTML permet à LaTeX d'être facilement lu lorsque vous regardez la source. Copiez le code d'intégration à partir du bas de la page et collez-le dans votre démarque.

<img src="https://latex.codecogs.com/svg.latex?\Large&space;x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" title="\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" />

Cela combine cette réponse et cette réponse .

La prise en charge de GitHub ne fonctionnait que parfois en utilisant la syntaxe html brute ci-dessus pour un LaTeX lisible pour moi. Si ce qui précède ne fonctionne pas pour vous, une autre option consiste à choisir à la place le rendu encodé par URL et à utiliser cette sortie pour créer manuellement un lien comme:

\ Large x = \ frac {-b \ pm \ sqrt {b ^ 2-4ac}} {2a}

![\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}](https://latex.codecogs.com/svg.latex?x%3D%5Cfrac%7B-b%5Cpm%5Csqrt%7Bb%5E2-4ac%7D%7D%7B2a%7D)

Cela incorpore manuellement LaTex dans le texte de l'image alternative et utilise une URL codée pour le rendu sur GitHub.

Rendu multiligne

Si vous avez besoin d'un rendu multiligne, consultez cette réponse .


1
cela a très bien fonctionné. J'ai dû convertir un notebook jupyter (.ipynb) en .mdet les équations étaient essentiellement du code latex multiligne.
Marc Maxmeister

12

Si vous souhaitez simplement afficher les mathématiques dans le navigateur pour vous-même, vous pouvez essayer l'extension Chrome GitHub avec MathJax . C'est assez pratique.


1
il y a une erreur avec icon16.png lorsque j'essaye d'installer
Homero Esmeraldo

11

Une autre solution consiste à utiliser des blocs-notes jupyter et à utiliser le mode markdown dans les cellules pour rendre les équations.

Les éléments de base semblent fonctionner parfaitement, comme les équations centrées

\begin{equation}
...
\end{equation}

ou équations en ligne

$ \sum_{\forall i}{x_i^{2}} $

Bien que l'une des fonctions que je voulais vraiment ne pas rendre du tout dans github était \mbox{}, ce qui était décevant. Mais dans l'ensemble, cela a été le moyen le plus efficace de rendre des équations sur github.


3
Merci pour cette réponse, mais il y a ce problème: j'ai réussi à utiliser le notebook jupyter en mode démarque et l'équation semble correcte. Cependant, maintenant, comment pouvez-vous faire pour transférer ce markdown jupyter vers le readme.mdsur GitHub?
DavidC.

1
Les équations ne sont pas rendues directement sur les fichiers Markdown. Les équations devraient à peu près être des images pour être sur le readme.md. Cependant, vous pouvez toujours simplement mettre file.ipynbgithub et github le rend bien.
hexicle

8

Nous sommes en 2020 maintenant, permettez-moi de résumer les progrès de la prise en charge du rendu des formules mathématiques des hôtes du référentiel de code source.

GitHub et Bitbucket

GitHub et Bitbucket ne prennent toujours pas en charge le rendu des formules mathématiques, qu'il s'agisse des délimiteurs par défaut ou autres.

Bitbucket Cloud / BCLOUD-11192 - Ajout de la prise en charge LaTeX dans les documents MarkDown (BB-12552)

GitHub / markup - Rendu d'équations mathématiques

GitHub / markup - Supporte le latex

Forum de la communauté GitHub - [FEATURE REQUEST] LaTeX Math in Markdown

talk.commonmark.org - La formule mathématique peut-elle être ajoutée à la démarque

GitHub n'a guère fait de progrès substantiels ces dernières années.

GitLab

GitLab est déjà pris en charge, mais ce n'est pas le moyen le plus courant. Il utilise son propre délimiteur.

This math is inline $`a^2+b^2=c^2`$.

This is on a separate line

```math
a^2+b^2=c^2
```

GitLab Flavored Markdown - Mathématiques

Qui soutient les délimiteurs universels?

Un analyseur Markdown utilisé par Hugo

Autres méthodes de rendu


6

Bien que GitHub n'interprète pas les formules MathJax, vous pouvez générer automatiquement un nouveau document Markdown avec les formules remplacées par des images.

Je vous suggère de regarder l'application GitHub TeXify :

L'application GitHub qui recherche dans vos push les fichiers avec l'extension * .tex.md et rend ses expressions TeX sous forme d'images SVG

Comment ça marche (depuis le référentiel source ):

Chaque fois que vous poussez, TeXify s'exécute et recherche les fichiers * .tex.md dans votre dernier commit. Pour chacun de ceux-ci, il exécutera readme2tex qui prendra des expressions LaTeX entre les signes dollar, le convertira en images SVG simples, puis enregistrera la sortie dans un fichier d'extension .md (cela signifie qu'un fichier nommé README.tex.md sera traité et la sortie sera enregistrée sous README.md). Après cela, le fichier de sortie et les nouvelles images SVG sont ensuite validés et renvoyés dans votre dépôt.


2

Il existe une bonne solution pour votre problème - utilisez le plugin TeXify github (mentionné par la réponse de Tom Hale - mais j'ai développé sa réponse dans le lien donné ci-dessous) - plus de détails sur ce plugin github et explication pourquoi c'est une bonne approche que vous pouvez trouver dans cette réponse .


2

J'utilise le processus mentionné ci-dessous pour convertir des équations en démarques. Cela fonctionne très bien pour moi. C'est très simple!!

Disons que je veux représenter l'équation de multiplication matricielle

Étape 1:

Obtenez le script de vos formules à partir d'ici - https://csrgxtu.github.io/2015/03/20/Writing-Mathematic-Fomulars-in-Markdown/

Mon exemple: je voulais représenter Z(i,j)=X(i,k) * Y(k, j); k=1 to ndans une formule de sommation. En référençant le site Web, le script nécessaire était =>

entrez la description de l'image ici

Z_i_j=\sum_{k=1}^{10} X_i_k * Y_k_j

Étape 2:

Utilisez un encodeur d'URL - https://www.urlencoder.org/ pour convertir le script en une URL valide

Mon exemple:

entrez la description de l'image ici

Étape 3:

Utilisez ce site Web pour générer l'image en copiant-coller la sortie de l'étape 2 dans le paramètre de requête "eq" - http://www.sciweavers.org/tex2img.php?eq=<b><i>paste-output-here</i></b>&bc=White&fc=Black&im=jpg&fs=12&ff=arev&edit=

- Mon exemple:
http://www.sciweavers.org/tex2img.php?eq=Z_i_j=\sum_{k = 1} ^ {10}% 20X_i_k% 20 *% 20Y_k_j & bc = Blanc & fc = Noir & im = jpg & fs = 12 & ff = arev & edit =

entrez la description de l'image ici

Étape 4:

Image de référence utilisant la syntaxe markdown - ![alt text](enter url here)

- Copiez ceci dans votre markdown et vous êtes prêt à partir:

![Z(i,j)=X(i,k) * Y(k, j); k=1 to n](http://www.sciweavers.org/tex2img.php?eq=Z_i_j%3D%5Csum_%7Bi%3D1%7D%5E%7B10%7D%20X_i_k%20%2A%20Y_k_j&bc=White&fc=Black&im=jpg&fs=12&ff=arev&edit=)

L'image ci-dessous est la sortie de markdown. Hourra!!


entrez la description de l'image ici


toute personne lisant ceci, « Typora » est ma nouvelle application démarquage préférée .. juste dire
Dexter

0

En ce qui concerne la conversion tex → image, l'outil LaTeXiT produit une sortie de bien meilleure qualité. Je pense que c'est standard dans la plupart des distributions TeX mais vous pouvez certainement le trouver en ligne si vous ne l'avez pas déjà. Tout ce que vous avez à faire est de le mettre dans le TeX, de faire glisser l'image sur votre bureau, puis de la faire glisser de votre bureau vers un site d'hébergement d'images (j'utilise imgur).


Il convient de noter que LaTeXiT semble ne fonctionner que sous MacOS (bien que cela ne soit pas indiqué explicitement sur le site Web).
ƒacu

0

J'ai utilisé ce qui suit dans la tête du fichier de démarque

<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js? 
config=TeX-MML-AM_CHTML"
</script>

Ensuite, j'ai tapé l'instruction mathjax suivante
$$ x_ {1,2} = \ frac {-b \ pm \ sqrt {b ^ 2-4ac}} {2b}. $$
Cela a fonctionné pour moi

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.