Learning about Markdown

Napoleon

Napoleon

Jan 12, 2025

Learning about Markdown

Here's a demo of how everything looks.

The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/

What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

Syntax guide

Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.

Headers

# This is a h1 tag
## This is a h2 tag
#### This is a h4 tag

This is a h1 tag

This is a h2 tag

This is a h4 tag

Emphasis

_This text will be italic_
**This text will be bold**
_You **can** combine them_

This text will be italic

This text will be bold

You can combine them

Lists

Unordered

- Item 1
- Item 2
- Item 2a
- Item 2b
  • Item 1
  • Item 2
    • Item 2a
    • Item 2b

Ordered

1. Item 1
1. Item 2
1. Item 3
1. Item 3a
1. Item 3b
  1. Item 1
  2. Item 2
  3. Item 3
    1. Item 3a
    2. Item 3b

Images

![A llama](/uploads/llama-6.avif)
Format: ![Alt Text](url)

A llama

Links

http://tina.io - automatic!
[TinaCMS](http://tina.io)

http://tina.io - automatic! TinaCMS

Blockquotes

As Napoleon said about the liger:
> It’s pretty much my favorite animal.
> It’s like a lion and a tiger mixed… bred for its skills in magic.

As Napoleon said about the liger:

It’s pretty much my favorite animal. It’s like a lion and a tiger mixed… bred for its skills in magic.

Inline code

I think you should use an
`<addr>` element here instead.

I think you should use an <addr> element here instead.

Syntax highlighting

Here’s an example of how you can use syntax highlighting with GitHub Flavored Markdown:

```js:fancyAlert.js
function fancyAlert(arg) {
if (arg) {
$.facebox({ div: '#foo' })
}
}
```

And here's how it looks - nicely colored with styled code titles!

function fancyAlert(arg) {
if (arg) {
$.facebox({ div: '#foo' })
}
}

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

| First Header | Second Header |
| --------------------------- | ---------------------------- |
| Content from cell 1 | Content from cell 2 |
| Content in the first column | Content in the second column |
First HeaderSecond Header
Content from cell 1Content from cell 2
Content in the first columnContent in the second column

Diagrams

You can use Mermaid diagrams to visualize flows, sequences, and other chart types directly in Markdown. Here’s an example of a Mermaid flowchart:

Loading diagram...

Rendered, this would create a flowchart where decisions lead to different paths. Mermaid also supports sequence diagrams, Gantt charts, class diagrams, and more. For the full range of possibilities, check out the Mermaid documentation: https://mermaid-js.github.io/mermaid/