Markdown Cheat Sheet

by John Pennock 5/13/2023

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

NameSurname
JohnPennock

Table Center Align

NameSurname
JohnPennock

Table Left Aligned

NameSurname
JohnPennock

Table Right Aligned

NameSurname
JohnPennock

Markdown Footnotes


## Add the "[^1]" footnote reference in the text
## The number is manual.
Example text with specific[^1] footnote reference.

## Below the text add a spearate line
## "[^1]: footnote text goes here"
## number must match footnote reference
[^1]: Full footnote for 'specific' at document end

## The footnote is removed from document flow
## and placed at the bottom of the document
## in an ordered list, number is manual

Example text with specific1 footnote reference.

Code

Code Inline

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

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

produces =>

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

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

produces =>

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

Code Block Syntax

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

Here is how markdown written specifying html:

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

is rendered with html syntax highlighting:

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

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

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 `

## Regular link
[regular](https://www.x.com/)

## Link opens in new tab
[new tab](https://www.x.com/){:target="_blank"}

regular

new tab

Horizontal Rule <hr>

These all work

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

___
<!-- 3 underscores  -->

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

3 dashes DOES NOT WORK

---
<!-- 3 dashes does not work -->

Other Cheat Sheets

Footnotes

Footnotes

  1. Full footnote for 'specific' at document end ↩