Lerking/StrapDown.js
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases 2 Wiki Activity

Last small examples.

Browse Source
This commit is contained in:
Lilian Besson
2015-08-25 14:28:05 +02:00
parent f2c111ca72
commit b09c348d46
6 changed files with 493 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
example4.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>A second demo of MathJax with StrapDown.js</title></head><body><xmp theme="paper">
<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>
</xmp>
<script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$']], displayMath: [['$$', '$$']], processEscapes: true } });</script>
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript" src="//lbesson.bitbucket.org/md/strapdown.min.js?src=example4"></script>
</body></html>

BIN
example4.pdf Normal file
View File

Binary file not shown.

120
example5.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>A second demo of MathJax with StrapDown.js</title></head><body><xmp>
<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>
</xmp><script type="text/javascript" src="strapdown.min.js?mathjax=y&src=example5&theme=united"></script></body></html>

BIN
example5.pdf Normal file
View File

Binary file not shown.

147
example6.html Normal file
View File

@@ -0,0 +1,147 @@
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>StrapDown.js supports Markdown tables too!</title></head><body><xmp>
<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>
</xmp><script type="text/javascript" src="strapdown.min.js?theme=united"></script></body></html>

111
example7.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>Searching on a Markdown table?</title></head><body><xmp>
<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>
</xmp><script type="text/javascript" src="strapdown.min.js?theme=united"></script>
<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>
<script type="text/javascript" defer async>$('input#id_search').quicksearch('table tbody tr');</script>
</body></html>