demo.md

pdf_header	pdf_header_2	pdf_header_3	pdf_footer	pdf_footer_2	pdf_footer_3	pdf_header_logo	pdf_fields
Multiline Header with variable %variable-demo-1%	Another header	Behind Logo	Some static footer	Another footer	Page <page> of <total>	logo.png	variable-demo-1 variable-demo-2 one two

DEMO

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Horizontal Rules

___

---

---

---

***

---

_________________

---

Emphasis

This is bold text with **

This is bold text with __

This is italic text with *

This is italic text with _

Strikethrough with ~~

<s>...</s> for strikethrough text

<strikethrough>...</strikethrough> for strikethrough text

<strong>...</strong> for bold text

<b>...</b> for bold text

<strong>...</strong> for bold text

<i>...</i> for italic text

<sub>...</sub> for _subscript text

<sup>...</sup> for ^superscript text

Blockquotes

Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

Blockquotes can also contain images...

...before image after image...

Lists in Blockquotes are currently only partly supported

• entry 1
• entry 2
• entry 3

Blockquotes can be formatted strikethrough underline

Alert Blockquotes

Markdown extension by Github

Note

Useful information that users should know, even when skimming content.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

[!NOTE: With an own title] Useful information that users should know, even when skimming content.

Links

link text

Auto-converted link https://www.openproject.com

Anchor links in document (to headline "Links")

HTML tag <a href="https://www.openproject.com">link text</a>

Inline link text HTML tag

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Ac tristique libero volutpat at

Ordered

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. Four

5. Five

6. Six

7. Seven

8. Eight

9. Nine

10. Ten

11. You can use sequential numbers...

12. ...or keep all the numbers as 1.

Start numbering with offset:

57. foo
58. bar

Custom ordered point format

1. Level 1
   1. Level 2
   2. Level 2
      1. Level 3 uses alphabetical points
      2. Level 3
      3. Level 3
         1. Level 4 uses a brackets template
         2. Level 4
         3. Level 4

Task List

• A
• Task
• List

HTML Lists

• one
• two
• three

1. one
2. two
3. three

1. one
2. two
3. three
   1. one
   2. two
   3. three
      1. one
      2. two
      3. three

Code

Inline

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block code "fences"

Sample text here...

var foo = function (bar) {
  return bar++;
};

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Tables

Description Column 1	Description Column 2
Lorem ipsum dolor sit amet	Lorem ipsum dolor sit amet
Consectetur adipiscing elit	Consectetur adipiscing elit
Integer molestie lorem at massa	Integer molestie lorem at massa

Aligned columns

Left	Center	Right
1a	1b	1c
2a	2b	2c
3a	3b	3c

Headerless Tables

Leave the header cells empty	to create a headerless table
which can be styled	differently

Images and Formatting in Cells

One	Two	Three
	Multiple lines in cell
text around a cell image	Links ipsum	formatting strikethrough
# test	underline	---

HTML Table

Header
Cell Background Color

Images

Markdown syntax

Floating text above and below image

Markdown image class attributes (non-standard kramdown extension)

{: .left .small}

{: .center .small}

{: .right .small}

Markdown image caption

HTML syntax

HTML figure and figcaption

Demo image caption

Footnote syntax

Like links, Images also have a footnote style syntax

With a reference later in the document defining the URL location.

HTML Specials

Page breaks

use one of these formats to start a new page (all with mandatory empty lines around them)

<br style="page-break-before: always;"/>

<br style="page-break-after: always;"/>

<div style="page-break-before: always;"/>

<div style="page-break-after: always;"/>

<br-page/>

<page-br/>

---

Mermaid

if https://github.com/mermaid-js/mermaid-cli is installed, the following code block with mermaid fence is converted to and included as PNG

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

Loading

Comments

Here's a paragraph that will be visible.

And here's another paragraph that's visible.

---

Frontmatter

Frontmatter YML is supported:

---
pdf_header: |
  Multiline Header
  with variable %variable-demo-1%
pdf_header_2: Another header
pdf_header_3: Behind Logo
pdf_footer: Some static footer
pdf_footer_2: Another footer
pdf_footer_3: "Page <page> of <total>"
pdf_header_logo: logo.png
pdf_hyphenation: true
pdf_language: "en"
pdf_fields:
  variable-demo-1: "one"
  variable-demo-2: "two"
---

Variable replacement

Add key-value pairs to the frontmatter header node pdf_fields:, use %key% to have them replaced.

This is replaced: % variable-demo-1 % and this is replaced: % variable-demo-2 %.

This is replaced: %variable-demo-1% and this is replaced: %variable-demo-2%.

Footnotes

Currently, footnotes are placed at the end of the document, not on a page.

Footnote 1 link¹.

Footnote 2 link².

Duplicated footnote reference².

Footnotes

1. Footnote can have markup

   and multiple paragraphs. ↩

2. Footnote text. ↩ ↩²