Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
soryu-ryouji opened this issue May 14, 2024 · 3 comments

Comments

@soryu-ryouji
Copy link

使用的 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']
  1. modify butterfly _config:
mermaid:
  enable: true
  code_write: true
  1. 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
}
(```)
  1. hexo server

mermaid 无法正常显示。

image

image

  1. 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
}
(```)
  1. hexo server

mermaid正常显示。
image

image

出現問題網站 | Website

没有网站

@jerryc127
Copy link
Owner

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


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

@soryu-ryouji
Copy link
Author

testBlog.zip

您好,这是我的测试工程

@jerryc127
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants