4.8 KiB
Markdown
ReadMe's Markdown engine.
Compare Markdown implementations at babelmark.
- Syntax highlighting
- TODO lists
- Folded content
- Images
- Diagrams
- Math
- Alerts
- Troubleshooting
- Further readings
Syntax highlighting
Specify the language right after the code block's opening:
def index
puts "hello world"
end
private void index(){
MessageBox.Show("hello world");
}
TODO lists
Use [ ] after the bullet point or numbered list character to switch them for an empty ballot box, and [x] for a checked one.
- 1
- 2
- a
- Point 3
Folded content
Use a <details> HTML tag:
<details>
<summary>Fold/Open</summary>
Folded content
</details>
Images
Add an image:
![description][reference name]
Control width and height:
<img src="./cat.png" width=300px height=200px />
Align in the center:
<div align="center"></div>
Diagrams
Use mermaid.js to include diagrams and graphs.
See also The magical Markdown I bet you don't know and slaise/High-level-Markdown.
Math
$\sum_{n=1}^{10} n^2$
$$\sum_{n=1}^{10} n^2$$
\sum_{n=1}^{10} n^2
\sum_{n=1}^{10} n^2
Alerts
Uses the Alert extension.
Refer Github's alert formatting.
> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!TIP]
> Helpful advice for doing things better or more easily.
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
Note
Useful information that users should know, even when skimming content.
Tip
Helpful advice for doing things better or more easily.
Important
Key information users need to know to achieve their goal.
Warning
Urgent info that needs immediate user attention to avoid problems.
Caution
Advises about risks or negative outcomes of certain actions.
Troubleshooting
Escape the backtick character
Include a non-code formatted backtick by escaping it normally (with a \).
Render it in an inline code block using double backticks instead of single backticks.
Alternatively, use a code block. This will wrap everything in a <pre> HTML tag.
To do this, either indent 4 spaces to start a code block, or use fenced code blocks if supported.
VS Code and mermaid graph in Markdown preview
Install and enable bierner.markdown-mermaid's extension.
Further readings
- Official documentation
- Extended syntax
- Linguist supported language syntax list
- Github's alert formatting
- Live editor
- Mermaid.js