Demo of available styles

All styles that are listed as “Default” here will be active when using the default remarkdown.css build. No need to specify class="remarkdown style-name" for those. On the other hand, if you want to either disable them or include them in a custom build, it’s helpful to know the style’s name and what it does.

Option name	Default	Description
hn-reset	Yes	Reset titles’ font size and weight
hn-hash	Yes	Add hashes at the start of titles
h1-underline	—	Underline H1s with equals
h2-underline	—	Underline H2s with hyphens
ol-decimal	Yes	Use decimal numbers for OL items
ol-zero	—	Use zeros for all OL items
ol-alpha	—	Use lowercase letters for OL items
ul-hyphen	Yes	Use “-” for bullets
ul-star	—	Use “*” for bullets
ul-plus	—	Use “+” for bullets
quote-gt	—	Use “>” signs for blockquotes
em-star	Yes	Use “*” signs for emphasis
em-underscore	—	Use “_” signs for emphasis
strong-star	Yes	Use “*” signs for strong emphasis
strong-underscore	—	Use “_” signs for strong emphasis
a-bracket	Yes	Add square brackets around links.
a-showurl	—	Show URLs after links
hr-star	Yes	Use “*” signs for HR
hr-hyphen	—	Use “-” signs for HR
hr-center	—	Horizontally center the HR
code-tick	Yes	Wrap CODE in “`” (backticks)
pre-indent	Yes	Left indent PRE elements
pre-tick	—	Wraps PRE in “```”
pre-tilde	—	Wraps PRE in “~~~”
pre-tilde-full	—	Wraps PRE in a full line of “~”
del-gfm	—	Wrap DEL in “~~” (GFM style)
table-marker	—	Add markers to TABLE (syntax)

Headings

Defaults: `hn-reset` and `hn-hash`

Note: next examples will all use hn-reset.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Options: `h1-underline` and `h2-underline`

Underlined H1

Underlined H2

Underlined titles cannot be centered with text-align:center. You will need to use auto margins:

Underlined H1

Underlined H2

Note that titles on two lines may not look that great:

A long title: Possimus officia, ducimus nihil beatae dolore vitae, perspiciatis ex quaerat placeat, perferendis

Lists

Default: `ol-decimal`

This is a list.
With a second item.
1. Nested lists work too.
2. This is so cool.
And a third one.

Option: `ol-zero`

This is a list.
With a second item.
And a third one.

Option: `ol-alpha`

This is a list.
With a second item.
And a third one.

Default: `ul-hyphen`

This is a list.
With a second item.
- Nested lists work too.
- This is so cool.
And a third one.

Option: `ul-star`

This is a list.
With a second item.
And a third one.

Option: `ul-plus`

This is a list.
With a second item.
And a third one.

Blockquotes

Default: `quote-gt`

Saepe blanditiis ratione ipsum tempore quam aspernatur at doloremque deleniti minima commodi. Impedit, assumenda.

Here comes a second paragraph.

Emphasis

Default: `em-star`

This is literally figurative!

Option: `em-underscore`

This is literally figurative!

Default: `strong-star`

This is figurative. Literally.

Option: `strong-underscore`

This is figurative. Literally.

Horizontal rules

Default: `hr-star`

Option: `hr-hyphen`

Option: `hr-center`

Code and code blocks

Default: `code-tick`

Some inline code: var someCode = 'lulz'.

Default: `pre-indent`

A paragraph.

pre {
  margin-left: 3ch;
  tab-size: 4;
}

Another paragraph.

Option: `pre-tick`

A code block

Option: `pre-tilde`

A code block

Option: `pre-tilde-full`

A code block

Other

Option: `del-gfm`

This is ~~a mistake~~ awesome.

Tables

Option: `table-marker`

Not too bad for column headers:

Col 1	Col 2	Col 3
Lorem ipsum	Dolor sit amet	Consectetur adipisicing elit
Quae enim corrupti	Excepturi laudantium molestiae nam	Repellat ab nostrum, est tempora minus dolores magni voluptatibus?

Row headers don’t have markers:

Row 1	Lorem ipsum	Dolor sit amet	Consectetur adipisicing elit
Row 2	Quae enim corrupti	Excepturi laudantium molestiae nam	Repellat ab nostrum, est tempora minus dolores magni voluptatibus?

Multiplication table! (Text alignment not managed by ReMarkdown.)

	1	2	3	4	5	6	7	8	9	10
1	1	2	3	4	5	6	7	8	9	10
2	2	4	6	8	10	12	14	16	18	20
3	3	6	9	12	15	18	21	24	27	30
4	4	8	12	16	20	24	28	32	36	40
5	5	10	15	20	25	30	35	40	45	50
6	6	12	18	24	30	36	42	48	54	60
7	7	14	21	28	35	42	49	56	63	70
8	8	16	24	32	40	48	56	64	72	80
9	9	18	27	36	45	54	63	72	81	90
10	10	20	30	40	50	60	70	80	90	100

	1	2	3	4	5	6	7	8	9	10
1	1	2	3	4	5	6	7	8	9	10
2	2	4	6	8	10	12	14	16	18	20
3	3	6	9	12	15	18	21	24	27	30
4	4	8	12	16	20	24	28	32	36	40
5	5	10	15	20	25	30	35	40	45	50
6	6	12	18	24	30	36	42	48	54	60
7	7	14	21	28	35	42	49	56	63	70
8	8	16	24	32	40	48	56	64	72	80
9	9	18	27	36	45	54	63	72	81	90
10	10	20	30	40	50	60	70	80	90	100

	1	2	3	4	5	6	7	8	9	10
1	1	2	3	4	5	6	7	8	9	10
2	2	4	6	8	10	12	14	16	18	20
3	3	6	9	12	15	18	21	24	27	30
4	4	8	12	16	20	24	28	32	36	40
5	5	10	15	20	25	30	35	40	45	50
6	6	12	18	24	30	36	42	48	54	60
7	7	14	21	28	35	42	49	56	63	70
8	8	16	24	32	40	48	56	64	72	80
9	9	18	27	36	45	54	63	72	81	90
10	10	20	30	40	50	60	70	80	90	100

Demo of available styles

Headings

Defaults: hn-reset and hn-hash

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Options: h1-underline and h2-underline

Underlined H1

Underlined H2

Underlined H1

Underlined H2

A long title: Possimus officia, ducimus nihil beatae dolore vitae, perspiciatis ex quaerat placeat, perferendis

Lists

Default: ol-decimal

Option: ol-zero

Option: ol-alpha

Default: ul-hyphen

Option: ul-star

Option: ul-plus

Blockquotes

Default: quote-gt

Emphasis

Default: em-star

Option: em-underscore

Default: strong-star

Option: strong-underscore

Links

Default: a-bracket

Option: a-showurl

Horizontal rules

Default: hr-star

Option: hr-hyphen

Option: hr-center

Code and code blocks

Default: code-tick

Default: pre-indent

Option: pre-tick

Option: pre-tilde

Option: pre-tilde-full

Other

Option: del-gfm

Tables

Option: table-marker

Defaults: `hn-reset` and `hn-hash`

Options: `h1-underline` and `h2-underline`

Default: `ol-decimal`

Option: `ol-zero`

Option: `ol-alpha`

Default: `ul-hyphen`

Option: `ul-star`

Option: `ul-plus`

Default: `quote-gt`

Default: `em-star`

Option: `em-underscore`

Default: `strong-star`

Option: `strong-underscore`

Default: `a-bracket`

Option: `a-showurl`

Default: `hr-star`

Option: `hr-hyphen`

Option: `hr-center`

Default: `code-tick`

Default: `pre-indent`

Option: `pre-tick`

Option: `pre-tilde`

Option: `pre-tilde-full`

Option: `del-gfm`

Option: `table-marker`

	1	2	3	4	5	6	7	8	9	10
1	1	2	3	4	5	6	7	8	9	10
2	2	4	6	8	10	12	14	16	18	20
3	3	6	9	12	15	18	21	24	27	30
4	4	8	12	16	20	24	28	32	36	40
5	5	10	15	20	25	30	35	40	45	50
6	6	12	18	24	30	36	42	48	54	60
7	7	14	21	28	35	42	49	56	63	70
8	8	16	24	32	40	48	56	64	72	80
9	9	18	27	36	45	54	63	72	81	90
10	10	20	30	40	50	60	70	80	90	100