Writing Guide

Master content creation with Markdown, components, and advanced features

jet-w
4min
#Guide #Markdown #Writing

Writing Guide

Learn how to create beautiful, engaging content for your blog.

Content Guide

GuideDescription
ContainersTips, warnings, and callout boxes
Code BlocksSyntax highlighting and features
Mermaid DiagramsFlowcharts, sequences, and more
IconsUse icons from multiple libraries
LaTeX MathMathematical formulas
Video EmbeddingYouTube, Bilibili, custom videos
SlidesInteractive presentations with Reveal.js

Markdown Essentials

Markdown is a lightweight markup language that makes writing formatted content easy and intuitive.

Headings

Use # symbols for headings:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
Best Practices
  • Use only one # Heading 1 per page (your title)
  • Don’t skip levels (don’t jump from ## to ####)
  • Keep headings concise

Text Formatting

Basic Styles

SyntaxResultUse For
**bold**boldImportant terms
*italic*italicEmphasis
~~strike~~strikeDeprecated content
`code`codeInline code

Combined Styles

***bold and italic***
**bold with `code` inside**
[Link Text](https://example.com)
[Link with Title](https://example.com "Hover text")

Link to other posts:

[See the guide](./02-containers)
[Back to home](/)

Images

Basic Image

![Alt text](/images/photo.jpg)

Image with Caption

![Beautiful sunset](/images/sunset.jpg)
*A beautiful sunset over the ocean*

Image Sizing

Use HTML for more control:

<img src="/images/photo.jpg" alt="Photo" width="300" />

Lists

Unordered Lists

- Item one
- Item two
  - Nested item
  - Another nested
- Item three

Result:

  • Item one
  • Item two
    • Nested item
    • Another nested
  • Item three

Ordered Lists

1. First step
2. Second step
3. Third step

Task Lists

- [x] Completed task
- [ ] Pending task
- [ ] Another task
  • Completed task
  • Pending task
  • Another task

Blockquotes

> This is a quote.
> It can span multiple lines.

> Nested quotes:
>> Are also possible

This is a quote. It can span multiple lines.

Horizontal Rules

Create dividers with:

---

Tables

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
Column 1Column 2Column 3
Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6

Table Alignment

| Left | Center | Right |
|:-----|:------:|------:|
| L    | C      | R     |
LeftCenterRight
LCR

Escaping Characters

Use backslash to show literal characters:

\*not italic\*
\# not a heading

*not italic*

Next: Learn about Containers for callouts and tips.