[Web前端工具篇]Sublime 3安装Markdown插件

1.简介

今天这边文章主要还是写如何离线安装Markdown插件

2.安装流程

2.1 下载官方软件

Sublime Text 3 官网

2.2 PackageControl 插件的安装

Package Control是一个用来进行在线安装插件的工具，在使用前需要先安装。

如果已经安装过 PackageControl 的同学可以直接跳过这一步！

安装 PackageControl 插件需要我们先打开 SublimeText，然后在 SublimeText 的界面按下 Control + ~ 键， ~ 键就是 Esc 键下面的那个键。按下之后会在界面下方弹出命令窗口，接着童鞋们需要将下方的代码复制粘贴到命令窗口中，然后敲回车

/*Sublime Text 2 代码*/
import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

/*Sublime Text 3 代码*/
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

2.3 安装MarkdownEding

安装分两种别人为在线安装或者离线安装，看个人喜好。

2.3.1在线安装

步骤

安装完毕 PackageControl 之后，在 SublimeText 窗口中直接按下 Command + Shift + P 键打开命令面板，

输入 package install 后，使用 上下方向键

在下方的列表中找到 Package Control: Install Package 这一项，然后回车。

这时 SublimeText 会请求远程插件仓库的索引，可能会需要等待一段时间。

最后，输入我们需要安装的插件名字进行安装。

2.3.2 离线安装

将我们的插件download，然后放在工具栏中Prefrence—>浏览程序包文件夹下解压。重启工具后，就可以生效了。

2.3.2 配置插件

首先，点击开我们的插件的文件夹，会看见一个[MarkdownEditing]sublime-setting的文件。这里面就可以配置我们自己想要的插件功能了，一般在ReadMe中都会对当前如何配置进行讲解，下面是我MarkdownEditting插件的配置文件

{
"extensions":
[
"md",
"mdown",
"txt"
],

"color_scheme": "Packages/MarkdownEditing/MarkdownEditor.tmTheme",
// "color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Dark.tmTheme",
// "color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Yellow.tmTheme",

// This is a quick and dirty focus theme. In order to make it work, you've to
// set `"highlight_line": true,` in this settings file. It is likely that there will
// be more mature focus improvements in the future (maybe similar to iA Writer).
// "color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Focus.tmTheme",

"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": false,
"auto_match_enabled": true,

// Layout
"draw_centered": true,
"word_wrap": true,
"wrap_width": 80,
"rulers": [],

// Line
"line_numbers": false,
"highlight_line": false,
"line_padding_top": 2,
"line_padding_bottom": 2,

// Caret
"caret_style": "wide",   // "wide" is deprecated starting with ST Build 3057.
// In the future, this line will be replaced with:
//     "caret_style": "solid",
//     "caret_extra_width": 1,
// These will work only in ST Build 3057 and later.
"caret_extra_top": 3,
"caret_extra_bottom": 3,

// add trailing #'s to headlines
"mde.match_header_hashes": false,

// Automatically switches list bullet when indenting blank list item with <Tab>.
"mde.list_indent_auto_switch_bullet": true,

// List bullets to be used for automatically switching. In their order.
"mde.list_indent_bullets": ["*", "-", "+"],

// Auto increments ordered list number. Set to false if you want always "1".
"mde.auto_increment_ordered_list_number": true,

// Always keep current line vertically centered.
"mde.keep_centered": false,

// Distraction free mode improvements. In order for these to work, you have to install
// FullScreenStatus plugin: https://github.com/maliayas/SublimeText_FullScreenStatus "mde.distraction_free_mode": {
"mde.keep_centered": true
},

"mde.lint": {
// disabled rules, e.g. "md001".
"disable": ["md013"],
// Options:
// atx,## title only
// atx_closed, ## title ##only
// setext,title only
//   =====
// any,consistent within the document
"md003": "any",
// Options:
//    asterisk,* only
//      plus, + only
//      dash, - only
//      cyclic, different symbols on different levels
//       and same symbol on same level
//      single, same symbol on different levels
//      any, same symbol on same level
"md004": "cyclic",
// Number of spaces per list indent. Set to 0 to use Sublime tab_size instead
"md007": 0,
// Maximum line length, Set to 0 to use Sublime wrap_width instead
"md013": 0,
// Disallowed trailing punctuation in headers
"md026": ".,;:!",
// Options:
// one,'1.' only
// ordered,ascending number
// any,consistent within one list
"md029": "any",
// Number of spaces after list markers depending on list type.
// (ordered vs unordered, single-line vs multi-line)
"md030": {
"ul_single": 1,
"ol_single": 1,
// optinally, 3
"ul_multi": 1,
// optionaly, 2
"ol_multi": 1
}
}
}

通过上面不难看出，这个其实就是一个Json文件，这里的配置是官网的默认配置，可以看到每一个配置他都会有相应的注释，很方便我们理解。

3. Chrome浏览Md文件

这里我推荐一个Chrome的插件MarkDownPreview，安装后,将文件拖入浏览器即可查看，这里也有人推荐Sublime插件

OmniMarkupPreviewer

，文章末尾有参考链接，这里注意两点。

如果出现乱码，请记得在Chrome中设置改成UTF-8的编码格式。

不显示md文件，请在浏览器输入chrome://extension 中找到

MarkDownPreview

勾选，文件可以查看的选项。

4.自定义Markdown的快捷键

将下面的代码片段，放在user/snippers/下。重启即可

Markdown_Link_(mdlink).sublime-snippet

<snippet>
<content><![CDATA[
[${1:Display_Text}](${2:http://example.com/} ${3:"$2"})
]]></content>
<tabTrigger>mdlink</tabTrigger>
<scope>text.html.markdown.multimarkdown, text.html.markdown</scope>
<description>Insert Link</description>
</snippet>

Markdown_Image_(mdimg).sublime-snippet

<snippet>
<content><![CDATA[
![${1:Some_Text}](${2:url_to_image} ${3:"$1"})
]]></content>
<tabTrigger>mdimg</tabTrigger>
<scope>text.html.markdown.multimarkdown, text.html.markdown</scope>
<description>Insert Image</description>
</snippet>

Markdown_Anchor_(mdarch).sublime-snippet

<snippet>
<content><![CDATA[
[${1:Display_Text}][${2:id}]$5
[$2]:${3:http://example.com/} ${4:"$3"}
]]></content>
<tabTrigger>mdacr</tabTrigger>
<scope>text.html.markdown.multimarkdown, text.html.markdown</scope>
<description>Link Anchor</description>
</snippet>

Markdown_Footnote_(mdfn).sublime-snippet

<snippet>
<content><![CDATA[
[^${1:Footnote}]$3
[^$1]:${2:Footnote_Text}
]]></content>
<tabTrigger>mdfn</tabTrigger>
<scope>text.html.markdown.multimarkdown, text.html.markdown</scope>
<description>Insert Footnote</description>
</snippet>

Markdown的Snippers：https://yunpan.cn/c67Mc8HfiJSyX 访问密码 f223

参考文献

插件推荐

Sublime Text 3 + OmniMarkupPreviewer

（顶）使用Emmet加速Web前端开发