Markdown Cheat Sheet

Headers

# H1 Header
## H2 Header
### H3 Header

Text Decoration

This is some plain text. 

*This text will be italic*  
_This will also be italic_

**This text will be bold**  
__This will also be bold__

You _**can** combine them_

You can combine them

Lists

### Unordered List
 - Do the work
 - Collect benefits

### Numbered List
 1. Pay taxes
 2. Die

### Todo List
 - [ ] Buy groceries
 - [ ] Pay bills

 ### Indented List
    - Apple
        - Granny
        - Honey Crisp
    - Banana

Tables

#### Table
| Name | Surname |
|------|---------|
| John | Pennock |

#### Table Center Align
| Name | Surname |
|:----:|:-------:|
| John | Pennock |

#### Table Left Aligned
| Name | Surname |
|:--|:--|
| John | Pennock |

#### Table Right Aligned
| Name | Surname |
|-----:|--------:|
| John | Pennock |

rendered as

Table

Table Center Align

Table Left Aligned

Table Right Aligned

Footnote Syntax

1. Add the [^1] footnote reference.
   • Place after the text where you want the footnote reference to be.
   • The number is manual, you have to maintain the numbering, i.e. [^2] for the second footnote, [^3] for the third, etc. If you delete the first footnote, you have to renumber all the other footnotes.
2. On a separate line add [^1]: Full footnote text
   • The number must match the footnote reference.
   • Place below on a separate line.
   • The footnote is removed from document flow and placed at the bottom of the document in an ordered list

Footnote Markdown Code

This is example text with footnote[^1] reference[^2].  Some more content.

[^1]: Full footnote for 'footnote' at document end
[^2]: Full footnote for `reference' at document end

Footnote Markdown Rendered

This is example text with footnote¹ reference². Some more content.

Links

1. Bracket syntax: <{url}> around the url, i.e. <https://example.com>
2. HTML syntax: <a href="url" target="_blank" title="optional title">content text</a>
3. Markdown syntax: [content text](url "optional title"){:target="_blank"}
   • [content text]: the text that appears in the content
   • (url "optional title"): url is the https link and "optional title" is the text that appears when you hover over the link
   • {:target="_blank"}: opens link in a new tab, also {target=_blank} works in Nuxt markdown. The {}, added after a parenthesis also allows you to add CSS classes to style the link within the curly brackets, i.e. `{.danger}

See stack overflow discussion on Markdown new tab syntax

Link Markdown

- Bracket Link: <https://x.com>
- HTML Link: <a href="https://x.com" target="_blank" title="hey">sup?</a>
- Markdown Links:
    - [same window](https://x.com/)
    - [new tab](https://x.com/){:target="_blank"}
    - [same window title](https://x.com/ "Ms")
    - [new tab title](https://x.com/ "Mr"){:target="_blank"}
    - [kitchen sink](https://x.com/ "Dr"){:target="_blank" .info}

Link Rendered

• Bracket Link: https://x.com
• HTML Link: sup?
• Markdown Links:
  • same window
  • new tab
  • same window title
  • new tab title
  • kitchen sink

Links to sections

You can link to a section in the same document by using the # symbol followed by the header text all in lower case with hyphens replacing spaces, for example placing this [Go To Links Section](#links) will link to the Links section.

Images

Markdown image syntax resembles link syntax with []() but prepends with an exclamation point !. CSS classes can be applied in the {} appended block like links. You can also use the HTML <img> tag.

![alt text](/path/to/img.jpg)

![alt text](/path/to/img.jpg "optional title")

![alt text](/path/to/img.jpg "optional title"){.classname}

<img src="/path/to/img.jpg" alt="alt" title="title" class="classname"/>

Image without title

![alt text](/images//PPNDLogo.png)

Image with title

![alt text with title](/images//PPNDLogo.png "Example Title")

Image with classes

![alt text with class '.warn'](/images/PPNDLogo.png){.warn}

Image with HTML

<img src="/images/PPNDLogo.png" alt="alt" title="title" class="info"/>

Horizontal Rule <hr>

These all work

<hr>
<!-- html self closing tag  -->

___
<!-- 3 underscores  -->

***
<!-- 3 asterisks  -->

---
<!-- 3 dashes -->

Code

Code Inline

To create a code element inline you use a single back tick ` at the beginning and one ` the end.

Markdown code inline

OG Hello World `printf("Hello, World");`

Rendered code inline

OG Hello World printf("Hello, World");

Code Block

To create a pre code block you use three back ticks ``` at the start and stop of the block

Markdown code block

```
<html>
    <div>Hello!</div>
</html>
```

Rendered code block

<html>
    <div>Hello!</div>
</html>

Syntax highlighting

You can specify a language syntax highlighting for the code block by adding one of the language modifiers after first set of back ticks, for example instead of " ``` " you write " ```js " or " ```html " to specify javascript or html syntax highlighting.

Language Modifiers

The default language modifiers for Markdown MDC (defaults) are:

• "json"
• "javascript" or "js"
• "typescript" or "ts"
• "html"
• "css"
• "vue"
• "shell"
• "mdc"
• "markdown" or "md"
• "yaml"

Language Modifier Markdown Code

```json
```javascript
```js
```typescript
```ts
```html
```css
```vue
```shell
```mdc
```markdown
```md
```yaml

Html syntax

```html
<html>
    <div>Hello!</div>
</html>
```

Html syntax rendered

<html>
    <div>Hello!</div>
</html>

Json syntax

```json
{
    "key": "value"
}
```

Json syntax rendered

{
    "key": "value"
}

You can override this list by configuring your nuxt.config.ts file with languages found here

Note: To add to the default ones, you have to re-specify the defaults along with the new ones.

For example to add 'c', 'python', and 'terraform' to the defaults:

  content: {
    highlight: {
      langs: [ 
        'json', 'js', 'typescript', 'html', 'css', 'vue', 'shell', 'mdc', 'markdown', 'yaml',
        'c', 'python', 'terraform']
        }
    }

Showing back ticks

To show show back ticks inside of code blocks you add a fourth back tick ```` to the outer markdown and then a series of three back ticks ``` does not end the outer block.

````
```js
let x = 1 + 1
```
````

For inline code, you add an escape \ before the back tick `

Other Cheat Sheets

• Markdown Example Daring Fireball
• Markdown Cheat Sheet
• Markdown Extended Syntax
• Markdown Syntax Highlighting - GitHub
• Markdown NuxtContent Usage

Footnotes