Embed Image Sample

Command Option

$ md2html example/embed-image.md -e

Local file is embedded

![logo/nocd5](img/nocd5.png "nocd5")

logo/nocd5

Write HTML tag immediately

<img src="img/nocd5.png" width="48">
<img src="img/nocd5.png" width="32">
<img src="img/nocd5.png" width="16">

![google/errors/robot](https://www.google.com/images/errors/robot.png "robot")

google/errors/robot

Extended Image Size Syntax

Support URL parameter like extended syntax for image size

Width & Height

![logo/nocd5](img/nocd5.png?width=24)
![logo/nocd5](img/nocd5.png?width=36&height=24)
![logo/nocd5](img/nocd5.png?width=48&height=24)
![logo/nocd5](img/nocd5.png?width=24&height=36)
![logo/nocd5](img/nocd5.png?width=24&height=48)

logo/nocd5 logo/nocd5 logo/nocd5 logo/nocd5 logo/nocd5

Syntax Highlight Sample

C

#include <stdio.h>

int main(){
    printf("Hello World!\n");
    return 0;
}

Ruby

print "Hello World!\n"

JavaScript

console.log("Hello World!");

Go

package main

import (
	"fmt"
	"os"
)

func main() {
	fmt.Fprint(os.Stdout, "Hello World!\n")
}

Vim

:echo "Hello World!"<CR>

Task List Sample

* [ ] Some Task 1
	* [x] Sub Task 1.1
	* [x] Sub Task 1.2
	* [ ] Sub Task 1.3
	* [ ] Sub Task 1.4
* [ ] Some Task 2
	* [x] Sub Task 2.1
	* [x] Sub Task 2.2
	* [ ] Sub Task 2.3
		* [x] Sub-Sub Task 2.3.1
		* [ ] Sub-Sub Task 2.3.2
	* [ ] Sub Task 2.4
* Some Item 1
* [x] Some Task 3
	* [x] Sub Task 3.1
- Some Item 2
	- Sub Item 2.1
		- Sub Item 2.1.1
- [x] Some Task 4
	- [x] Sub Task 4.1

MathJax Sample

Example 0

$$ f(a)=\frac {1} {2 \pi i} \oint_\gamma \frac {f(z)} {z-a} dz $$

$$ f(a)=\frac {1} {2 \pi i} \oint_\gamma \frac {f(z)} {z-a} dz $$

Example 1

$ \sum_{n = 0}^\infty \frac {f^{(n)}(a)} {n!} (x-a)^n $

$ \sum_{n = 0}^\infty \frac {f^{(n)}(a)} {n!} (x-a)^n $

Example 2

```math
\begin{eqnarray}
e^{j \theta} & = & \cos \theta + j \sin \theta \\
e^{j \pi} & = & -1
\end{eqnarray}
```

$$\begin{eqnarray} e^{j \theta} & = & \cos \theta + j \sin \theta \\ e^{j \pi} & = & -1 \end{eqnarray} $$

Example 3

<p>\(
\left\{
\begin{eqnarray}
  x & + & y & = & 8 \\
  2x & + & 4y & = & 26 \\
\end{eqnarray}
\right.
\)</p>

\( \left\{ \begin{eqnarray} x & + & y & = & 8 \\ 2x & + & 4y & = & 26 \\ \end{eqnarray} \right. \)

\\(x = 3, y = 5\\)

\(x = 3, y = 5\)

Example 4

<p>\[
\\[1em]
ax^2 + bx + c = 0 \\
x = \frac {-b \pm \sqrt {b^2 - 4ac}} {2a} \\
\]</p>

\[ \\[1em] ax^2 + bx + c = 0 \\ x = \frac {-b \pm \sqrt {b^2 - 4ac}} {2a} \\ \]

Table Span Sample

|  1 |  2 |  3 |  4 |  5 |  6 |  7 |  8 |  9 |
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
| 11 | 21 ¦    ¦    ¦    ¦    ¦    ¦    ¦    |
|    | 22 | 32 ¦    ¦    ¦    ¦    ¦    | 92 |
|    |    | 33 | 43 ¦    ¦    ¦    | 83 |    |
|    |    |    | 44 | 54 ¦    | 74 |    |    |
|    |    |    |    | 55 | 65 |    |    |    |
|    |    |    |    ¦ 56 |    |    |    |    |
|    |    |    ¦    ¦    ¦ 67 |    |    |    |
|    |    ¦    ¦    ¦    ¦    ¦ 78 |    |    |
|    ¦    ¦    ¦    ¦    ¦    ¦    ¦ 89 |    |

|  1 |  2 |  3 |  4 |  5 |  6 |  7 |  8 |  9 |
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|    ¦    ¦    ¦    ¦    ¦    ¦    ¦ 81 | 91 |
| 12 |    ¦    ¦    ¦    ¦    ¦ 72 | 82 |    |
|    | 23 |    ¦    ¦    ¦ 63 | 73 |    |    |
|    |    | 34 |    ¦ 54 | 64 |    |    |    |
|    |    |    | 45 | 55 |    |    |    |    |
|    |    |    |    | 56 ¦    |    |    |    |
|    |    |    | 47 ¦    ¦    ¦    |    |    |
|    |    | 38 ¦    ¦    ¦    ¦    ¦    |    |
|    | 29 ¦    ¦    ¦    ¦    ¦    ¦    ¦    |

| № |  1 |  2 |  3 |  4 |
|:-:|:--:|:--:|:--:|:--:|
| 1 | 11 ¦    | 31 ¦    |
| 2 |    ¦    |    ¦    |
| 3 | 13 ¦    | 33 ¦    |
| 4 |    ¦    |    ¦    |

| № |  1 |  2 |  3 |  4 |  5 |  6 |
|:-:|:--:|:--:|:--:|:--:|:--:|:--:|
| 1 | 11 ¦    ¦    | 41 ¦    ¦    |
| 2 |    ¦    ¦    |    ¦    ¦    |
| 3 |    ¦    ¦    |    ¦    ¦    |
| 4 | 14 ¦    ¦    | 44 ¦    ¦    |
| 5 |    ¦    ¦    |    ¦    ¦    |
| 6 |    ¦    ¦    |    ¦    ¦    |
1 2 3 4 5 6 7 8 9
11 21
22 32 92
33 43 83
44 54 74
55 65
56
67
78
89
1 2 3 4 5 6 7 8 9
81 91
12 72 82
23 63 73
34 54 64
45 55
56
47
38
29
№ 1 2 3 4
1 11 31
2
3 13 33
4
№ 1 2 3 4 5 6
1 11 41
2
3
4 14 44
5
6

Table Without Header Sample

This feature is enabled with -s/--span option

|      |      |
|------|------|
| foo  | bar  |
| hoge | fuga |
foo bar
hoge fuga

Custom CSS Sample

Command Option

$ md2html example/custom-css.md -c example/css/custom-css.css

Example for wheel class

<img class="vinyl ep" src="img/nocd5.png">
<img class="vinyl lp" src="img/nocd5.png">

Custom CSS for wheel

/* example/css/custom-css.css */

img.vinyl {
    margin: 12px;
}

img.vinyl.ep {
    animation: spin calc(60s / 45) linear infinite;
}

img.vinyl.lp {
    animation: spin calc(60s / (33 + 1 / 3)) linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}