Style Guide

See how elements are styled with style.css.

Table of Contents

Headings
Paragraphs
Links
Lists
Blockquotes
Emphasis
Code
Tables
Horizontal Rules
Images
Figures
Extras

h1 Heading `with code` and small text

h2 Heading `with code` and small text

h3 Heading `with code` and small text

h4 Heading `with code` and small text

h5 Heading `with code` and small text

h6 Heading `with code` and small text

# 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."

Links

link text

[link text](http://dev.nodeca.com)

link with title

[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)

Lists

Unordered

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!

+ 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!

Ordered

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.`

Offset

57. foo
1. bar

Blockquotes

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.

Emphasis

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~~

Code

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));
```

User Input

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>

Tables

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. |

Horizontal Rules

___

---

***

Images

Finn and Jake

![Finn and Jake](http://38.media.tumblr.com/tumblr_mdo6z0KBpf1rwy00jo1_400.gif "One style is all that is needed.")

Captain Story-Martense House

![Captain Story-Martense House](https://upload.wikimedia.org/wikipedia/commons/6/66/1996.164.1-65_IMLS_SL2.jpg "Captain Story-Martense House, Front Door, Church Avenue and East 38th Street, Flatbush, Brooklyn, ca. 1899-1909.")

Like links, images also have a footnote style syntax.

Alt text

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"

Figures

<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>

Extras

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.

Abbreviations

via markdown-it-abbr

This is a HTML abbreviation example.

It converts “HTML” but keeps partial entries like “xxxHTMLyyy” intact.

This is a HTML abbreviation example.

It converts "HTML" but keeps partial entries like "xxxHTMLyyy" intact.

*[HTML]: Hyper Text Markup Language

Definitions

via markdown-it-deflist

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

Footnotes

via markdown-it-footnote

Footnote 1 link^[1].

Footnote 2 link^[2].

Inline footnote^[3] definition.

Duplicated footnote reference^[2:1].

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.

Special Emphasis

Superscript: 19^th (via markdown-it-sup)
Subscript: H₂O (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))

Footnote can have markup

and multiple paragraphs. ↩︎
Footnote text. ↩︎ ↩︎
Text of inline footnote ↩︎

Style Guide

h1 Heading with code and small text

h2 Heading with code and small text

h3 Heading with code and small text

h4 Heading with code and small text

h5 Heading with code and small text

h6 Heading with code and small text