See how elements are styled with style.css.
Table of Contents
# h1 Heading `with code` <small>and small text</small>
## h2 Heading `with code` <small>and small text</small>
### h3 Heading `with code` <small>and small text</small>
#### h4 Heading `with code` <small>and small text</small>
##### h5 Heading `with code` <small>and small text</small>
###### h6 Heading `with code` <small>and small text</small>
At the base of the mainmast, full beneath the doubloon and the flame, the Parsee was kneeling in Ahab's front, but with his head bowed away from him; while near by, from the arched and overhanging rigging, where they had just been engaged securing a spar, a number of the seamen, arrested by the glare, now cohered together, and hung pendulous, like a knot of numbed wasps from a drooping, orchard twig. In various enchanted attitudes, like the standing, or stepping, or running skeletons in Herculaneum, others remained rooted to the deck; but all their eyes upcast.
"There it is again—under the hatches—don't you hear it—a cough—it sounded like a cough."
At the base of the mainmast, full beneath the doubloon and the flame, the Parsee was kneeling in Ahab's front, but with his head bowed away from him; while near by, from the arched and overhanging rigging, where they had just been engaged securing a spar, a number of the seamen, arrested by the glare, now cohered together, and hung pendulous, like a knot of numbed wasps from a drooping, orchard twig. In various enchanted attitudes, like the standing, or stepping, or running skeletons in Herculaneum, others remained rooted to the deck; but all their eyes upcast.
"There it is again—under the hatches—don't you hear it—a cough—it sounded like a cough."
[link text](http://dev.nodeca.com)
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
link with footnote style syntax
[link with footnote style syntax][footnote style]
[footnote style]: https://en.wikipedia.org/wiki/Note_(typography)
- Create a list by starting a line with
+,-, or* - Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Marker character change forces new list start:
- Very easy!
+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
* Ac tristique libero volutpat at
+ Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
+ Very easy!
-
Lorem ipsum dolor sit amet
-
Consectetur adipiscing elit
-
Integer molestie lorem at massa
-
You can use sequential numbers...
-
...or keep all the numbers as
1.
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`
- foo
- bar
57. foo
1. bar
This is a paragraph preceding a blockquote.
<blockquote>can also be nested......by using additional greater-than (
'>') signs right next to each other......or with spaces between arrows.
This is a paragraph following a blockquote.
This is a paragraph preceding a blockquote.
> `<blockquote>` can also be nested...
>> ...by using additional greater-than (`'>'`) signs right next to each other...
> > > ...or with spaces between arrows.
This is a paragraph following a blockquote.- This is bold text
- This is also bold text
- This is italic text
- This is also italic text
This is deleted text
- **This is bold text**
- __This is also bold text__
- *This is italic text*
- _This is also italic text_
- ~~This is deleted text~~
Inline code
Indented code
line 3 of code
line 4 of code
line 5 of code
line 7 of code
Fenced code blocks
// Syntax highlighting
var foo = function (bar) {
return bar++;
};
console.log(foo(5));`Inline code`
Indented code
line 3 of code
line 4 of code
line 5 of code
line 7 of code
```
Fenced code blocks
```
```js
// Syntax highlighting
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
```
ctrlaltdelete
qwerty
azerty
<kbd>ctrl</kbd><kbd>alt</kbd><kbd>delete</kbd>
<kbd>q</kbd><kbd>w</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>
<kbd>a</kbd><kbd>z</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>| Option | Description |
|---|---|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Right aligned columns
| Option | Description |
|---|---|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
___
---
***
Like links, images also have a footnote style syntax.
The reference defining the URL location can be later in the document.
Like links, images also have a footnote style syntax.
![Alt text][id]
The reference defining the URL location can be later in the document.
[id]: https://upload.wikimedia.org/wikipedia/commons/1/1f/Ries.PNG "1550 Woodcut of 58-year-old Adam Ries, inscription: ANNO 1550 ADAM RIES SEINS ALTERS IM LVIII"
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Helsinki_z00.jpg/1920px-Helsinki_z00.jpg" alt="Helsinki">
<figcaption>Panoramic view of <a href="//commons.wikimedia.org/wiki/Helsinki" title="Helsinki">Helsinki</a>, Finland from the Ateljee bar of <a href="https://en.wikipedia.org/wiki/Hotel_Torni" title="en:Hotel Torni">Hotel Torni</a>.</figcaption>
</figure>The following markup falls outside the CommonMark specification and may require plugins or special options for your markdown parser of choice. We're using markdown-it and related plugins to show how the following elements look when using style.css.
via markdown-it-abbr
This is a HTML abbreviation example.
It converts "HTML" but keeps partial entries like "xxxHTMLyyy" intact.
*[HTML]: Hyper Text Markup Language
This is a HTML abbreviation example.
It converts "HTML" but keeps partial entries like "xxxHTMLyyy" intact.
*[HTML]: Hyper Text Markup Language
Term 1
: Definition 1 with lazy continuation.
Term 2 with inline markup
: Definition 2
{ some code, part of Definition 2 }
Third paragraph of definition 2.
Compact style:
Term 1 ~ Definition 1
Term 2 ~ Definition 2a ~ Definition 2b
Term 1
: Definition 1
with lazy continuation.
Term 2 with *inline markup*
: Definition 2
{ some code, part of Definition 2 }
Third paragraph of definition 2.
_Compact style:_
Term 1
~ Definition 1
Term 2
~ Definition 2a
~ Definition 2b
Footnote 1 link1.
Footnote 2 link2.
Inline footnote^[Text of inline footnote] definition.
Duplicated footnote reference2.
Footnote 1 link[^first].
Footnote 2 link[^second].
Inline footnote^[Text of inline footnote] definition.
Duplicated footnote reference[^second].
[^first]: Footnote **can have markup**
and multiple paragraphs.
[^second]: Footnote text.
- Superscript: 19^th^ (via markdown-it-sup)
- Subscript: H
2O (via markdown-it-sub) - ++Inserted text++ (via markdown-it-ins)
- ==Marked text== (via markdown-it-mark)
- Superscript: 19^th^ (via [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup))
- Subscript: H~2~O (via [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub))
- ++Inserted text++ (via [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins))
- ==Marked text== (via [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark))