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.
- Bold text:
**Bold text** - Italics:
*Italics* Strikethrough:~~Strikethrough~~
Subscripts and superscripts: nerdy stuff
For all you science geeks out there:
- Subscripts:
H~2~O(H₂O) - Superscripts:
X^2^(X²)
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
Links and images: make it clickable
Want to add links or images? No problem.
Hyperlinks
[Kealan's site](https://www.kealanparr.com)
Images
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:
[](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!