jerryc127 / hexo-theme-butterfly

🦋 A Hexo Theme: Butterfly
https://butterfly.js.org
Apache License 2.0
7.05k stars 1.27k forks source link

[Feature]: mermaid 写法可否调整与 Github 一致呢? #1228

Closed xiaoxuuu closed 1 year ago

xiaoxuuu commented 1 year ago

想要的功能 | What feature do you want?

由于本人是使用 Typora 编写 Markdown,发现流程图写法方面存在一些不同,导致编写的流程图只能本地博客二选一或者需要写两份代码不是很美观。

希望可以将 {% mermaid %} 写法调整为 ~~~mermaid 写法

Butterfly 的写法:

{% mermaid %}
graph LR
A --> B
{% endmermaid %}

Github 以及 Typora 所支持的写法:

~~~mermaid
graph LR
A --> B
~~~
allinu commented 1 year ago

目前也是卡在这里,希望开发人员能够把这个更改一下,毕竟许多的 markdown 是支持 mermaid 的,但是不支持这种语法,一般的网站博客,也是先自己做markdown笔记然后才分享吧,如果自己的本地笔记都无法显示,查看流程图需要打开网页就有点舍本求末了。希望考虑一下。@jerryc127

jerryc127 commented 1 year ago

markdown 并没有规定这种写法 各个软件的 mermaid 写法也会不同吧

lizilong1993 commented 1 year ago

想要的功能 | What feature do you want?

由于本人是使用 Typora 编写 Markdown,发现流程图写法方面存在一些不同,导致编写的流程图只能本地博客二选一或者需要写两份代码不是很美观。

希望可以将 {% mermaid %} 写法调整为 ~~~mermaid 写法

Butterfly 的写法:

{% mermaid %}
graph LR
A --> B
{% endmermaid %}

Github 以及 Typora 所支持的写法:

~~~mermaid
graph LR
A --> B
~~~

这种写法好像是hexo默认的,要改的话有点难度,typora支持这种写法,但是有的markdown编辑器不支持,例如vsc。我目前的方案是把mermaid转成图片,这样就能保持一致性了,但是也只是无奈之举。

mofan212 commented 1 year ago

试试 hexo-filter-mermaid-diagrams 插件? 但这玩意的作者没维护了,我在使用过程中遇到俩 BUG:

  1. 尖括号解析有问题
  2. 绘制时序图时如果消息上没有任何内容,会解析报错
github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

learnerLj commented 1 year ago

markdown 并没有规定这种写法 各个软件的 mermaid 写法也会不同吧

但是好像这是比较通用的拓展语法。

ZoeBezos commented 1 year ago

同求,今天也遇到这问题啦

zhuansun commented 1 year ago

butterfly是支持的呀,我就是typora编辑,hexo+butterfly部署的。mermaid可以正常显示。

我的配置方式:

1、先安装:npm install hexo-filter-mermaid-diagrams --save
2、在butterfly中开启mermaid
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark
3、在typora中使用如下语法
```mermaid
sequenceDiagram
前端->>前端: 用户首次打开前端页面
前端->>后台: version : 0 <br/> 请求同步数据
后台->>前端: 返回数据,同时携带最大的version
note right of 后台: 返回数据结构:{"version":100, data:[{},{},{}]}
github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.