MarkDown实践及技巧

MarkDown实践及技巧

1 编辑MD

1.1 解决中文输入法的输入框不跟随

安装IMESupport插件，之后重启Sublime Text，问题即可解决

1.2 打开sublime，开始编辑文档大纲

1.3 为同级标题统一添加语法

选中多行同级标题内容，然后按下Tab键，然后双击前面空格选中，然后再按Ctrl + D进行多重选择，然后统一输入n个#加空格

在多重选词的过程中，使用Ctrl + K进行跳过，使用Ctrl + U进行回退，使用Esc退出多重编辑

1.4 保存MD

编辑一部分内容后，Ctrl + S保存

1.5 添加图片

如果想把本地图片转成网络图片，需要一个图床，推荐使用”1365免费图床”，上传完成后鼠标左键点击一下图片，即可获取该图片的网络地址
1365免费图床
如果只想添加本地图片连接，和添加网络图片的格式一样，只是图片地址先不用填，等转成THML之后，再到THML中编辑选择本地图片即可
具体添加图片方法请参考:
MarkDown常用语法及示例

1.6 随时预览

Ctrl + Shift + P 然后输入mp 选择 Markdown Preview:Preview in Browser

1.7 添加Markdown语法技巧

选中需要包裹的内容，然后直接输入markdown包裹字符`、’、”、[、(、*、_即可，比如想把内容hello变为斜体，直接选中hello，然后输入一个*即可,效果为hello

1.8 本地图片上传图床技巧

如果需要上传的图片数量较多（多于10个），可以先把本地图片保存到本地某个文件夹下（图片最好为png格式），分别命名为1、2…，然后每次上传5个图片（1-5、6-10…），使用完后，F5刷新页面，再上传5个，这样不会造成图片连接获取混乱，也能减少编辑错误

1.9 Chrome中实时预览Markdown

直接在Chrome的store中安装扩展Markdown Preview Plus，然后，在Chrome的扩展设置页面，允许这个扩展访问本地文件。因为我们要直接从Chrome中打开我们在本地编辑的那个Markdown文件

1.10 页内跳转

markdown的页内跳转语法格式为[点击跳转](#jump)，其中的jump为锚点（id），由于markdown preview导出的html会自动生成与各级标题相对应的锚点，可以在预览时通过F12查看相应的锚点

正文不生成锚点，不过用户可以在导出HTML之后自定义：跳转到的地方

设置跳转：[1 编辑MD](#1-md)
效果：1 编辑MD

1.11 生成目录

直接在MD文件的最上方，加上内容[TOC]即可，markdown preview导出的html会自动生成与各级标题相对应的目录

2 导出HTML

如果经过多次预览后，确认最终的md文件已经编辑完成，可以导出为html文件，Ctrl + Shift + P 然后输入mp

然后直接Ctrl + S保存导出的html，输入文件名为：abc.html

3 HTML样式修改

3.1 字体/图片居中

用浏览器（chrome/firefox）打开之前导出的html，按F12调出开发者工具，用选择器选中需要剧中的图片或文字，查看其样式设置所属的类名

复制下刚才查找的样式类名.markdown-body img，然后用sublime打开之前导出的html，在里面搜索并定位到.markdown-body img,可能会搜索到3个左右一样的类名，然后再通过对比一下其在开发者工具中的样式，即可找到需要设置的位置，然后输入text-align: center;

保存sublime中的样式修改，刷新浏览器中的页面即可看到剧中效果

如果想单独修改某一个图片或文字的样式，可以单独定位到相应的h或p，然后直接

3.2 字体/背景颜色

请参考3.1中的方法定位到要修改的样式类中，然后直接修改color属性，建议先安装Color Picker插件，如果已经安装Color Picker，直接ctrl+shit+p，输入color调出插件选择颜色即可

也可以手动输入颜色值，参考配色表

3.3 改变页面宽度

用sublime3打开之前导出的html，在最上面body样式中修改属性width的值即可

4 附录

最常用的Sublime Text快捷键动画演示
Sublime Text 全程指引 by Lucida
20 个强大的 Sublime Text 插件
Sublime插件：Markdown篇