跳转至主内容
Version: 2.0.0-alpha.73

代码块

文档中的代码块超级厉害 💪。

代码标题#

您可以在语言后添加 title 键（在后面添加空格）来添加标题。

```jsx title="/src/components/HelloCodeTitle.js"function HelloCodeTitle(props) {  return <h1>你好，{props.name}</h1>;}```
/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {  return <h1>你好，{props.name}</h1>;}

语法高亮#

代码块是使用 3 个反引号包裹的文本块。 您可参阅 MDX 技术规范。

```jsxconsole.log('每个仓库都应该有个吉祥物。');```

在代码块中使用相应语言的标签，Docusaurus 将自动使用 Prism React Renderer 为您实现语法高亮。

console.log('每个仓库都应该有个吉祥物。');

我们默认使用的语法高亮主题是 Palenight。 您可以在 prism 传递 theme 字段，并放入 docusaurus.config.js 中的 themeConfig 来更改主题。

举个例子，如果您喜欢 dracula 高亮主题：

docusaurus.config.js
module.exports = {  themeConfig: {    prism: {      theme: require('prism-react-renderer/themes/dracula'),    },  },};

By default, Docusaurus comes with this subset of commonly used languages.

To add syntax highlighting for any of the other Prism supported languages, define it in an array of additional languages.

For example, if you want to add highlighting for the powershell language:

docusaurus.config.js
module.exports = {  // ...  themeConfig: {    prism: {      additionalLanguages: ['powershell'],    },    // ...  },};

If you want to add highlighting for languages not yet supported by Prism, you can swizzle prism-include-languages:

npm run swizzle @docusaurus/theme-classic prism-include-languages

It will produce prism-include-languages.js in your src/theme folder. You can add highlighting support for custom languages by editing prism-include-languages.js:

src/theme/prism-include-languages.js
const prismIncludeLanguages = (Prism) => {  // ...
  additionalLanguages.forEach((lang) => {    require(`prismjs/components/prism-${lang}`); // eslint-disable-line  });
  require('/path/to/your/prism-language-definition');
  // ...};

You can refer to Prism's official language definitions when you are writing your own language definitions.

行高亮#

You can bring emphasis to certain lines of code by specifying line ranges after the language meta string (leave a space after the language).

```jsx {3}function HighlightSomeText(highlight) {  if (highlight) {    return 'This text is highlighted!';  }
  return 'Nothing highlighted';}```
function HighlightSomeText(highlight) {  if (highlight) {    return '这句被高亮了！';  }
  return '这句没有';}

To accomplish this, Docusaurus adds the docusaurus-highlight-code-line class to the highlighted lines. You will need to define your own styling for this CSS, possibly in your src/css/custom.css with a custom background color which is dependent on your selected syntax highlighting theme. The color given below works for the default highlighting theme (Palenight), so if you are using another theme, you will have to tweak the color accordingly.

/src/css/custom.css
.docusaurus-highlight-code-line {  background-color: rgb(72, 77, 91);  display: block;  margin: 0 calc(-1 * var(--ifm-pre-padding));  padding: 0 var(--ifm-pre-padding);}
/* 若您在暗色模式中使用了不同的语法高亮主题。 */html[data-theme='dark'] .docusaurus-highlight-code-line {  background-color: ; /* Color which works with dark mode syntax highlighting theme */}

To highlight multiple lines, separate the line numbers by commas or use the range syntax to select a chunk of lines. This feature uses the parse-number-range library and you can find more syntax on their project details.

```jsx {1,4-6,11}import React from 'react';
function MyComponent(props) {  if (props.isBar) {    return <div>Bar</div>;  }
  return <div>Foo</div>;}
export default MyComponent;```
import React from 'react';
function MyComponent(props) {  if (props.isBar) {    return <div>Bar</div>;  }
  return <div>Foo</div>;}
export default MyComponent;

You can also use comments with highlight-next-line, highlight-start, and highlight-end to select which lines are highlighted.

```jsxfunction HighlightSomeText(highlight) {  if (highlight) {    // highlight-next-line    return 'This text is highlighted!';  }
  return 'Nothing highlighted';}
function HighlightMoreText(highlight) {  // highlight-start  if (highlight) {    return 'This range is highlighted!';  }  // highlight-end
  return 'Nothing highlighted';}```
function HighlightSomeText(highlight) {  if (highlight) {    return '这行被高亮了！';  }
  return '这里不会';}
function HighlightMoreText(highlight) {  if (highlight) {    return '这片区域被高亮了！';  }
  return '这里不会';}

Supported commenting syntax:

语言语法
JavaScript/* ... */ 及 // ...
JSX{/* ... */}
Python# ...
HTML<!-- ... -->

If there's a syntax that is not currently supported, we are open to adding them! Pull requests welcome.

交互式代码编辑器#

(Powered by React Live)

You can create an interactive coding editor with the @docusaurus/theme-live-codeblock plugin.

First, add the plugin to your package.

npm install --save @docusaurus/theme-live-codeblock

You will also need to add the plugin to your docusaurus.config.js.

module.exports = {  // ...  themes: ['@docusaurus/theme-live-codeblock'],  // ...};

To use the plugin, create a code block with live attached to the language meta string.

```jsx livefunction Clock(props) {  const [date, setDate] = useState(new Date());  useEffect(() => {    var timerID = setInterval(() => tick(), 1000);
    return function cleanup() {      clearInterval(timerID);    };  });
  function tick() {    setDate(new Date());  }
  return (    <div>      <h2>It is {date.toLocaleTimeString()}.</h2>    </div>  );}```

The code block will be rendered as an interactive editor. Changes to the code will reflect on the result panel live.

实时编辑器
结果
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

导入#

react-live and imports

It is not possible to import components directly from the react-live code editor, you have to define available imports upfront.

By default, all React imports are available. If you need more imports available, swizzle the react-live scope:

npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope
src/theme/ReactLiveScope/index.js
import React from 'react';
const ButtonExample = (props) => (  <button    {...props}    style={{      backgroundColor: 'white',      border: 'solid red',      borderRadius: 20,      padding: 10,      cursor: 'pointer',      ...props.style,    }}  />);
// 在此处添加您需要的 react-live 导入const ReactLiveScope = {  React,  ...React,  ButtonExample,};
export default ReactLiveScope;

The ButtonExample component is now available to use:

实时编辑器
结果
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

支持多语言的代码块#

With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switching between them using a tabs component.

Instead of implementing a dedicated component for multi-language support code blocks, we've implemented a generic Tabs component in the classic theme so that you can use it for other non-code scenarios as well.

The following example is how you can have multi-language code tabs in your docs. Note that the empty lines above and below each language block is intentional. This is a current limitation of MDX, you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX.

import Tabs from '@theme/Tabs';import TabItem from '@theme/TabItem';
<Tabs  defaultValue="js"  values={[    { label: 'JavaScript', value: 'js', },    { label: 'Python', value: 'py', },    { label: 'Java', value: 'java', },  ]}><TabItem value="js">
```jsfunction helloWorld() {  console.log('Hello, world!');}```
</TabItem><TabItem value="py">
```pydef hello_world():  print 'Hello, world!'```
</TabItem><TabItem value="java">
```javaclass HelloWorld {  public static void main(String args[]) {    System.out.println("Hello, World");  }}```
</TabItem></Tabs>

And you will get the following:

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

You may want to implement your own <MultiLanguageCode /> abstraction if you find the above approach too verbose. We might just implement one in future for convenience.

If you have multiple of these multi-language code tabs, and you want to sync the selection across the tab instances, refer to the Syncing tab choices section.