diff --git a/example4.html b/example4.html new file mode 100644 index 0000000..6d375a4 --- /dev/null +++ b/example4.html @@ -0,0 +1,115 @@ +A second demo of MathJax with StrapDown.js +<ul class="pager"> +<li class="previous"><a href="example3.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next"><a href="example5.html">Next example →</a></li> +</ul> + +# A second example with [MathJax](http://www.mathjax.org/) activacted (and the *paper* theme) +> To know how to include MathJax in a *StrapDown*-flavored HTML page, you can read this [example 3](example3.html). +To discover an even nicer way to import MathJax, read [the last example](example5.html). + +> These examples are directly imported from [the samples from the mathjax.org website](http://www.mathjax.org/demos/tex-samples/). + +> The following equations are included in the HTML source code as **pure LaTeX code**. + +*** + +### The [Lorenz Equations](https://en.wikipedia.org/wiki/Lorenz_system#Overview) +### $$\left\\\{\begin{aligned} \dot{x} & = \sigma(y-x) \\\\ \dot{y} & = \rho x - y - xz \\\\ \dot{z} & = -\beta z + xy \end{aligned}\right. $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page (*ie.* after the opening ``xmp`` tag and before its closing): +```latex +$$\left\\\{\begin{aligned} +\dot{x} & = \sigma(y-x) \\\\ +\dot{y} & = \rho x - y - xz \\\\ +\dot{z} & = -\beta z + xy +\end{aligned}\right. $$ +``` + +### The [Cauchy-Schwarz Inequality](https://en.wikipedia.org/wiki/Cauchy%E2%80%93Schwarz_inequality#Rn) (in $\mathbb{R}^n$) +### $$ \left( \sum\_{k=1}^n a\_k b\_k \right)^2 \leq \left( \sum\_{k=1}^n a\_k^2 \right) \left( \sum\_{k=1}^n b\_k^2 \right) $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$ \left( \sum\_{k=1}^n a\_k b\_k \right)^2 \leq \left( \sum\_{k=1}^n a\_k^2 \right) \left( \sum\_{k=1}^n b\_k^2 \right) $$ +``` + +### A [Cross Product](https://en.wikipedia.org/wiki/Cross_product#Coordinate_notation) Formula +### $$\mathbf{V}\_1 \times \mathbf{V}\_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$\mathbf{V}\_1 \times \mathbf{V}\_2 = \begin{vmatrix} +\mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ +\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ +\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 +\end{vmatrix} $$ +``` + +### The probability of [getting $k$ heads when flipping $n$ coins](https://en.wikipedia.org/wiki/Bernoulli_process#Binomial_distribution) is +### $$P(E) = {n \choose k} p^k (1-p)^{n-k} $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$P(E) = {n \choose k} p^k (1-p)^{n-k} $$ +``` + +### An Identity of Ramanujan (obviously) +### $$ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = +1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} +{1+\frac{e^{-8\pi}} {1+\ldots} } } } $$ +``` + +### A [Rogers-Ramanujan Identity](https://en.wikipedia.org/wiki/Rogers%E2%80%93Ramanujan_identities) +### $$ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod\_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for $|q|&lt;1$}. $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = +\prod\_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, +\quad\quad \text{for $|q|&lt;1$}. $$ +``` + +### [Maxwell's Equations](https://en.wikipedia.org/wiki/Maxwell%27s_equations) +### $$ \left\\\{\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}\right. $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$ \left\\\{\begin{aligned} + \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ + \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ + \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ + \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}\right. +$$ +``` + +As you can see, math environment (like ``aligned``) are supported by MathJax, even with the default configuration and no external plugins. + +**** + +### Inline equations are also supported. +Finally, while **display equations** look good for a page of samples, the ability to mix math and text in a paragraph is also important. +This expression $\sqrt{3x-1}+(1+x)^2$ is an example of an **inline equation** (inserted with the code ``$\sqrt{3x-1}+(1+x)^2$``). +As you see, MathJax equations can be used this way as well, without unduly disturbing the spacing between lines. + +### End of the examples +That's all for today! + +--- + +<ul class="pager"> +<li class="previous"><a href="example3.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next"><a href="example5.html">Next example →</a></li> +</ul> + + + + + + diff --git a/example4.pdf b/example4.pdf new file mode 100644 index 0000000..6e2aab9 Binary files /dev/null and b/example4.pdf differ diff --git a/example5.html b/example5.html new file mode 100644 index 0000000..fa335c5 --- /dev/null +++ b/example5.html @@ -0,0 +1,120 @@ +A second demo of MathJax with StrapDown.js +<ul class="pager"> +<li class="previous"><a href="example4.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next"><a href="example6.html">Next example →</a></li> +</ul> + +# A third example with [MathJax](http://www.mathjax.org/) activacted +> This *StrapDown*-flavored HTML page comes with MathJax enabled, simply because **we asked the script to do so**. + +The last line of this page source (you can read it with "Ctrl+u" in Firefox) imports the script ``strapdown.min.js`` with this URL : ``"strapdown.min.js?src=example5&mathjax=y&theme=united&beacon=y"``. + +This way, some options are avaible: + +1. ``mathjax=y`` if you want to load MathJax, with ``$`` being the default separator for inline maths and ``$$`` for display, +2. ``theme=united`` or ``theme=united`` if you want to load a specific theme (without having to specify it as the theme attribute of the main ``xmp``), +3. ``beacon=y`` if you want to include an invisible [GA Beacon](http://besson.qc.to/beacon.en.html) image in your page. + +*** + +> These examples are the same as [the previous example](example4.html) directly imported from [the samples from the mathjax.org website](http://www.mathjax.org/demos/tex-samples/). + +> The following equations are included in the HTML source code as pure LaTeX code. + +*** + +### The [Lorenz Equations](https://en.wikipedia.org/wiki/Lorenz_system#Overview) +### $$\left\\\{\begin{aligned} \dot{x} & = \sigma(y-x) \\\\ \dot{y} & = \rho x - y - xz \\\\ \dot{z} & = -\beta z + xy \end{aligned}\right. $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page (*ie.* after the opening ``xmp`` tag and before its closing): +```latex +$$\left\\\{\begin{aligned} +\dot{x} & = \sigma(y-x) \\\\ +\dot{y} & = \rho x - y - xz \\\\ +\dot{z} & = -\beta z + xy +\end{aligned}\right. $$ +``` + +### The [Cauchy-Schwarz Inequality](https://en.wikipedia.org/wiki/Cauchy%E2%80%93Schwarz_inequality#Rn) (in $\mathbb{R}^n$) +### $$ \left( \sum\_{k=1}^n a\_k b\_k \right)^2 \leq \left( \sum\_{k=1}^n a\_k^2 \right) \left( \sum\_{k=1}^n b\_k^2 \right) $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$ \left( \sum\_{k=1}^n a\_k b\_k \right)^2 \leq \left( \sum\_{k=1}^n a\_k^2 \right) \left( \sum\_{k=1}^n b\_k^2 \right) $$ +``` + +### A [Cross Product](https://en.wikipedia.org/wiki/Cross_product#Coordinate_notation) Formula +### $$\mathbf{V}\_1 \times \mathbf{V}\_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$\mathbf{V}\_1 \times \mathbf{V}\_2 = \begin{vmatrix} +\mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ +\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ +\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 +\end{vmatrix} $$ +``` + +### The probability of [getting $k$ heads when flipping $n$ coins](https://en.wikipedia.org/wiki/Bernoulli_process#Binomial_distribution) is +### $$P(E) = {n \choose k} p^k (1-p)^{n-k} $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$P(E) = {n \choose k} p^k (1-p)^{n-k} $$ +``` + +### An Identity of Ramanujan (obviously) +### $$ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = +1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} +{1+\frac{e^{-8\pi}} {1+\ldots} } } } $$ +``` + +### A [Rogers-Ramanujan Identity](https://en.wikipedia.org/wiki/Rogers%E2%80%93Ramanujan_identities) +### $$ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod\_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for $|q|&lt;1$}. $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = +\prod\_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, +\quad\quad \text{for $|q|&lt;1$}. $$ +``` + +### [Maxwell's Equations](https://en.wikipedia.org/wiki/Maxwell%27s_equations) +### $$ \left\\\{\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}\right. $$ + +> The previous equation corresponds to the following code, inserted *verbatim* in the Markdown part of this page: +```latex +$$ \left\\\{\begin{aligned} + \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ + \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ + \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ + \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}\right. +$$ +``` + +As you can see, math environment (like ``aligned``) are supported by MathJax, even with the default configuration and no external plugins. + +**** + +### Inline equations are also supported. +Finally, while **display equations** look good for a page of samples, the ability to mix math and text in a paragraph is also important. +This expression $\sqrt{3x-1}+(1+x)^2$ is an example of an **inline equation** (inserted with the code ``$\sqrt{3x-1}+(1+x)^2$``). +As you see, MathJax equations can be used this way as well, without unduly disturbing the spacing between lines. + +### End of the examples +That's all for today! + +--- + +<ul class="pager"> +<li class="previous"><a href="example4.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next"><a href="example6.html">Next example →</a></li> +</ul> + + diff --git a/example5.pdf b/example5.pdf new file mode 100644 index 0000000..12bdd92 Binary files /dev/null and b/example5.pdf differ diff --git a/example6.html b/example6.html new file mode 100644 index 0000000..71acc41 --- /dev/null +++ b/example6.html @@ -0,0 +1,147 @@ +StrapDown.js supports Markdown tables too! +<ul class="pager"> +<li class="previous"><a href="example5.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next"><a href="example7.html">Next example →</a></li> +</ul> + +# Examples of HTML *tables* written in Markdown +> This *StrapDown*-flavored HTML page is a demo of *how to write a table with Markdown*, and how a table will be (nicely) rendered by StrapDown.js. + +> ### (Why this demo?) +> Someone asked me (01-2015) about that feature, so, *here is the demo!* + +--- + +### How to enable the *tables* rendering? +In order for StrapDown.js to be able to read and render HTML **tables** (the [`<table>`]() tag), +**no need to ask any special option** (as opposed to [the MathJax feature allowing you to embed LaTeX equations](example5.html)). + + +#### Some help? (about the `<table>` HTML tag) +> More documentation about that `<table>` tag can be found on these sites: [www.htmlquick.com/reference/tags/table.html](http://www.htmlquick.com/reference/tags/table.html), [www.html.am/tags/html-table-tag.cfm](http://www.html.am/tags/html-table-tag.cfm), [www.w3ctutorial.com/html5-tags/tag-table](http://www.w3ctutorial.com/html5-tags/tag-table), and the famous [w3schools.com/html/html_tables.asp](http://w3schools.com/html/html_tables.asp) or [w3schools.com/tags/tag_table.asp](http://w3schools.com/tags/tag_table.asp). + +--- + +## How to write a Markdown table ? +> More details about the syntax for Markdown tables can be found on the **GitHub Flavored Markdown** document : [help.github.com/articles/github-flavored-markdown/#tables](https://help.github.com/articles/github-flavored-markdown/#tables). + +### First example +The basic syntax to have in mind is the following : + +First Header | Second Header +------------- | ------------- +Content Cell | Content Cell +Content Cell | Content Cell + +> The previous table corresponds to the following *Markdown* code: +> +> First Header | Second Header +> ------------- | ------------- +> Content Cell | Content Cell +> Content Cell | Content Cell + + +### Second example +> I follow the examples from [GitHub's help page about tables in Markdown](https://help.github.com/articles/github-flavored-markdown/#tables). + +| Name | Description | +| ------------- | ----------- | +| Help | Display the help window.| +| Close | Closes a window | + +> The previous table corresponds to the following *Markdown* code: +> +> | Name | Description | +> | ------------- | ----------- | +> | Help | Display the help window.| +> | Close | Closes a window | + + +### Third example +> That example is also **extremely satisfying**, because StrapDown.js *does* support the alignment custom syntax (from [GFM](https://help.github.com/articles/github-flavored-markdown/#tables)): + +| Left-Aligned | Center Aligned | Right Aligned | +| :------------ |:---------------:| -----:| +| col 3 is | some wordy text | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | + +> The previous table corresponds to the following *Markdown* code: +> +> | Left-Aligned | Center Aligned | Right Aligned | +> | :------------ |:---------------:| -----:| +> | col 3 is | some wordy text | $1600 | +> | col 2 is | centered | $12 | +> | zebra stripes | are neat | $1 | + +#### Hoho, a small trap: +> At first, I thought that this feature was not available, but it was my fault, as I use an old version of the [united](http://bootswatch.com/united) BootStrap theme. +> +> Hence I modified one line, which was forcing the table content to be left-aligned, and removed the `text-align:left` element: +> ```css +> .table th,.table td { [.. stuff]; text-align:left; } -----> .table th,.table td { [.. stuff]; } +> ``` +> Now, this [has been fixed](https://bitbucket.org/lbesson/lbesson.bitbucket.org/commits/fba4d321b4445e2e2ed7e8762a4a89cf8a673238) (the 22-01-2015). + +--- + +--- + +## A partial list of the [Justice League of America](https://en.wikipedia.org/wiki/Justice_League) +[StrapDown.js](http://lbesson.bitbucket.org/md/index.html) supports *really well* these Markdown tables, and the [GFM extension](https://help.github.com/articles/github-flavored-markdown) for alignment. + +Here is a last example, displaying some *super heroes* ^^: + + +| Number | Name | Secret Name! | Super Hero Group | Gender | Email Address | Photo | +| :----- |:----:|:------------:|:----------------:|:------:|:-------------:| -----:| +| 01 | **Superman** | *Clark Kent* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Male | [superman@heroes.jloa.gov](mailto:superman@heroes.jloa.gov) | ![Picture for hero #01](https://randomuser.me/api/portraits/med/men/72.jpg "Picture for super-hero #01")| +| 02 | **Batman** | *Bruce Wayne* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Male | [batman@heroes.jloa.gov](mailto:batman@heroes.jloa.gov) | ![Picture for hero #02](https://randomuser.me/api/portraits/med/men/45.jpg "Picture for super-hero #02")| +| 03 | **Green Lantern** | *Secret!* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Male | [Green.Lantern@heroes.jloa.gov](mailto:Green.Lantern@heroes.jloa.gov) | ![Picture for hero #03](https://randomuser.me/api/portraits/med/men/51.jpg "Picture for super-hero #03")| +| 04 | **Wonder Woman** | *Secret!* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Female | [Wonder.Woman@heroes.jloa.gov](mailto:Wonder.Woman@heroes.jloa.gov) | ![Picture for hero #04](https://randomuser.me/api/portraits/med/women/25.jpg "Picture for super-hero #04")| +| 05 | **AwkGirl** | *Too lazy to look for it* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Female | [AwkGirl@heroes.jloa.gov](mailto:AwkGirl@heroes.jloa.gov) | ![Picture for hero #05](https://randomuser.me/api/portraits/med/women/88.jpg "Picture for super-hero #05")| + + +> *Hint:* these emails addresses are really secret, keep they from yourself, and especially from super villains! (Seriously: **they are fake!**) + +> Thanks to the *awesome* [RandomUser.me](https://randomuser.me/) for providing **fake** profile pictures for our super-heroes! + +--- + +## A personnal example +And if you may, I will conclude these examples with a more personal one: + +| *Scholar* Year | My age <br>(when started/when finishing) | Scholar level | City, *Country* | +| :----------- | :----: | :-----------: | --: | +| 2014 ~ 2015 | 21 → 22 | [Assistant professor](http://web.archive.org/web/20141103063707/http://www.mahindraecolecentrale.edu.in/faculties.html), Maths and CS | Hyderabad, *India* | +| 2013 ~ 2014 | 20 → 21 | 2nd Year M.Sc. (Maths, CS)<br> and <a href="http://web.archive.org/web/20140709144720/agreg.org/ResultatsMerite2014.html" title="Over ~1300 candidates!">ranked 23rd</a> at the <a title="French national competitive exam for prep' schools teachers" href="https://en.wikipedia.org/wiki/Agr%C3%A9gation">French Agrégation</a> | Cachan (Paris), *France* | +| 2012 ~ 2013 | 19 → 20 | 1st Year M.Sc. (Maths, CS) | Cachan (Paris), *France* | +| 2011 ~ 2012 | 18 → 19 | 3rd Year B.Sc. (Maths, CS) | Cachan (Paris), *France* | +| 2010 ~ 2012 | 17 → 18 | 2nd Year B.Sc. (Maths and Physics) | Marseille, *France* | +| 2009 ~ 2010 | 16 → 17 | 1st Year B.Sc. (*MPSI*) | Marseille, *France* | +| 2008 ~ 2009 | 15 → 16 | Scientific <abbr title="French highschool degree">*"Baccalauréat"*</abbr> | Briançon, *France* | + + +> ... Yeah, I am kinda proud of my academic education and [my curriculum](http://lbesson.tk) ([also here](http://besson.qc.to/cv.en.pdf) or [here](http://perso.crans.org/besson/cv.en.pdf)). + +--- + +## One more example: how to easily add a search input button for a table? +→ [Go read the next example please](example7.html) to know more about that. +It's pretty easy, and works extremely well :) ! + +--- + +### End of the examples +That's all for today! [Go back to StrapDown.js main page](index.html)? + +--- + +<ul class="pager"> +<li class="previous"><a href="example5.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next"><a href="example7.html">Next example →</a></li> +</ul> + + diff --git a/example7.html b/example7.html new file mode 100644 index 0000000..750d67b --- /dev/null +++ b/example7.html @@ -0,0 +1,111 @@ +Searching on a Markdown table? +<ul class="pager"> +<li class="previous"><a href="example6.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next disabled"><a href="#">(Last example)</a></li> +</ul> + +# Example of how to search on a *HTML-table* written in Markdown +> [This previous example](example6.html) is a *StrapDown*-flavored HTML page is a demo of *how to write a table with Markdown*, and how a table will be (nicely) rendered by StrapDown.js. + +#### Some help? (about that searching feature) +> The code I used is a [**jQuery**](https://www.jquery.com/) *plug-in*, called [QuickSearch](http://deuxhuithuit.github.io/quicksearch/). More detail can be found on [its documentation](http://deuxhuithuit.github.io/quicksearch/). + +--- + +## Searching on a Markdown table? +> More details about the syntax for Markdown tables can be found on the **GitHub Flavored Markdown** document : [help.github.com/articles/github-flavored-markdown/#tables](https://help.github.com/articles/github-flavored-markdown/#tables). + +The goal of this demo is to show how easy (and pretty) it is to add a search feature to any table, written in Markdown (or HTML). + +That search feature is working **incredibly well**, on the box below, if you start typing "Su", it's already enough to select only the **Superman** line! + +--- + +<div class="pull-right"> +<h3>Search on that table?</h3> +<p>Thanks to the <a href="http://deuxhuithuit.github.io/quicksearch/">QuickSearch</a> <a href="https://www.jQuery.com/"><strong>jQuery</strong></a> <em>plug-in</em>.</p> +<form><input class="form-control input-lg" type="text" name="search" value="" id="id_search" placeholder="Search on that table" autofocus /> +</form></div> + +# A partial list of the [Justice League of America](https://en.wikipedia.org/wiki/Justice_League) +Here is an example of a table, displaying some *super heroes* ^^ <br> +(fake picture, fake email address, etc). + +| Number | Name | Secret Name! | Organization | Gender | Email Address | Photo | *Awesomeness* | +| :----- |:----:|:------------:|:------------:|:------:|:-------------:| -----:| ------------: | +| 01 | **Wonder Woman** | *Secret!* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Female | [Wonder.Woman@heroes.jloa.gov](mailto:Wonder.Woman@heroes.jloa.gov) | ![Picture for hero #01](https://randomuser.me/api/portraits/med/women/25.jpg "Picture for super-hero #01")| *Really awesome* | +| 02 | **Superman** | *Clark Kent* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Male | [superman@heroes.jloa.gov](mailto:superman@heroes.jloa.gov) | ![Picture for hero #02](https://randomuser.me/api/portraits/med/men/72.jpg "Picture for super-hero #02")| *OK* | +| 03 | **Batman** | *Bruce Wayne* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Male | [batman@heroes.jloa.gov](mailto:batman@heroes.jloa.gov) | ![Picture for hero #03](https://randomuser.me/api/portraits/med/men/45.jpg "Picture for super-hero #03")| *Wonderful* | +| 04 | **Green Lantern** | *Secret!* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Male | [Green.Lantern@heroes.jloa.gov](mailto:Green.Lantern@heroes.jloa.gov) | ![Picture for hero #04](https://randomuser.me/api/portraits/med/men/51.jpg "Picture for super-hero #04")| *OK* | +| 05 | **AwkGirl** | *Too lazy to [look for](https://www.duckduckgo.com/?q=AwkGirl+real+name) it* ([seriously](https://en.wikipedia.org/wiki/Hawkgirl#Fictional_character_biography)) | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Female | [AwkGirl@heroes.jloa.gov](mailto:AwkGirl@heroes.jloa.gov) | ![Picture for hero #05](https://randomuser.me/api/portraits/med/women/88.jpg "Picture for super-hero #05")| *Not great* | + + +> *Hint:* these emails addresses are really secret, keep them for yourself, but most importantly, keep them away from super villains! (Seriously: **pictures and emails they are fake!**) + +> Thanks to the *awesome* [RandomUser.me](https://randomuser.me/) for providing **fake** profile pictures for our super-heroes! (And *free* and *open* to use pictures, thanks guys!) + +--- + +# How to do it? +Three steps: + +## 1) Add the search bar somewhere in your page +One simple line of HTML code: + +```html +<form><input type="text" name="search" value="" id="id_search" placeholder="Search on that table" autofocus /></form> +``` + + +If you want to display on the right of the page (as I did above), let's use a cool [Bootstrap CSS feature](http://bootswatch.com/united): + +```html +<div class="pull-right"> +<h3>Search on that table?</h3> +<form><input type="text" name="search" value="" id="id_search" placeholder="Search on that table" autofocus /> +</form></div> +``` + +## 2) Load jQuery and the QuickSearch plug-in +At the **end** of your [StrapDown.js](http://lbesson.bitbucket.org/md/index.html) document, include the `jquery` javascript file (in my case `jquery.js`, but could be `jquery.min.js`), and the quicksearch plug-in (`jquery.quicksearch.min.js` in my case), with the good path. +In my example, I used the version that I stored on [my website](http://perso.crans.org/besson/), but you can use the **jQuery** CDN, or host them yourself on your site. + +What I did here was just these two simple lines. +Be cautious to do it at *the end* of the document, **after the closing `xmp` tag** (or the `textarea` tag): + +```html +<script type="text/javascript" src="http://perso.crans.org/besson/_static/jquery.js"></script> +<script type="text/javascript" src="http://perso.crans.org/besson/_static/jquery.quicksearch.min.js"></script> +``` + +## 3) Initialize the search feature +Finally, after loading the two scripts (step 2), one line of JavaScript in enough to conclude, by loading the QuickSearch plug-in, and initializing it: + +```html +<script type="text/javascript" defer async>$('input#id_search').quicksearch('table tbody tr');</script> +``` + +> More explanations? This Javascript line has three parts: +> 1. `$('input#id_search')` is using jQuery (the `$()` fonction) to select the DOM element of type `input` with `id=id_search` (id because of the `#`, it would be a class if `.`, like `div.navbar`), +> 2. `.quicksearch(...)` is calling the `quicksearch` fonction (available because QuickSearch has been registered as a jQuery plug-in), using it for that DOM element (the input search bar), +> 3. and finally we apply that fonction with the argument `'table tbody tr'`, which means that we initialize QuickSearch to look for all the `<table>` elements, only on their children `<tbody>` (content of the table), and only on the different lines (`<tr>`). + +--- + +## End of the example +That's all for today! [Go back to StrapDown.js main page](index.html)? + +--- + +<ul class="pager"> +<li class="previous"><a href="example6.html">← Previous example</a></li> +<li><a href="index.html">Index</a></li> +<li class="next disabled"><a href="#">(Last example)</a></li> +</ul> + + + + + +