如何同时使用 codehilite 和美人鱼？答案

【问题标题】：How can I use codehilite and mermaid together?如何同时使用 codehilite 和美人鱼？
【发布时间】：2020-06-11 20:28:51
【问题描述】：

我们使用带有材料主题的 mkdocs 生成文档，直到现在一直使用 codehilite 扩展。我现在使用此处描述的方法添加了美人鱼：https://github.com/squidfunk/mkdocs-material/issues/693

首先，我的降价：

# Examples

## Mermaid
```mermaid
graph LR
    a[Start] -- b[(Storage)]-->d[End]
```
## Code

```
#!/usr/bin/python
import tensorflow as tf
```

我的 mkdocs.yml：

# Project information
site_name: Test
site_description: 'Mermaid with CodeHiLite'

theme:
   name: material
   feature:
      tabs: false

extra_javascript:
   - 'custom_content/mermaid.min.js'

markdown_extensions:
   - codehilite

在此配置中，美人鱼代码不会呈现为图表，但代码会突出显示语法。

如果我扩展我的 mkdocs.yml 以添加这样的美人鱼：

# Project information
site_name: Test
site_description: 'Mermaid with CodeHiLite'
theme:
   name: material
   feature:
      tabs: false

extra_javascript:
   - 'custom_content/mermaid.min.js'

markdown_extensions:
   - codehilite
   - pymdownx.superfences:
       custom_fences:
         - name: mermaid
           class: mermaid
           format: !!python/name:pymdownx.superfences.fence_div_format

然后美人鱼图正确呈现，但代码未突出显示语法。

如果我更改降价以将语言添加到代码块中

``` python
#!/usr/bin/python
import tensorflow as tf
```

那么代码和图表都会正确呈现。我遇到的问题是现有文档没有指定语言，直到现在它才有效。

任何想法如何让这两个扩展更好地协同工作？还是我只需要告诉开发人员更新他们的降价？

【问题讨论】：

标签： mkdocs mermaid

【解决方案1】：

对于将美人鱼图集成到 mkdocs 中的预打包解决方案，现在有 mkdocs-mermaid2 插件，我正在维护。

对于代码高亮，它还包含一个如何使用superfences 插件的示例。

如果需要 pass arguments 到美人鱼渲染器的 initialize() 方法来调整图表的外观，它可能特别有用。

【讨论】：