Basic Syntax#

Markdown is a lightweight and easy-to-use syntax for styling your writing.

Headers#

When the content of the article is extensive, you can use headers to segment:

# H1 — heading

## H2 — heading

### H3 — heading

#### H4 — heading

##### H5 - heading

markdown

H1 — heading#

H2 — heading#

H3 — heading#

H4 — heading#

H5 - heading#

Paragraph#

Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.

first line  
second line
third line

New paragraph

plaintext

Preview:

Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.

first line
second line
third line

New paragraph

longsentencewithoutspacesandlinebreakswhichwillnotwrapandwilloverflowthecontainerandbreakthelayoutandthenbreakeverythingandruintheexperienceofreadingthearticleandmakeitlookuglyandunprofessionalandunpleasanttotheeyeandthebrainandtheheartandthemindandthebodyandthesoulandtheuniverse

Bold and Italics#

_Italic text_ and **Bold text**, together will be **_Bold Italic text_**

markdown

Preview:

Italic text and Bold text, together will be Bold Italic text

Strikethrough#

~~Strikethrough~~

markdown

Preview:

~~Strikethrough~~

Links#

External links#

Text link [Link Name](http://link.url)

markdown

Preview:

Text link Link Name ↗

Internal links#

Markdown link [git](Basics/git.md)
Wikilinks [[Git]]

markdown

Preview:
Markdown link Git
Wikilinks Git

Link to heading#

[[Basics/Git#Essential Commands|Git Basics]]

markdown

You can also give aliases to links.

Preview:
Git Basics

Inline Code#

This is an `inline code`

markdown

Preview:

This is an inline code

Code Blocks#

With title, diffs, code highlighting.

\```js title="fibonacci.js"
// calculate fibonacci
function fibonacci(n) { // [!code highlight] # Single line highlight
  if (n <= 1) return 1
  const result = fibonacci(n - 1) + fibonacci(n - 2) // [!code --]
  return fibonacci(n - 1) + fibonacci(n - 2) // [!code ++]
}

function main() { // [!code highlight:5] # Multi line highlight
  const n = 5;
  const result = fibonacci(n);
  console.log(result);
}

main();
```

markdown

Preview:

fibonacci.js

// calculate fibonacci
function fibonacci(n) { 
  if (n <= 1) return 1
  const result = fibonacci(n - 1) + fibonacci(n - 2) 
  return fibonacci(n - 1) + fibonacci(n - 2) 
}

function main() { 
  const n = 5;
  const result = fibonacci(n);
  console.log(result);
}

main();

Currently using shiki as the code highlighting plugin. For supported languages, refer to Shiki: Languages ↗.

Inline Formula#

This is an inline formula $e^{i\pi} + 1 = 0$

markdown

Preview:

This is an inline formula $e^{i\pi} + 1 = 0$

Formula Blocks#

$$
\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} \, dx
$$

markdown

Preview:

\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} \, dx

Currently using KaTeX as the math formula plugin. For supported syntax, refer to KaTeX Supported Functions ↗.

Images#

External Image#

![Nahil](https://avatars.githubusercontent.com/u/88521572)

markdown

Preview:

Nahil

Internal Image#

![](./thumbnail.jpg)
![[thumbnail.jpg]]

plaintext

Lists#

Regular unordered list#

- 1
- 2
- 3

markdown

Preview:

Regular ordered list#

1. GPT-4
2. Claude Opus
3. LLaMa

markdown

Preview:

GPT-4
Claude Opus
LLaMa

You can continue to nest syntax within lists.

Blockquotes#

> Gunshot, thunder, sword rise. A scene of flowers and blood.

markdown

Preview:

Gunshot, thunder, sword rise. A scene of flowers and blood.

You can continue to nest syntax within blockquotes.

Callouts/Admonitions#

> [!note]
> A standard note callout. 

> [!question]
> A question callout. 

> [!info]
> An info callout. 

> [!todo]
> A todo callout. 

> [!fail]
> A fail/warning callout. 

> [!done]
> Or use `success` — both map to a check-check icon.

> [!success]
> Same as `done` — check-check icon.

> [!example]
> An example callout.

plaintext

Note

A standard note callout.

Question

A question callout.

Info

An info callout.

Todo

A todo callout.

Fail

A fail/warning callout.

Done

Or use success — both map to a check icon.

Success

Same as done — check icon.

Example

An example callout.

Separators#

If you have the habit of writing separators, you can start a new line and enter three dashes --- or asterisks ***. Leave a blank line before and after when there are paragraphs:

---

markdown

Preview:

Advanced Techniques#

Inline HTML Elements#

Currently, only some inline HTML elements are supported, including <kdb> , such as

Key Display#

Use <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd> to reboot the computer

markdown

Preview:

Use Ctrl + Alt + Del to reboot the computer

Bold Italics#

<b> Markdown also applies here, such as _bold_ </b>

markdown

Preview:

Markdown also applies here, such as bold

Other HTML Writing#

Foldable Blocks#

<details><summary>Click to expand</summary>It is hidden</details>

markdown

Preview:

Click to expand

It is hidden

Tables#

| Header1  | Header2  |
| -------- | -------- |
| Content1 | Content2 |

markdown

Preview:

Header1	Header2
Content1	Content2

Footnotes#

Use [^footnote] to add a footnote at the point of reference.

Then, at the end of the document, add the content of the footnote (it will be rendered at the end of the article by default).

[^footnote]: Here is the content of the footnote

markdown

Preview:

Use ¹ to add a footnote at the point of reference.

Then, at the end of the document, add the content of the footnote (it will be rendered at the end of the article by default).

To-Do Lists#

- [ ] Incomplete task
- [x] Completed task

markdown

Preview:

Incomplete task
Completed task

Symbol Escaping#

If you need to use markdown symbols like _ # * in your description but don’t want them to be escaped, you can add a backslash before these symbols, such as \_ \# \* to avoid it.

\_Don't want the text here to be italic\_

\*\*Don't want the text here to be bold\*\*

markdown

Preview:

_Don’t want the text here to be italic_

**Don’t want the text here to be bold**

Mermaid Diagrams#


```mermaid

graph TD

A[Start] --> B{Is it working?}

B -->|Yes| C[Great!]

B -->|No| D[Debug]

D --> B

```

markdown

Preview:

graph TD

A[Start] --> B{Is it working?}

B -->|Yes| C[Great!]

B -->|No| D[Debug]

D --> B

Here is the content of the footnote ↩

Markdown Syntax Test

Basic Syntax#

Headers#

H1 — heading#

H2 — heading#

H3 — heading#

H4 — heading#

H5 - heading#

Paragraph#

Bold and Italics#

Strikethrough#

Links#

External links#

Internal links#

Link to heading#

Inline Code#

Code Blocks#

Inline Formula#

Formula Blocks#

Images#

External Image#

Internal Image#

Lists#

Regular unordered list#

Regular ordered list#

Blockquotes#

Callouts/Admonitions#

Separators#

Advanced Techniques#

Inline HTML Elements#

Key Display#

Bold Italics#

Other HTML Writing#

Foldable Blocks#

Tables#

Footnotes#

To-Do Lists#

Symbol Escaping#

Mermaid Diagrams#

Footnotes#