How To · · 3 min read

Using markdown

Markdown makes writing docs easy and accesible. Learn the basics, from headers to tables, and see how it simplifies your workflow. Dive in and give it a try!

Using markdown
Markdown is a simple way of creating conte

Alright, folks, a new post! We're diving into the world of markdown with this one. You know, that magical tool that makes documentation look snazzy without breaking a sweat.

What even is markdown?

So, you've heard of HTML, right? HyperText Markup Language? The thing that makes websites look pretty? Well, markdown is like HTML’s cool, laid-back cousin. It's a markup language, meaning it uses tags to define elements within a text document. Think of it like a rich text editor, but without all the fancy buttons.

Why should you care?

Because markdown is awesome for documentation! And if you're a developer, you know documentation is life. You’ll find markdown in most repositories. Heck, I used markdown to write this very article!

Headers: the big guns

Want to create headers in markdown? Easy peasy. There are six levels, from H1 to H6. Here’s how you do it:

# H1 tag
## H2 tag
### H3 tag
#### H4 tag
##### H5 tag
###### H6 tag

Text emphasis: bold, italics, and more

Need to make something stand out? Markdown's got you covered.

Subscripts and superscripts: nerdy stuff

For all you science geeks out there:

Lists: ordered and unordered

Lists are a breeze in markdown. Here's how you do unordered and ordered lists:

Unordered list

- Chili oil
- Rice
- Spring onions

Ordered list

1. First item
2. Second item

Want to add links or images? No problem.

[Kealan's site](https://www.kealanparr.com)

Images

![View of natural rock landscape formations making a valley ending in a road crossing through with a blue sky.](https://images.unsplash.com/photo-1660866838784-6c5158c0f979?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80)

HTML in markdown: break the rules

Markdown is cool and all, but sometimes you need to bring out the big guns. Feel free to use HTML wherever markdown falls short.

Spacing: keep it clean

Need to divide sections? Use a horizontal line:

---

Tables: organize like a pro

Tables can make your documentation look super neat. Here’s how you create one:

| Name   | Age |
| ------ | --- |
| Kealan | 25  |
| Jake   | 28  |

Want to quote someone? Easy.

> "This is a quote, from someone who is very wise" - Anonymous

Admonitions: warnings, tips, and notes

Need to highlight something important? Use blockquotes with emoji.

> :warning: **Warning:** Do not push the big red button.
> :memo: **Note:** Sunrises are beautiful.
> :bulb: **Tip:** Remember to appreciate the little things in life.

Comments: secret notes

Add comments that won’t appear in the rendered output.

Here's a paragraph that will be visible.

[This is a comment that will be hidden.]: # 

And here's another paragraph that's visible.

Centering text and more

Sometimes you need to center text or change its color. Markdown won't help, but HTML will.

<center>This text is centered.</center>
<p style="color:blue">Make this text blue.</p>

Underline: because why not?

Markdown doesn't natively support underlined text, but you can use HTML for that too.

Some of these words <ins>will be underlined</ins>.

Videos: visuals speak louder

Embed videos directly in your markdown.

<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUTUBE-ID" frameborder="0" allowfullscreen></iframe>

Or use an image link to a video:

[![Image alt text](https://img.youtube.com/vi/YOUTUBE-ID/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE-ID)

Wrap-up

Markdown is incredibly powerful and flexible. Use these hacks to take your markdown game to the next level. And remember, if all else fails, you can always sprinkle in some HTML. Happy documenting!

Try these examples above in your own evidence.dev app to see the results.

I hope this was usefull, if you want to know more, leave something in the comments. See you next post people!

Read next

Integrating UIkit
How To ·

Integrating UIkit

UIkit is a lightweight, modular front-end framework perfect for rapid UI development. Learn how to integrate it with Evidence.dev for efficient, responsive web interfaces.