search

Tencent / cherry-markdown

✨ A Markdown Editor
Other
3.49k stars 410 forks source link

[Docs] 请问怎么增加/修改 Prism渲染的代码语言种类和样式？ #762

Closed foxfire881 closed 1 month ago

foxfire881 commented 4 months ago

Prerequisites

Issue Type

Question

Description of the Problem or Idea

Prism官方提供了数百种编程语言种类的渲染，但是cherry好像只提供了其中20多种常用的，其他的例如 asm汇编语言、nginx配置文件、properties配置文件…… 很多都没有，请问要怎么增加代码语言种类？还有prism相关的风格样式如何增加/修改？

另外顺便提个建议，希望在编写markdown时输入 ``` 标记后可以自动弹窗提供编程语言种类的选择，其他很多md编辑器都有这功能了，希望cherry也补上。

Further Information

No response

Contributing

None

sunsonliu commented 4 months ago

感谢反馈，因为cherry会把prism构建到自己的包里，为了压缩包的大小，所以我们只引入了常用的几种语言。目前还没有机制去动态修改/配置 prism，临时解决方案可以通过 配置自定义代码块语法 来曲线救国，大概思路：

  1. 定义一堆自定义语言（如asm、nginx），让他们渲染出特定class的代码块
  2. 在自身业务里引入一个“完全体”的prism，并让它高亮特定class的代码块

针对第二个问题，确实是一个非常棒的建议，我们想象怎么支持哈（目前是在右侧预览区域支持了，见下图） image image

foxfire881 commented 4 months ago

可以参考一下 muya，这个项目已经实现了所见即所得和提示选择代码语言的功能，但是它开发太慢了，等了几年还没有能用的正式版放出来，所以准备转cherry了。之前一直用的是vditor，也有自动提示代码语言和所见即所得的功能，但是它的代码太乱bug太多，所以想换了。cherry看着比较干净，大厂出品质量也有保证点。

关于prism，感觉当前在预览框选择切换代码类型的功能有点鸡肋，因为贴出来的每段代码只可能有1种类型，没必要转来转去，如果类型不对重新编辑源文件修改类型就行了，也没必要转来转去，弄个下拉框在那里反而显得有点碍事，可以改成文本直接显示代码类型就行了。

另外，建议把prism的整合弄成像mermaid那样的，正常构建不包含，需要时让用户自己选择导入需要的模块和配置，把选择权交给用户，这样就方便多了。像我们主要时内网使用，速度够快，不在乎那点代码量和流量，更关注的是功能是否满足需求。

谢谢~

感谢反馈，因为cherry会把prism构建到自己的包里，为了压缩包的大小，所以我们只引入了常用的几种语言。目前还没有机制去动态修改/配置 prism，临时解决方案可以通过 配置自定义代码块语法 来曲线救国，大概思路：

  1. 定义一堆自定义语言（如asm、nginx），让他们渲染出特定class的代码块
  2. 在自身业务里引入一个“完全体”的prism，并让它高亮特定class的代码块

针对第二个问题，确实是一个非常棒的建议，我们想象怎么支持哈（目前是在右侧预览区域支持了，见下图）

foxfire881 commented 4 months ago

刚想起来，那个下拉框可以修改成切换这段代码的css风格样式(prism有多种css主题可以选择)，旁边再用静态文本展示当前代码的语言种类，这样比较合理点。

另外再问下prism自定义模块配置的开发优先级可以提高一些吗？我们日常工作主要是编写一些配置文档、命令、代码，对不同种类code block的渲染需求比较多，那些流程图、时序图之类的使用较少（个人认为markdown中这类富文本组件用多了会引入很多不必要代码和分词，影响搜索结果准确性），当下正在寻找vditor的替代品，如果我们自行修改cherry源码做二开的话，一来不熟悉代码效率比较低，二来等后续主线版本更新了又要再重新维护一遍比较麻烦，最好是能集成在官方主线版本里，越早越好，这样我们可以尽快切换到cherry。谢谢~

sunsonliu commented 3 months ago

额，要不先把你们常用的语言列一下，我们先无脑把他们包到cherry里，现快速满足你们的使用要求。后面我们再排期弄个包含prism完整模块的cherry版本出来

或者你们也可以自行修改prism的语言（然后构建一个版本自己用），然后PR给我们，这样就不担心无法更新cherry版本的情况了，在这里修改prism的语言配置

另外，关于切换代码块的主题，目前该功能也是支持的哈，在顶部工具栏里，如下图： image 配置方式如下图： image

foxfire881 commented 2 months ago

额，要不先把你们常用的语言列一下，我们先无脑把他们包到cherry里，现快速满足你们的使用要求。后面我们再排期弄个包含prism完整模块的cherry版本出来

或者你们也可以自行修改prism的语言（然后构建一个版本自己用），然后PR给我们，这样就不担心无法更新cherry版本的情况了，在这里修改prism的语言配置

大佬，我收集整理了下我们单位内部可能会需要用的一些prism语法高亮和prism插件，麻烦看看能否无脑整合进cherry？后续再持续迭代，完善开放自定义配置项出来。谢谢额~

https://prismjs.com/

语法高亮：

插件

sunsonliu commented 2 months ago

已补上这些语言，提交到dev分支了

foxfire881 commented 2 months ago

已补上这些语言，提交到dev分支了

优秀

sunsonliu commented 1 month ago

已发布