[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: /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:/} ${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:/} ${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：/c67Mc8HfiJSyX 访问密码 f223

参考文献

插件推荐Sublime Text 3 + OmniMarkupPreviewer（顶）使用Emmet加速Web前端开发