Markdown编辑器的样式与文档发布

标题: Markdown编辑器的样式与文档发布
作者: 梦幻之心星   sky-seeker@qq.com 
标签: [Markdown, 编辑器]
目录: [软件]
日期: 2020-06-4

前提说明

• 在使用Markdown进行文字编辑后发布在博客或者公众号时，有时需要对样式进行自定义。
• 目前的编辑器主要提供了三种方式：在线编辑后复制，离线编辑后复制，一键样式转换。
• 尝试了几个编辑器，各有优势。

编辑器说明

Md2All

• 在线编辑后复制
• 提供主题选择；样式自定义；代码主题选择；代码行数显示
• 自定义的CSS样式所用的标签与网页一致，会影响编辑界面样式

Markdown Nice

• 在线编辑后复制；一键样式转换
• 提供主题选择；样式自定义；代码主题选择；部分代码主题提供代码行数显示
• 自定义的CSS样式所用的标签通过#nice前缀修饰，不会影响编辑界面样式
• 所使用的.prefix和.suffix标签在其他编辑器的自定义样式中无法使用

Markdown Here

• 一键样式转换
• 提供CSS样式自定义；代码主题选择；代码语法高亮CSS样式自定义，不支持行数显示
• 自定义的CSS样式所用的标签与网页一致
• 不支持before和after修饰
• 不支持画图

Typora

• 离线编辑后复制
• 提供主题选择；样式自定义；代码行数显示
• 自定义的CSS样式所用的标签与网页一致，会影响编辑界面样式
• 支持画图：流程图；时序图；甘特图

Yu Writer

• 离线编辑后复制
• 付费后提供主题选择；不支持样式自定义；不提供代码行数显示

MarkEditor

• 离线编辑后复制
• 提供CSS样式自定义；不支持行数显示
• 自定义的CSS样式所用的标签与网页一致
• 不支持before和after修饰
• 支持画图：柱状图；线图；饼图；标准流程图

Joplin

• 离线编辑后复制
• 提供CSS样式自定义，但实际不可用；不支持行数显示
• 支持画图：流程图；时序图；甘特图
• 提供WebDAV同步

MarkdownPad 2

• 离线编辑后复制
• 提供CSS样式自定义；提供格式标记显示；不支持行数显示
• 自定义的CSS样式所用的标签与网页一致
• 不支持画图

VS Code

• 离线编辑后复制
• 提供CSS样式自定义；提供语法检查；可通过插件扩展功能
• 自定义的CSS样式所用的标签与网页一致，但是样式内容是放在一个less文件中，并经过处理，因此不会影响界面样式

注意事项

• 需要注意的是，通过before和after标签所产生的修饰效果是无法复制的，这部分修饰会在复制时丢失。只能通过一键样式转换或者把这部分修饰的实现代码移植到所修饰的本体中来实现修饰效果。
• before和after在CSS样式表中是通过伪类和伪元素来实现的，不支持这两种标签的编辑器也可能不支持伪类和伪元素。
• 通过复制编辑器渲染后所产生的富文本再进行粘贴的方式，在粘贴时存在样式丢失，在发布平台进行保存时也存在样式丢失。

版权声明：本文为「梦幻之心星」原创，依据 CC BY-NC-SA 4.0 许可证进行授权，转载请附上原文出处链接及本声明。

博客园地址：https://www.cnblogs.com/Sky-seeker

微信公众号：关注微信公众号，获取即时推送