介绍
基于PageDown,Stack Overflow和其他Stack Exchange站点使用的Markdown库的功能齐全的开源Markdown编辑器,你可以有几种使用它的方式(可添加到桌面随时使用):
- 浏览器应用;
- 浏览器插件;
- Web方式;
- 嵌入到任何网站;
![a57fada7818076383df2c3b43b1f0220.png](https://img-blog.csdnimg.cn/img_convert/a57fada7818076383df2c3b43b1f0220.png)
Github地址
https://github.com/benweet/stackedit
相关特性
- 无与伦比的写作经验
Rich Markdown编辑器,StackEdit的Markdown语法突出显示是唯一的。编辑器的精炼文本格式可帮助可视化文件的最终呈现。
![5aa4c86cdada7483b29579253c361d3a.gif](https://img-blog.csdnimg.cn/img_convert/5aa4c86cdada7483b29579253c361d3a.gif)
- 所见即所得控件
PageDown是Stack Overflow使用的WYSIWYG样式Markdown编辑器,它提供了非常方便的格式化按钮和快捷方式。
![8bf611c3f1e96a95bf59789e84491626.png](https://img-blog.csdnimg.cn/img_convert/8bf611c3f1e96a95bf59789e84491626.png)
- 智能布局
无论您撰写,预览,评论……StackEdit的布局都为提供了所需的灵活性,而丝毫没有浪费。
![ec77d8f2f1ed3ef5d1c1042ebeb1f82b.png](https://img-blog.csdnimg.cn/img_convert/ec77d8f2f1ed3ef5d1c1042ebeb1f82b.png)
- 使用Scroll Sync进行实时预览
StackEdit的Scroll Sync功能可准确绑定编辑器面板和预览面板的滚动条,以确保您在编写时可以实时预览
![8689626152c455d93ff1eac27d787411.gif](https://img-blog.csdnimg.cn/img_convert/8689626152c455d93ff1eac27d787411.gif)
- 同步功能
StackEdit可以将您的文件与Google Drive,Dropbox和GitHub同步。它还可以将它们作为博客文章发布到Blogger,WordPress和Zendesk。可以选择是以Markdown格式,HTML上传还是使用Handlebars模板引擎格式化输出格式。
![b91a6e61396cef3d02ee9697ff4382d7.png](https://img-blog.csdnimg.cn/img_convert/b91a6e61396cef3d02ee9697ff4382d7.png)
- 离线使用
可以像任何桌面应用程序一样离线写作
扩展支持
- GitHub风格Markdown
StackEdit支持不同的Markdown版本,例如Markdown Extra,GFM和CommonMark。每个Markdown功能都可以在您方便时启用或禁用。
![03a4eda4aed2851e1321187f745b380a.png](https://img-blog.csdnimg.cn/img_convert/03a4eda4aed2851e1321187f745b380a.png)
- LaTeX数学表达式
就像在Stack Exchange上一样,StackEdit可以从Markdown文件中渲染LaTeX数学表达式。
![62311ee11fb63eca2215765c871e7098.gif](https://img-blog.csdnimg.cn/img_convert/62311ee11fb63eca2215765c871e7098.gif)
- UML图
StackEdit使您可以使用简单的语法编写顺序图和流程图。
![bc325d32dd774718453f420bf6fe5ab6.gif](https://img-blog.csdnimg.cn/img_convert/bc325d32dd774718453f420bf6fe5ab6.gif)
- 乐谱
StackEdit可以使用ABC表示法来呈现乐谱。
![6ba5e2d3611dd13ac1f58840f77cf7e2.png](https://img-blog.csdnimg.cn/img_convert/6ba5e2d3611dd13ac1f58840f77cf7e2.png)
- 表情符号
StackEdit支持使用Markdown表情符号
![47fa9184e21d3bc067cc48869b9337ef.png](https://img-blog.csdnimg.cn/img_convert/47fa9184e21d3bc067cc48869b9337ef.png)
如何自己构建
- 首先你得从Github网站上clone下源代码,前提是你已经安装过git,当然未曾安装倒不如直接下载项目源代码,一般clone比较慢:
git clone https://github.com/benweet/stackedit.git
- 自己构建
# 安装依赖
npm install
#或者笔者习惯使用
yarn
# 启动项目
npm start
# 构建生产环境包
npm run build
![be49f42407af7932126a4e23b0cfcc05.png](https://img-blog.csdnimg.cn/img_convert/be49f42407af7932126a4e23b0cfcc05.png)
![e0e03ea1d71a4adc770c5425f6015d9c.png](https://img-blog.csdnimg.cn/img_convert/e0e03ea1d71a4adc770c5425f6015d9c.png)
![2b814a76fdfabde581d61cfdff9df7bb.png](https://img-blog.csdnimg.cn/img_convert/2b814a76fdfabde581d61cfdff9df7bb.png)
总结
StackEdit是诸多Markdown编辑器中不可多得的一款精品应用,它是一个很棒的写作工具,它不仅提供功能还提供服务,是目前最适用于写作的Markdown编辑器,欢迎尝试体验!
![db98755e9c5b0ae4c8792453b73b0457.png](https://img-blog.csdnimg.cn/img_convert/db98755e9c5b0ae4c8792453b73b0457.png)