/markdownonline

A Node-based Markdown Editor Conversion Tool

Primary LanguageCSSGNU General Public License v3.0GPL-3.0

在线markdown转换器使用手册

此转换器的服务端由 NodeJS 构建， marked 模块对 markdown 字符串进行转换，highlight.js进行辅助转换，转换器首页部分由 jQuery 构建，默认样式部分引用自https://cdn.bootcss.com/github-markdown-css/2.8.0/github-markdown.min.css 以及https://cdn.bootcss.com/highlight.js/9.12.0/styles/github-gist.min.css，包含部分手写 CSS，现已支持6种样式的切换（更新日期2019年2月17日）

1.打开转换器

git clone https://github.com/kawayiLinLin/markdownonline/

运行：

npm install
#start the server
node ./src/server.js
#或
npm run server
#start the Compiler and the http-server
npm run start
  • 你也可以通过 npm下载转换插件
npm install ...
#暂时没有提交到npm

2. 使用

  1. 转换器部分

此工具主要目标是提供一种 markdown 字符串转换为 html 代码的方法，你可以通过复制 markdown代码到转换器的黑色编辑区的方式来进行转换（暂不支持打开 .md 文件）

  1. 复制到剪贴板

你可以将编辑区内的 markdown 代码段复制到剪贴板内，编辑区支持 html 代码段，你可以通过写 html 代码来替代 markdown 代码如 <a href="http://www.baidu.com">http://www.baidu.com</a> 等同于 [http://www.baidu.com](http://www.baidu.com) 会被转换成这种显示形式：http://www.baidu.com， 你也可以通过style属性为他增加样式，如 style="color: red;" http://www.baidu.com，如果保存为 .md 文件排版错误，你可以手动改变缩进来解决这一问题

  1. 复制html片段

你可以通过点击这个按钮将转换后的 html 代码复制到剪贴板，值得注意的是，复制的代码段会包裹上一个 article 标签，如果你不需要，你可以把它去掉

  1. 复制html代码

你可以通过点击这个按钮来复制包含 head body 以及样式的完整 html 代码，注意，请不要将一个完整的 html 页面放置在编辑区中，由于 marked 模块转换的机制，这可能会导致转换器页面发生错误

  1. Download CSS

你可以下载包含所有默认样式的 CSS 文件

  1. Download less

你可以下载包含所有默认样式的 less 文件

  1. Download All

你可以下载包含所有样式的压缩包（更新日期：2019年7月27日）

  1. 刷新

当转换器右侧没有自动生成预览的时候，你可以手动点击刷新预览

  1. 打开文件

你可以使用本地markdown文件来进行转换，当打开正确的文件时，文本框中的内容将会被替换，请注意保存。另外，仅支持打开后缀为 .md 的文件，且文件大小小于 2MB（更新日期：2019年8月25日）

Tips: 暂时不支持将 markdown html 另存为文件，复制功能基于 clipboard.js ，其原理是模拟输入框中的全选，因此复制文本可能要基于一个在视图中存在（不包括 display:none; 等属性）或可见的 input textarea 或其他可复制文本的元素 如果你将这个元素删除或者设置影响复制的属性，那么复制可能会失效。另，为了不占用存储空间，刷新不会使编辑区中的文字删除，关闭浏览器或者开启一个新窗口会删除。

  1. 编辑器部分

编辑器暂时不支持格式化功能，你需要手动排版以达到美观的效果或者正确的语法

  1. 编辑器支持用户配置，详情请参考第5条"用户设置"（更新日期2019年7月27日）

  2. 编辑器支持tab键单行、多行缩进，选择多行并按下tab键以达到多行缩进的效果，除此之外，编辑器还支持其他快捷键，以下将列出编辑器支持的所有快捷键（更新日期：2019年7月26日）

    焦点在编辑区中，半角状态时

    Tab ： tab键可以在为选中文本时提供四个空格字符，在选中字符状态下按下tab键，为每行文字的选中部分添加四个空格

    **：** 未选中文字时，输入一个 字符，选中时，所选区域收尾各添加一个该字符

    **' ：**未选中文字时，输入一个 ' 字符，选中时，所选区域收尾各添加一个半角单引号字符

    **[ ：**未选中文字时，输入一个 [ 字符，选中时，所选区域被方括号包括

    **Shift + {：**未选中文字时，输入一个 { 字符，选中时，所选区域被尖括号包括

    **Shift + (：**未选中文字时，输入一个 ( 字符，选中时，所选区域被圆括号包括

    **Shift + <：**未选中文字时，输入一个 < 字符，选中时，所选区域被其包括

    **Shift + "：**未选中文字时，输入一个 " 字符，选中时，所选区域被半角双引号包括

    **Ctrl + B：**加粗

    **Ctrl + I：**斜体

    **Ctrl + D：**删除线

    **Ctrl + U：**下划线

    **Ctrl + Z：**所有上述快捷键操作都支持使用Ctrl+Z进行撤销

    **Ctrl + ' + '：**编辑区字号加大

    **Ctrl + ' - '：**编辑区字号减小

    **Ctrl + 0：**编辑区字号还原

  3. 编辑器支持12种按钮插入的markdown语法

    标题： 点击一次增加一个#，如1秒内在编辑区没任何操作，则添加一个空格

    无序列表： 点击一次会插入一个markdown无序列表代码段，光标定位在第一行，支持简单的多行普通文本转换为无序列表

    有序列表： 点击一次会插入一个markdown有序列表代码段，光标定位在第一行，支持简单的多行普通文本转换为有序列表

    引用： 点击一次插入一个 > 符号

    链接： 点击一次插入一个 []()光标定位在方括号中

    图片： 点击一次插入一个 ![]()光标定位在圆括号中

    反引号： 点击一次插入一个 两个 ` 符号，支持选中文字的添加，如果选中文字包含至少一个反引号，则在被选中文字两侧各插入两个反引号

    加粗： 点击一次插入四个 * 符号，支持选中文字的添加，如果你在一行单独插入四个*，那么会应用分割线效果

    斜体： 点击一次插入两个 * 符号，支持选中文字的添加

    删除线： 点击一次插入两个 ~ 符号，支持选中文字的添加

    表格： 点击一次插入一个markdown表格代码段，光标定位在表头第一项

    代码段： 点击一次插入一个markdown代码容器，光标定位在语言种类处

  4. 单行选中： 点击选中当前行（该功能尚不完善）

  5. 全选： 点击全选编辑器区域

  6. 折叠按钮菜单： 如果你不想使用按钮来操作编辑区，你可以点击折叠它

  7. 编辑区颜色： 如果你不喜欢编辑区的色调，可以点击词数左边一个按钮切换编辑区的颜色，但是值得注意的是，此按钮不会保存你的颜色信息，仅供临时调整

  8. 用户自定义配置项： 此项在编辑区的第一个可操作按钮中，在你的鼠标放上去之前，他会一直旋转，因此，为了让他有所休息，你可以试试这项功能（更新日期：2019年7月27日）

    主题设置： 你可以为转换器设置主题，有6个主题供你选择，这些主题的样式文件和字体文件等非作者所写，但是经过些许修改，这六个主题分别是，默认样式github、newsprint、night、pixyll、whitey、techo、bootstrap

    应用富文本编辑器： 该功能基于HTML5中元素的contenteditable属性，此功能待更新

    编辑区是否不可编辑： 选项是，则为输入框设置不可编辑防止误操作，选项否为默认，选项隐藏可以将编辑框隐藏，这样你可以更好的预览文档

    同步/异步滚动 选项无为默认，对滚动不进行任何操作，选项自动依赖于修改 line-height 效果并不好，你可以使用手动，即同步滚动模式

    编辑区背景色，字体颜色，字体 你可以根据你的喜好来对编辑区主题进行设置

推荐背景色 推荐字体色
#2d2d2d #aad0f3
#272822 #e6db67
#ffffff #a31515
#fafafa #6182c7
#282c34 #98c361

markdown语法块设置： 暂不支持设置

3.其他

本操作说明在此编辑器中编写，本编辑器会持续更新，如果你有什么意见或建议，可以在1936635053@qq.com给我留言 发送邮件