代码块

显示行号

在元数据处加上 showLineNumbers 即可：

markdown 写法
效果

```go showLineNumbers
package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}
```

package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

显示文件名

在元数据处加上 title="xxx":

markdown 写法
效果

```go title="main.go"
package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}
```

main.go
package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

高亮行

docusaurus 配置

docusaurus.config.js
src/css/custom.scss

      prism: {
        theme: require('prism-react-renderer/themes/vsDark'),
        magicComments: [
          {
            className: 'code-block-highlighted-line',
            line: 'highlight-next-line',
            block: { start: 'highlight-start', end: 'highlight-end' }
          },
          {
            className: 'code-block-add-line',
            line: 'highlight-add-line',
            block: { start: 'highlight-add-start', end: 'highlight-add-end' }
          },
          {
            className: 'code-block-update-line',
            line: 'highlight-update-line',
            block: { start: 'highlight-update-start', end: 'highlight-update-end' }
          },
          {
            className: 'code-block-error-line',
            line: 'highlight-error-line',
            block: { start: 'highlight-error-start', end: 'highlight-error-end' }
          },
        ],
        // languages enabled by default: https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L9-L23
        // prism supported languages: https://prismjs.com/#supported-languages
        additionalLanguages: [
          'java',
          'json',
          'hcl',
        ],
      }

.code-block-highlighted-line {
  background-color: rgb(72, 77, 91);
  span[class*='codeLineNumber'] {
    background-color: rgb(72, 77, 91);
  }
}
.code-block-add-line {
  background-color: #213227;
  span[class*='codeLineNumber'] {
    background-color: #213227;
  }
}
.code-block-update-line {
  background-color: #362d1e;
  span[class*='codeLineNumber'] {
    background-color: #362d1e;
  }
}
.code-block-error-line {
  background-color: #ff000020;
  span[class*='codeLineNumber'] {
    background-color: #ff000020;
  }
}

高亮单行

使用 highlight-next-line 注释：

markdown 写法
效果

```go showLineNumbers
package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    // highlight-next-line
    fmt.Println("hello world", i)
  }
}
```

package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

高亮多行

使用 highlight-start 和 highlight-end 注释：

markdown 写法
效果

```go showLineNumbers
package main

import (
  "fmt"
)

func main() {
  // highlight-start
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
  // highlight-end
}
```

package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

在元数据中指定高亮的行

在元数据处加上要高亮的指定行号：

markdown 写法
效果

```go showLineNumbers {4,8-10}
package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}
```

package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

高亮单行(新增样式)

使用 highlight-add-line 注释：

markdown 写法
效果

```go showLineNumbers
package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    // highlight-add-line
    fmt.Println("hello world", i)
  }
}
```

package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

高亮多行(新增样式)

使用 highlight-add-start 和 highlight-add-end 注释：

markdown 写法
效果

```go showLineNumbers
package main

import (
  "fmt"
)

func main() {
  // highlight-add-start
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
  // highlight-add-end
}
```

package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

高亮单行(修改样式)

使用 highlight-update-line 注释：

markdown 写法
效果

```go showLineNumbers
package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    // highlight-update-line
    fmt.Println("hello world", i)
  }
}
```

package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

高亮多行(修改样式)

使用 highlight-update-start 和 highlight-update-end 注释：

markdown 写法
效果

```go showLineNumbers
package main

import (
  "fmt"
)

func main() {
  // highlight-update-start
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
  // highlight-update-end
}
```

package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

高亮单行(错误样式)

使用 highlight-error-line 注释：

markdown 写法
效果

```go showLineNumbers
package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    // highlight-error-line
    fmt.Println("hello world", i)
  }
}
```

package main

import (
  "fmt"
)

func main() {
  for i := 0; i < 10; i++ {
    fmt.Println("hello world", i)
  }
}

多语言

inline 写法

markdown 写法
效果

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="js" label="JavaScript">

  ```js
  function helloWorld() {
    console.log('Hello, world!');
  }
  ```

  </TabItem>
  <TabItem value="py" label="Python">
  
  ```py
  def hello_world():
    print("Hello, world!")
  ```
  
  </TabItem>
  <TabItem value="java" label="Java">
  
  ```java
  class HelloWorld {
    public static void main(String args[]) {
      System.out.println("Hello, World");
    }
  }
  ```
  
  </TabItem>
</Tabs>

JavaScript
Python
Java

function helloWorld() {
  console.log('Hello, world!');
}

def hello_world():
  print("Hello, world!")

class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}

FileBlock 写法

markdown 写法
效果

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import FileBlock from '@site/src/components/FileBlock';

<Tabs>
  <TabItem value="js" label="JavaScript">
    <FileBlock file="demo/hello.js" />
  </TabItem>

  <TabItem value="py" label="Python">
    <FileBlock file="demo/hello.py" />
  </TabItem>

  <TabItem value="java" label="Java">
    <FileBlock file="demo/hello.java" />
  </TabItem>
</Tabs>

JavaScript
Python
Java

function helloWorld() {
  console.log('Hello, world!');
}

def hello_world():
  print("Hello, world!")

class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}

信息

FileBlock 是我自己实现的标签组件，详见这里

代码高亮支持更多的语言

docusaurus 使用 prism 来对不同的语言进行语法高亮，这里是默认支持的语言列表，如果需要启用更多语言的支持，可以在 docusaurus.config.js 中配置下 additionalLanguages（点这里查看 prism 支持的所有语言的列表）:

      prism: {
        // prism supported languages: https://prismjs.com/#supported-languages
        additionalLanguages: [
          'java',
          'json',
          'hcl',
          'docker',
          'bash',
          'diff',
          'scss',
          'lua',
          'makefile',
          'ignore',
        ],
        ...
      }

提示

建议是按需启用，可尽量减少站点依赖的 js 文件体积。

参考资料

Docusaurus Code blocks

显示行号​

显示文件名​

高亮行​

docusaurus 配置​

高亮单行​

高亮多行​

在元数据中指定高亮的行​

高亮单行(新增样式)​

高亮多行(新增样式)​

高亮单行(修改样式)​

高亮多行(修改样式)​

高亮单行(错误样式)​

多语言​

inline 写法​

FileBlock 写法​

代码高亮支持更多的语言​

参考资料​