MarkDown实践及技巧

最新推荐文章于 2024-09-06 09:36:17 发布

绿林__

最新推荐文章于 2024-09-06 09:36:17 发布

阅读量1.5k

点赞数

分类专栏： Markdown最佳实践文章标签： markdown sublimetext 编辑器

本文链接：https://blog.csdn.net/dixialieren/article/details/48541713

版权

Markdown最佳实践专栏收录该内容

5 篇文章 0 订阅

订阅专栏

MarkDown实践及技巧

1 编辑MD

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

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

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

Some_Text

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

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

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

Some_Text

1.4 保存MD

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

1.5 添加图片

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

1.6 随时预览

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

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之后自定义：<span id="jump">跳转到的地方</span>

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

1.11 生成目录

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

2 导出HTML

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

Some_Text

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

3 HTML样式修改

3.1 字体/图片居中

用浏览器（chrome/firefox）打开之前导出的html，按F12调出开发者工具，用选择器选中需要剧中的图片或文字，查看其样式设置所属的类名
Some_Text
复制下刚才查找的样式类名.markdown-body img，然后用sublime打开之前导出的html，在里面搜索并定位到.markdown-body img,可能会搜索到3个左右一样的类名，然后再通过对比一下其在开发者工具中的样式，即可找到需要设置的位置，然后输入text-align: center;
Some_Text
保存sublime中的样式修改，刷新浏览器中的页面即可看到剧中效果