diff --git a/example1.html b/example1.html new file mode 100644 index 0000000..511e94f --- /dev/null +++ b/example1.html @@ -0,0 +1,21 @@ +« My first test with StrapDown.js » +# This is a Markdown document +You can now write your web page in Markdown. + +You opened a `textarea` tag, but a `xmp` tag works as well. + +And, yes, it is **as simple** as **one** HTML line at the beginning and **one** HTML line at the end of this document. + +# This second example supports UTF-8 input +Yes, that's cool. +Did you know that [Næreen](http://gravatar.com/naereen) is originally an iranian name ? + +--- + +<ul class="pager"> +<li class="previous"><a href="example0.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next"><a href="example2.html">Next example →</a></li> +</ul> + + diff --git a/example1.pdf b/example1.pdf new file mode 100644 index 0000000..1cf20b8 Binary files /dev/null and b/example1.pdf differ diff --git a/example2.html b/example2.html new file mode 100644 index 0000000..d659fb5 --- /dev/null +++ b/example2.html @@ -0,0 +1,60 @@ +Awesome second example with StrapDown.js +<ul class="pager"> +<li class="previous"><a href="example1.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next"><a href="example3.html">Next example →</a></li> +</ul> + +# This is a Markdown document + +You can now write your web page in Markdown. +You opened a `textarea` tag, but a `xmp` tag works as well. +And, yes, it is **as simple** as **one** HTML line at the beginning and **one** HTML line at the end of this document. + +## What to say more +Feel free to use it, redistribute it etc, *under the condition of the GPLv3 License*. + +## Only for textual, simple documents +StrapDown.js is *awesome* to quickly build nice-looking web pages, +but it might not be efficient for anything more complicated, as it is really not designed for it. + +## Add a picture ? +With Markdown syntax, it's easy : ![GA|Analytics](https://ga-beacon.appspot.com/UA-38514290-14/example2.html "Thanks to ga-beacon"). + +### An other one ? +Alright, here comes the mighty Cthulhu ![Logo Squirt](../squirt/images/logo.png "Logo Cthulhu") + +### A last one, because it's dangerous to go alone : + +![Logo Take this from dotcore](../squirt/images/takethis.jpg "Logo «Take this» from dotcore") + +## Add anything you want, it *might* work +For instance, you can add use Google Analytics to monitor the page's activity, +with including a piece of Javascript code, before *or* after closing the *textarea* tag. + +<script type="text/javascript"> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create','UA-38514290-14','lbesson.bitbucket.org'); ga('send','pageview'); +</script> +<noscript> + The previous parapraph was supposed to include Google Analytics web monitoring tool, + but hey, you are browsing without JavaScript enabled, what can I do for it ? <br/> + Maybe you are using a text-only browser (w3m, links, elinks ? I love elinks !), + or a 19th-century IE, or maybe you disabled JavaScript globally (which is kinda stupid) or site-by-site (with NoScript, as I do, which is brilliant, and safer). +</noscript> + +## That's it +This was a brief overview, to show the basic use of [StrapDown.js](index.html). + +--- + +<ul class="pager"> +<li class="previous"><a href="example1.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next"><a href="example3.html">Next example →</a></li> +</ul> + + diff --git a/example2.pdf b/example2.pdf new file mode 100644 index 0000000..d3d56ac Binary files /dev/null and b/example2.pdf differ diff --git a/example3.html b/example3.html new file mode 100644 index 0000000..a2ec33c --- /dev/null +++ b/example3.html @@ -0,0 +1,101 @@ +A simple demo of MathJax with StrapDown.js +<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/) + +<p style="font-size:x-large;"> +Inline equations, as for instance the classic $\Delta = b^2-4ac$ and +$x\_{1,2} = \frac{-b\pm\sqrt{\Delta}}{2a}$, or display equations as this one : + $$ J\_\alpha(x) = \sum\limits\_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha} $$ +</p> + +## From a classic math book +But a less classic exercise about [holderian 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^\text{nd}$ edition](http://www.amazon.fr/gp/product/2729837590) book). + +<p style="font-size:x-large;"> +$$ 4 \sum\_{n=1}^{+\infty} \rho\_n^2 \sin^2 nh = \frac{1}{2\pi} \int\_{-\pi}^{\pi}\lvert f(x+h) - f(x-h)\rvert^2 dx. $$ +</p> + +## How-to ? +The previous equation is simply included in the Markdown code part as basic some $\LaTeX2e{}$ code : + +> ```latex +$$ 4 \sum\_{n=1}^{+\infty} \rho\_n^2 \sin^2 nh = \frac{1}{2\pi} \int\_{-\pi}^{\pi}|f(x+h) - f(x-h)|^2 dx. $$ +``` + +*** + +## 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="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> +``` + +You can consult [a second example](example4.html) to see some more advanced examples of LaTeX equations rendered with MathJax. + +### A better solution? +From version 0.5, you can import MathJax in an even *quicker* way: you just have to add ``&mathjax=yes`` to the URL used to import [strapdown.min.js](index.html). +See [the first paragraph of this third example](example5.html) to see this. + +*** + +# Warning +Be aware of the following limitations : + +## Escape the underscore ('``_``') +The [StrapDown.js](//lbesson.bitbucket.org/md/index.html) text processor interprets +underscores (the '``_``' symbol) as underline markup (like _this_), +so be sure to escape the '``_``' in the $\LaTeX2e{}$ code. + +A *bad looking* example could be ``$\mathcal{M}_{n,m}(\mathbb{F_9})$`` +(which is **badly displayed** as $\mathcal{M}_{n,m}(\mathbb{F_9})$). _Ugly_ right ? + +Escape the '``_``' in the previous code to get ``$\mathcal{M}\_{n,m}(\mathbb{F\_9})$`` : +now it is **nicely displayed** as $\mathcal{M}\_{n,m}(\mathbb{F\_9})$. + +## Escape some others Markdown markup code ('``*``', '``**``' or '``#``') +The previous limitation is also true for other symbols, used for *Markdown as markup* and for *LaTeX as symbols*. + +An example could be ``$[ u^*; v^*](x)$`` (which is badly displayed as $[ u^*; v^*](x)$), +which becomes ``$\[ u^\*; v^\*\]\(x\)$`` (now it is nicely displayed as $\[ u^\*; v^\*\]\(x\)$). + +A pretty good rule of thumb can be to **escape every Markdown markup symbols** in LaTeX code. +Feel free to refresh your mind about which symbols are used as elements of the Markdown syntax +with [this page](http://daringfireball.net/projects/markdown/syntax#list), +or [this one on Wikipedia](https://en.wikipedia.org/wiki/Markdown). + +## Escape the antislash ('``\``') +The antislash symbol, already escaped by an antislash ('``\``') +is used in LaTeX to force a new line. It is usually used in aligned equations, +as shown in the Lorenz Equations [here](example4.html). + +You should also escape the antislash, by typing ``\\`` where you would have +used a simple ``\`` in LaTeX. + +*** + +## See also + + [This page](http://besson.qc.to/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="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> + + + + + + diff --git a/example3.pdf b/example3.pdf new file mode 100644 index 0000000..41b29e2 Binary files /dev/null and b/example3.pdf differ