Markdown
This page shows common Markdown patterns in Goosequill, including headings, paragraphs, images, quotes, tables, code blocks, lists, and a few HTML elements.
- Expressive code: Expressive Code
- Katex: KaTeX
Headings
The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.
H1
H2
H3
H4
H5
H6
Paragraph
Leave a blank line between paragraphs. Markdown renderers use that blank line to split text into separate paragraphs.
Regular body text can include links, emphasis, inline code, and footnotes. For longer explanations, use shorter paragraphs to keep the page readable.
Images
Syntax
Output
Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.
Blockquote without attribution
Syntax
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.> **Note** that you can use _Markdown syntax_ within a blockquote.Output
Tiam, ad mint andaepu dandae nostion secatur sequo quae.
Note that you can use Markdown syntax within a blockquote.
Blockquote with attribution
Syntax
> Don't communicate by sharing memory, share memory by communicating.> — <cite>Rob Pike[^1]</cite>Output
Don’t communicate by sharing memory, share memory by communicating. — Rob Pike1
Tables
Syntax
| Italics | Bold | Code || --------- | -------- | ------ || _italics_ | **bold** | `code` |Output
| Italics | Bold | Code |
|---|---|---|
| italics | bold | code |
Code Blocks
Syntax
we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntax, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash
```html<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <title>Example HTML5 Document</title> </head> <body> <p>Test</p> </body></html>```Output
<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <title>Example HTML5 Document</title> </head> <body> <p>Test</p> </body></html>Mermaid Diagrams
Syntax
```mermaidflowchart TD A[Write Markdown] --> B[Render Mermaid] B --> C[Display Diagram]```Output
List Types
Ordered List
Syntax
1. First item2. Second item3. Third itemOutput
- First item
- Second item
- Third item
Unordered List
Syntax
- List item- Another item- And another itemOutput
- List item
- Another item
- And another item
Nested list
Syntax
- Fruit - Apple - Orange - Banana- Dairy - Milk - CheeseOutput
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
Other Elements — abbr, sub, sup, kbd, mark
Syntax
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
Use <mark>mark</mark> to highlight text that needs attention.Output
GIF is a bitmap image format.
H2O
Xn + Yn = Zn
Press CTRL + ALT + Delete to end the session.
Use mark to highlight text that needs attention.