Files
StrapDown.js/example11.html
Lilian Besson 958c54c55d Okay for #9 ?
2020-10-10 15:29:57 +02:00

117 lines
5.0 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>A simple demo of MathJax with ASCIIMath with StrapDown.js</title></head><body><xmp theme="united">
<ul class="pager">
<li class="previous"><a href="example2.html">← Previous example</a></li>
<li><a href="index.html">Index</a></li>
<li class="next"><a href="example4.html">Next example →</a></li>
</ul>
## This short example supports [MathJax](http://www.mathjax.org/) using [ASCIIMath](http://asciimath.org/) syntax.
See this [issue #9](https://GitHub.com/Naereen/StrapDown.js/issues/9) on the GitHub page of StrapDown.js.
### 1st try: using backticks with no escape:
Inline equations, as for instance the classic `Delta = b^2-4ac` and
`x_(1,2) = (-b pm sqrt Delta)/(2a)`, or display equations as this one :
$$ J_(alpha)(x) = sum_(m=0)^(oo) ((-1)^m)/(m! Gamma(m + alpha + 1) (x/2)^(2 m + alpha) $$
**It fails**, as backticks are first interpreted as Markdown code for inline code, and the Markdown parser of StrapDown.js converts to HTML *before* MathJax loads in and can try to convert the code to maths.
### 2nd try: using backticks with escape (it works):
Inline equations, as for instance the classic \`Delta = b^2-4ac\` and
\`x\_(1,2) = (-b pm sqrt Delta)/(2a)\`, or display equations as this one :
```AsciiMath
J\_(alpha)(x) = sum\_(m=0)^(oo) ((-1)^m)/(m! Gamma(m + alpha + 1) (x/2)^(2 m + alpha)
```
Inline equations **work** but display equations **do not work**.
### Also using dollar sign as delimiter?
Let's see: $\Delta^2 - 4ac$ or
$x\_(1,2) = (-b pm sqrt Delta)/(2a)$, or display equations as this one :
$$J\_(alpha)(x) = sum\_(m=0)^(oo) ((-1)^m)/(m! Gamma(m + alpha + 1) (x/2)^(2 m + alpha)$$
**It fails**, even though I asked in the configuration of MathJax to accept dollars...
### Another example from a classic math book
But a less classic exercise about [Hölder functions](https://en.wikipedia.org/wiki/H%C3%B6lder_condition)
(more precisely, *Exercice 7*, Chapter 4.5, page 267, of the [Gourdon, "*Les maths en tête : Analyse*", \`2^(nd)\` edition](http://www.amazon.fr/gp/product/2729837590) book).
#### Inline equation: OKAY
\`4 sum\_(n=1)^(+oo) rho\_n^2 sin^2(nh) = 1/(2pi) int\_(-pi)^(pi) | f(x+h) - f(x-h)|^2 dx.\`
How-to?
The previous equation is simply included in the Markdown code part as some basic inline AsciiMath code (with escaped backticks):
> ```markdown
\`4 sum\_(n=1)^(+oo) rho\_n^2 sin^2(nh) = 1/(2pi) int\_(-pi)^(pi) | f(x+h) - f(x-h)|^2 dx.\`
```
#### Display equation: not OKAY (yet?)
```AsciiMath
4 sum\_(n=1)^(+oo) rho\_n^2 sin^2(nh) = 1/(2pi) int\_(-pi)^(pi) | f(x+h) - f(x-h)|^2 dx.
```
How-to? (it fails)
The previous equation is simply included in the Markdown code part as some basic AsciiMath code (with three escaped backticks then AsciiMath ... then three escaped backticks):
> ```latex
\̀ \`\`AsciiMath
4 sum_(n=1)^(+oo) rho_n^2 sin^2(nh) = 1/(2pi) int_(-pi)^(pi) | f(x+h) - f(x-h)|^2 dx.
\`\`\`
```
### Last examples
From the [GitHub issue #9](https://github.com/Naereen/StrapDown.js/issues/9)
- \`@(1/2[1-(1/2)^n])/(1-(1/2))=s_n@\` (works)
- \`oint\_Cx^3 dx+4y^2 dy\` (works)
- \`2=(((3-x)xx2)/(3-x))\` (works)
- \`sum\_(m=1)^(oo) sum\_(n=1)^(oo) (m^2 n)/(3^m (m 3^n + n 3^m)\` (fails if \_ are not escaped with a backslash \\)
***
## Yes, it is as simple as adding *one line at the bottom*
You just have to load [MathJax](http://www.mathjax.org/) (as described [here](http://docs.mathjax.org/en/latest/configuration.html))
from the bottom of a *StrapDown*-flavored page, for instance from the default *CDN* :
> ```html
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=AM_CHTML"></script>
```
I also tried to add another line after, to be safe:
> ```html
<script type="text/javascript">window.MathJax = { loader: { load: ['input/asciimath'] }, asciimath: { delimiters: [['$','$'], ['`','`']] } });</script>
```
but it does not change anything, so it's not mandatory (inline AsciiMath with escaped backticks works without this line, and all the other possibilities do not work, with or without this line).
You can consult [a second example](example4.html) to see some more advanced examples of LaTeX equations rendered with MathJax.
***
## See also
+ [This page](http://perso.crans.org/besson/math.html) shows how to use MathJax on a [Sphinx](http://sphinx-doc.org/) project.
+ [This script (strapdown2pdf)](strapdown2pdf.html) to print to PDF a *StrapDown*-powered web page. It comes with a limited support of LaTeX (still not perfect).
---
<ul class="pager">
<li class="previous"><a href="example10.html">← Previous example</a></li>
<li><a href="index.html">Index</a></li>
<li class="next disabled"><a href="#">→ Next example</a></li>
</ul>
</xmp>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=AM_CHTML&amp;locale=fr"></script>
<script type="text/javascript" src="strapdown.min.js"></script>
<script type="text/javascript">window.MathJax = { loader: { load: ['input/asciimath'] }, asciimath: { delimiters: [['$','$'], ['`','`']] } });</script>
</body></html>