Zen and the art of Coding

Submit

Please email hello@zenandtheartofcoding.info for a password

Markdown Syntax

make pro README files

• markdown is honestly pretty awesome. it is the language of the README file but you can actually do a ton with it too. in fact, this entire course is written in mdx, which is markdown mixed with jsx (React syntax)
• in VS Code, you can see your markdown files rendered by right clicking a markdown file (one that ends with .md) and selecting "Open preview"

Headings

• these are the exact same as HTML heading tags, h1 - h6
• the syntax is just a hash (#). one for h1, two for h2 and so on up to h6

# I am an h1
 
## I am an h2
 
### I am an h3
 
#### I am an h4
 
##### I am an h5
 
###### I am an h6

• renders:

I am an h1

I am an h2

I am an h3

I am an h4

I am an h5

I am an h6

Line breaks & paragraphs

• instead of using the HTML <br> tag (you can use this if you want), you can also just make sure you have two spaces of blank space after your sentence and hit return and markdown will know you are starting a new line
• instead of using <p> tags, just put a space between paragraphs

this text will  
be on two lines.
 
this is a new paragraph.

Italics & Bold

• to italicize text, wrap it in single asterisks (*) or underscores (_):

_This text_ is italicized.
_This text_ is also italicized.

• renders: This text is italicized. This text is also italicized.

• to make text bold, use double asterisks (**) or underscores (__):

**This text** is bold.
**This text** is also bold.

• renders: This text is bold. This text is also bold.

• both italic and bold: combine them to make text both italic and bold by using triple asterisks (***) or underscores (___):

**_This text_** is bold and italic.

• renders: This text is bold and italic.

Links

• links: use square brackets ([]) to enclose the link text, followed by the URL in parentheses (()):

[Zen and the art of Coding](https://www.zenandtheartofcoding.info)

• renders as Zen and the art of Coding (opens in a new tab)

Images

• adding images is similar to adding links, but you start with an exclamation point (!)

![zen and the art of coding logo](/path/to/image.png)

• renders:

Lists

• you can to unordered lists (like these bullet points) with either dashes (-) or asterisks (*) but you should pick one style, mixing and matching could get weird results

- this
- is
- an
- unordered list

• this

• is

• an

• unordered list

• ordered lists, just use numbers

1. this
2. is
3. an
4. ordered
5. list

1. this
2. is
3. an
4. ordered
5. list

Code

• back ticks (``) are technically for code. I kinda use them to highlight text like this
• you can open up fenced code blocks though with triple back ticks to open and triple back ticks to close and depending on where your markdown is being rendered you can usually even specify the language for syntax highlighting (like most of this course)

```javasctipt
const aFunction = () => console.log("I am an example")
```

• this is awesome for giving instructions in your README on running your project

```bash
$ # install dependencies
$ npm i
$ # start local development node.js server
$ npm run dev
$ # or
$ yarn dev
```

Tables

• this is what I use for the table of contents throughout this course
• the syntax is:

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

• renders: