在 Markdown 中更改美人鱼主题答案

【问题标题】：Change Mermaid theme in markdown在 Markdown 中更改美人鱼主题
【发布时间】：2018-09-07 04:29:36
【问题描述】：

除了代码之外，我在 Markdown 文档中使用 mermaid 进行基本图表渲染。我发现 this online editor 在预览时编辑它很有用。这建议更改主题（default 和 forest 作品）。

当我将它复制粘贴到我的 Markdown 文档中时，如何设置主题？

【问题讨论】：

【解决方案1】：

我一直在找和你一样的，所以在Mermaid source code查看和挖掘后可以找到这些代码sn-p：

for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
  themes[themeName] = require(`./themes/${themeName}/index.scss`)
}

因此，在他们的编辑器中测试后，这些主题运行良好：

默认
森林
黑暗
中性

如果您想构建自定义主题，可以在此处找到他们的主题： https://github.com/knsv/mermaid/tree/master/src/themes

如果你去Mermaid online editor，你可以把主题改成上面提到的那些：

【讨论】：

对于挖掘的问题仍然不完全回答。
这是我用谷歌搜索“美人鱼 js 主题”的问题的答案，谢谢。

【解决方案2】：

可以使用directive 为每个图更改 Markdown 文档中的主题。

这是一个示例（使用 Mkdocs 的材料测试）：

This graph uses the forest theme:

``` mermaid
%%{init: {'theme': 'forest', "flowchart" : { "curve" : "basis" } } }%%
graph LR
A[Foo] --> B[Bar]
B --> A
```

That one uses the neutral theme:

``` mermaid
%%{init: {'theme': 'neutral' } }%%
graph LR
A[Foo] --> B[Bar]
B --> C[Baz]
```

结果将是：

【讨论】：

很好。有没有办法一次修改所有图表？
是的，但在mkdocs.yml，请参阅其他帖子。您也可以设置一个 jinja 变量并将其注入 mermaid sn-p。
感谢您的回答。您知道 mkdocs 参数的外观吗？抱歉，我还没有找到任何信息。其他帖子似乎指的是旧的美人鱼版本。
像这样：将- mermaid2替换为- mermaid2:\n arguments:\n theme: 'forest'\n flowchart: { curve: 'basis' }（同时保留缩进并用回车替换每个\n。
不幸的是，这在我使用 markdown 的 azure devops 中不起作用

【解决方案3】：

据我所知，设置主题的唯一机会是在初始化时：

 mermaid.initialize({
      theme: 'forest',
      logLevel: 1,
      flowchart: { curve: 'linear' },
    });

【讨论】：

【解决方案4】：

渲染SVG时嵌入了主题，目前使用markdown时似乎不支持自定义主题设置。

【讨论】：

可悲的是，这似乎是这种情况，默认主题是所有可用主题中最丑陋的。
@phifi: 在stackoverflow.com/a/57274389/6419007 下查看我的评论我使用带有 Markdown 的最后一个美人鱼版本，并且可以选择主题（“中性”非常适合我们 MkDocs 材料文档的其余部分）

【解决方案5】：

不知道你用什么来生成 Markdown 的输出——我使用 MkDocs 和 Material，并添加了美人鱼支持，如 here 解释的那样。

经过一些试错配置后，我发现使用 Cloudflare 的 CDN，您可以将旧版本的 MermaidJS 包含在另一个 CSS 中。这样，我就能够使用中性样式渲染图表：

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

extra_css:
  - https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.9/mermaid.neutral.css
extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.9/mermaid.min.js

【讨论】：

我最终下载了最后一个版本（unpkg.com/mermaid@8.4.3/dist/mermaid.min.js），寻找theme:"default"，将其替换为theme:"forest"并将js保存在本地，例如到js/mermaid.min.js。它运行良好，我可以使用最新版本。

【解决方案6】：

如果您复制文档中详述的 stylesheet，对其进行修改并在您更改的每个 CSS 属性后添加 !important，它将优先于 Mermaid 复制到 SVG 中的内联样式。远非理想，但复制美人鱼的风格也不是，所以这是一个“以火攻毒”的解决方案。

【讨论】：

【解决方案7】：

你没有说你的工具链或目标输出格式是什么。

话虽如此，您可以使用 Pandoc 和 mermaid-filter 将包含美人鱼图表的 Markdown 文件导出为多种格式。

另外，通过美人鱼过滤器，您可以使用围栏代码块的键值属性选项来选择主题

例如让 /tmp/example.md 包含以下内容

```{.mermaid theme=forest}
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```

然后

pandoc --filter mermaid-filter --from markdown --to html /tmp/example.md > /tmp/example.html

将生成一个 HTML 页面 /tmp/example.html，如下所示

【讨论】：