ヒント提示
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
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}Input
```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
// 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'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
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
export default {
data() {
return {
msg: 'Error',
msg: 'Warning'
}
}
}Import Code Snippets
You can import code snippets from existing files via following syntax:
<<< @/filepathIt also supports line highlighting:
<<< @/filepath{highlightLines}Input
<<< @/snippets/snippet.js{2}Code file
export default function () {
// ..
}Output
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:
<<< ../snippets/snippet.jsYou 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
<<< @/snippets/snippet-with-region.js#snippet{1}Code file
// #region snippet
function foo() {
// ..
}
// #endregion snippet
export default fooOutput
function foo() {
// ..
}You can also specify the language inside the braces ({}) like this:
<<< @/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
::: 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
/**
* @type {import('valaxy').UserConfig}
*/
const config = {
// ...
}
export default configimport type { UserConfig } from 'valaxy'
const config: UserConfig = {
// ...
}
export default configYou can also import snippets in code groups:
Input
::: 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
export default function () {
// ..
}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
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 , there are two solutions to and they are
Maxwell’s equations:
| equation | description |
|---|---|
| divergence of is zero | |
| curl of is proportional to the rate of change of | |
| wha? |
