Markdown ที่เราสามารถเขียนได้ใน .md

Header Anchors

# Using custom anchors {#my-anchor}

TODO header anchors

Links

• ลิงค์ไปหน้าหน้าอื่นๆใน vitepress

ตัวอย่างโค้ด

[ลิงค์ไปหน้าหน้าอื่นๆใน vitepress](/courses/vitepress/writing/asset-handling)

• ลิงค์ไปยังลิงค์ด้านนอก

ตัวอย่างโค้ด

[ลิงค์ไปยังลิงค์ด้านนอก](https://www.youtube.com/watch?v=techmgGVOhk)

Frontmatter

กำหนดไว้ที่ด้านบนสุดท้าย .md

---
title: Blogging Like a Hacker
lang: en-US
---

Usage

{{ $frontmatter.title }}

Output

Blogging Like a Hacker

Tables

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

ตัวอย่างโค้ด

| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

Emoji

• markdown-it emoji

🎉 💯

ตัวอย่างโค้ด

:tada: :100:

• emoji ทั่วไป

🧳🌂☂️🧵🪡🪢🪭🧶👓🕶🥽🥼🦺👔👕👖🧣🧤🧥

ตัวอย่างโค้ด

🧳🌂☂️🧵🪡🪢🪭🧶👓🕶🥽🥼🦺👔👕👖🧣🧤🧥

Table of Contents

• Header Anchors
• Links
• Frontmatter
• Tables
• Emoji
• Table of Contents
• Custom Containers
• GitHub-flavored Alerts
• Syntax Highlighting in Code Blocks
• Line Highlighting in Code Blocks
• Focus in Code Blocks
• Colored Diffs in Code Blocks
• Errors and Warnings in Code Blocks
• Line Numbers
• Import Code Snippets
• Code Groups
• Markdown File Inclusion
• Math Equations
• config.mjs, config.mts

ตัวอย่างโค้ด

[[toc]]

Custom Containers

GitHub-flavored Alerts

NOTE

Highlights information that users should take into account, even when skimming.

TIP

Optional information to help a user be more successful.

IMPORTANT

Crucial information necessary for users to succeed.

WARNING

Critical content demanding immediate user attention due to potential risks.

CAUTION

Negative potential consequences of an action.

ตัวอย่างโค้ด

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Syntax Highlighting in Code Blocks

<ul> 
	<li v-for="todo in todos" :key="todo.id"> {{ todo.text }
	</li> 
</ul>

ตัวอย่างโค้ด

```html
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
```

Line Highlighting in Code Blocks

• บรรทัดเดียว

export default { 
	data () { 
		return { 
			msg: 'Highlighted!' 
		} 
	} 
}

ตัวอย่างโค้ด

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

• หลายบรรทัด

export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}

ตัวอย่างโค้ด

```js{1,4,6-8}
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}
```

Focus in Code Blocks

export default {
	data() {
		return {
			msg: "Focused!", 
		};
	},
};

ตัวอย่างโค้ด

```js
export default {
  data () {
    return {
      msg: 'Focused!'
    }
  }
}
```

Colored Diffs in Code Blocks

export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}

ตัวอย่างโค้ด

``js
export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}
```

Errors and Warnings in Code Blocks

export default {
	data() {
		return {
			msg: "Error", 
			msg: "Warning", 
		};
	},
};

ตัวอย่างโค้ด

``js
export default {
  data () {
    return {
      msg: 'Error',
      msg: 'Warning'
    }
  }
}
```

Line Numbers

สามารถตั้งค่า line number ที่ vitepress/config.mts ได้

config,mts

export default {
	data() {
		return {
			msg: "Highlighted!",
		};
	},
};

// line-numbers is disabled by default
const line2 = "This is line 2";
const line3 = "This is line 3";

// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'

// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'

ตัวอย่างโค้ด

```ts {1}
// line-numbers is disabled by default
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers {1}
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers=2 {1}
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```

Import Code Snippets

TODO import code snippet

ตัวอย่างโค้ด

[ลิงค์ไปยังลิงค์ด้านนอก](https://www.youtube.com/watch?v=techmgGVOhk)

Code Groups

config.js

/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
	// ...
};

export default config;

config.ts

import type { UserConfig } from "vitepress";

const config: UserConfig = {
	// ...
};

export default config;

TODO codegroup

ตัวอย่างโค้ด

Markdown File Inclusion

นำเข้า Markdown จากไฟล์อื่นเข้ามาได้ เช่นจากตัวอย่าง เรานำเข้า frontmatter.md เข้ามาไฟล์ไฟล์ markdown-extensions.md

นำเข้าทั้งไฟล์

Input

color.md

Hello

<!--@include: ./color-list.md-->

color-list.md

- black
- orange
- pink
- blue

Output

Hello

• black
• orange
• pink
• blue

นำเข้าเฉพาะบรรทัดที่กำหนด

Input

color.md

Hello

<!--@include: ./color-list.md{2,}-->

color-list.md

- black
- orange
- pink
- blue

Output

Hello

• orange
• pink
• blue

Math Equations

When $a\ne 0$, there are two solutions to $(a{x}^2+bx+c=0)$ and they are

$$x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$$

Maxwell's equations:

equation	description
$\mathrm{\nabla }\cdot \overrightarrow{\mathbf{B}}=0$	divergence of $\overrightarrow{\mathbf{B}}$ is zero
$\mathrm{\nabla }\times \overrightarrow{\mathbf{E}}+\frac{1}{c}\frac{\partial \overrightarrow{\mathbf{B}}}{\partial t}=\overrightarrow{\mathbf{0}}$	curl of $\overrightarrow{\mathbf{E}}$ is proportional to the rate of change of $\overrightarrow{\mathbf{B}}$
$\mathrm{\nabla }\times \overrightarrow{\mathbf{B}}-\frac{1}{c}\frac{\partial \overrightarrow{\mathbf{E}}}{\partial t}=\frac{4\pi }{c}\overrightarrow{\mathbf{j}}\mathrm{\nabla }\cdot \overrightarrow{\mathbf{E}}=4\pi \rho$	wha?

ตัวอย่างโค้ด

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

**Maxwell's equations:**

| equation                                                                                                                                                                  | description                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| $\nabla \cdot \vec{\mathbf{B}}  = 0$                                                                                                                                      | divergence of $\vec{\mathbf{B}}$ is zero                                               |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t}  = \vec{\mathbf{0}}$                                                          | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_                                                                                 |

config.mjs, config.mts

Image Lazy Loading

config.mjs, config.mts

export default {
	markdown: {
		image: {
			// image lazy loading is disabled by default
			lazyLoading: true,
		},
	},
};

Advanced Configuration

config.mjs, config.mts

import markdownItAnchor from "markdown-it-anchor";
import markdownItFoo from "markdown-it-foo";
import { defineConfig } from "vitepress";

export default defineConfig({
	markdown: {
		// options for markdown-it-anchor
		// https://github.com/valeriangalliat/markdown-it-anchor#usage
		anchor: {
			permalink: markdownItAnchor.permalink.headerLink(),
		},

		// options for @mdit-vue/plugin-toc
		// https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
		toc: { level: [1, 2] },

		config: (md) => {
			// use more markdown-it plugins!
			md.use(markdownItFoo);
		},
	},
});