Markdown 扩展测试

938
Test / Markdown

ヒント提示

More info see Markdown Extensions.

Emoji 🎉 ​

Input

:tada: :100:

Output

🎉 💯

A list of all emojis is available.

Table of Contents ​

Input

[[toc]]

Output

Rendering of the TOC can be configured using the markdown.toc option.

代码行高亮 ​

Input

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

Output

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

Input

md
```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'
```

Output

ts
// line-numbers is disabled by default
const line2 = 'This is line 2'
const line3 = 'This is line 3'
ts
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
ts
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'

Colored Diffs in Code Blocks ​

Adding the // [!code --] or // [!code ++] comments on a line will create a diff of that line, while keeping the colors of the codeblock.

Input

```js
export default {
  data () {
    return {
      msg: 'Removed' // [!code --]
      msg: 'Added' // [!code ++]
    }
  }
}
```

Output

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

Errors and Warnings in Code Blocks ​

Adding the // [!code warning] or // [!code error] comments on a line will color it accordingly.

Input

```js
export default {
  data () {
    return {
      msg: 'Error', // [!code error]
      msg: 'Warning'
    }
  }
}
```

Output

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

Import Code Snippets ​

You can import code snippets from existing files via following syntax:

md
<<< @/filepath

It also supports line highlighting:

md
<<< @/filepath{highlightLines}

Input

md
<<< @/snippets/snippet.js{2}

Code file

js
export default function () {
  // ..
}

Output

js
export default function () {
  // ..
}

ヒント提示

The value of @ corresponds to the source root. By default it’s the blog root, unless srcDir is configured. Alternatively, you can also import from relative paths:

md
<<< ../snippets/snippet.js

You can also use a VS Code region to only include the corresponding part of the code file. You can provide a custom region name after a # following the filepath:

Input

md
<<< @/snippets/snippet-with-region.js#snippet{1}

Code file

js
// #region snippet
function foo() {
  // ..
}
// #endregion snippet

export default foo

Output

js
function foo() {
  // ..
}

You can also specify the language inside the braces ({}) like this:

md
<<< @/snippets/snippet.cs{c#}

<!-- with line highlighting: -->

<<< @/snippets/snippet.cs{1,2,4-6 c#}

<!-- with line numbers: -->

<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}

This is helpful if source language cannot be inferred from your file extension.

Code Groups ​

You can group multiple code blocks like this:

Input

md
::: code-group

```js [config.js]
/**
 * @type {import('valaxy').UserConfig}
 */
const config = {
  // ...
}

export default config
```

```ts [config.ts]
import type { UserConfig } from 'valaxy'

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

export default config
```

:::

Output

js
/**
 * @type {import('valaxy').UserConfig}
 */
const config = {
  // ...
}

export default config
ts
import type { UserConfig } from 'valaxy'

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

export default config

You can also import snippets in code groups:

Input

md
::: code-group

<!-- filename is used as title by default -->

<<< @/snippets/snippet.js

<!-- you can provide a custom one too -->

<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]

:::

Output

js
export default function () {
  // ..
}
ts
function foo() {
  // ..
}

Container ​

通过对 markdownIt 进行配置，你可以自由设置自定义块区域的文字以及图标及图标的颜色。

By configuring markdownIt, you can set the text and icon (and its color) for custom block.

ヒント提示

tip

注意注意

warning

警告警告

danger

información信息

info

Click to expand

details

KaTeX ​

Input

md
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?_                                                                                 |

Output

When a≠0a \ne 0, there are two solutions to (ax2+bx+c=0)(ax^2 + bx + c = 0) and they are

x=−b±b2−4ac2ax = {-b \pm \sqrt{b^2-4ac} \over 2a}

Maxwell’s equations:

equationdescription
∇⋅B⃗=0\nabla \cdot \vec{\mathbf{B}} = 0divergence of B⃗\vec{\mathbf{B}}is zero
∇×E⃗ + 1c ∂B⃗∂t=0⃗\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}curl of E⃗\vec{\mathbf{E}}is proportional to the rate of change of B⃗\vec{\mathbf{B}}
∇×B⃗− 1c ∂E⃗∂t=4πcj⃗∇⋅E⃗=4πρ\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 \rhowha?
长目录测试
Mermaid