代码

目录

1. 行内代码
2. 语法高亮代码块
3. 带渲染示例的代码块
4. Mermaid 图表代码块

行内代码

代码可通过用单个反引号封装实现行内渲染。

Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Heading with `<inline code snippet>` in it.

语法高亮代码块

通过使用三个反引号加语言名称可以使用 Jekyll 内建的 Rouge 语法高亮代码功能：

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}
```

带渲染示例的代码块

要演示前端代码，有时展示一个渲染的示例更有用。After including the styles from your project that you’ll need to show the rendering, you can use a <div> with the code-example class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the markdown="1" attribute to tell Jekyll that the code you are rendering will be in Markdown format… This is about to get meta…

[Link button](http://example.com/){: .btn }

<div class="code-example" markdown="1">

[Link button](http://example.com/){: .btn }

</div>
```markdown
[Link button](http://example.com/){: .btn }
```

Mermaid 图表代码块

Mermaid 允许您通过 Markdown 代码块添加图表和可视化。默认不支持。然而，您可以通过在 _config.yml 添加一个 mermaid 值使其支持 Mermaid。

最小配置需要一个 version 值（在 jsDelivr匹配版本）：

mermaid:
  # Version of mermaid library
  # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/
  version: "9.1.3"

更多配置选项加载可通过 _includes/mermaid_config.js 进行。默认情况下，文件内容是空对象：

// _includes/mermaid_config.js
{}

这将加载默认设置。

对象内容应遵循 Mermaid’s 配置 API。例如，覆盖主题，修改 _includes/mermaid_config.js 为：

// _includes/mermaid_config.js
{
  theme: "forest"
}

一旦 Mermaid 安装成功，就可以在 Markdown 文件中使用。用 Markdown 做一个简单的流程图示例应该像这样：

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

渲染为：

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

注记：基于演示原因，我们在此站点启用了 Mermaid。默认它还是关闭的，用户需要使用时还需要选择性开启。

Table of contents

• 带行标的代码