[Bug]: 使用代码块渲染mermaid时，需要在代码块外额外加上一句{% mermaid %} {% endmermaid %}才能正常渲染

[ryouji]

使用的 Butterfly 版本？ | What version of Butterfly are you use?

4.13.0

是否修改过主题文件？ || Has the theme files been modified?

是 (Yes)

使用的瀏覽器？ || What browse are you using?

Chrome

使用的系統？ || What operating system are you using?

Windows

依賴插件 | Package dependencies Information

PS F:\Projects\testBlog> npm ls --depth 0
hexo-site@0.0.0 F:\Projects\testBlog
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-tag@2.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.3.0
├── hexo-renderer-pug@3.0.0
├── hexo-renderer-stylus@3.0.1
├── hexo-server@3.0.0
├── hexo-theme-landscape@1.0.0
└── hexo@7.2.0

問題描述 | Describe the bug

当使用代码块中嵌入的mermaid代码时，流程图无法被正常渲染，只会显示纯代码块。

但如果在代码块前加上以下语句，代码块中嵌入的mermaid代码又能正常运行。
{% mermaid %}
{% endmermaid %}

bug复现步骤如下：

1. mkdir testBlog && cd testBlog
2. hexo init
3. git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
4. npm install hexo-renderer-pug hexo-renderer-stylus
5. modify root _config： theme: butterfly
6. modify root _config:

syntax_highlighter: 'highlight.js'
highlight:
  # enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
  exclude_languages: ['mermaid']
prismjs:
  # enable: false
  preprocess: true
  line_number: true
  tab_replace: ''
  exclude_languages: ['mermaid']

7. modify butterfly _config:

mermaid:
  enable: true
  code_write: true

8. create test file

---
title: Hello World
---

# 为了避免 github 自动将该mermaid转换为图像，这里用括号打断解析
(```)mermaid
classDiagram

direction TD

class IBelongToArchitecture {
    <<interface>>
    - GetArchitecture()* IArchitecture
}

ICanInit --|> IBelongToArchitecture
class ICanInit {
    <<interface>>
    - Initialized: bool
    - Init()* void
    - Deinit()* void
}
(```)

9. hexo server

mermaid 无法正常显示。

10. add {% mermaid %}{% endmermaid %}

---
title: Hello World
---

{% mermaid %}
{% endmermaid %}

# 为了避免 github 自动将该mermaid转换为图像，这里用括号打断解析
(```)mermaid
classDiagram

direction TD

class IBelongToArchitecture {
    <<interface>>
    - GetArchitecture()* IArchitecture
}

ICanInit --|> IBelongToArchitecture
class ICanInit {
    <<interface>>
    - Initialized: bool
    - Init()* void
    - Deinit()* void
}
(```)

11. hexo server

mermaid正常显示。

出現問題網站 | Website

没有网站

[Jerry Wong]

没有复现你的问题
你可以 f12 看下有没有报错

---

假设有问题
你这个代码按道理不会出结果

[ryouji]

testBlog.zip

您好，这是我的测试工程

[Jerry Wong]

...
目前测试版支持
还没推正式版