原创文章,欢迎转载。转载请注明:转载自 祥的博客
原文链接:http://blog.csdn.net/humanking7/article/details/43516903
用MarkdownPad2来写Markdown
已经非常爽了,但是确实比不上一些在线Markdown
编辑器强大(也许这是Markdown
所提倡简约概念吧),但是不能让我忍受的是MarkdownPad2不能支持Table of context
即就是[TOC]
。偶然发现Sublime Text2支持[TOC]
欣喜若狂,但是它最后生成的html
文件真是不忍直视(我觉得丑到爆),虽然我不是处女座,但是我确实想要追求美的极致,所以就倒腾了半天,终于能使Sublime Text2 完美实现 MarkdownPad2的效果,而且有[TOC]
功能,太棒了。
Sublime Text2配置成MarkdownPad2效果
安装Package Control
安装包控制扩展可以方便地为身体添加扩展。 打开ST,按下组合键 ctrl+`
import urllib2,os; 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( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
如果看到下面的提示说明已经安装好了
······Please restart Sublime Text to finish installation
此时重启ST,可在Preferences -> Package Settings
看到Package Control
。我的是中文版的所以是首选项 -> Package Control
就说明安装好了。
安装markdown preview
按下键Ctrl+Shift+p
调出命令面板,找到Package Control: install Pakage
这一项。搜索markdown preview
,点击安装。
使用
Markdown Preview
较常用的功能是preview in browser
和Export HTML in Sublime Text
,前者可以在浏览器看到预览效果,后者可将markdown
保存为html
文件。
preview in browser
据称是实时的,但是实践上还是需要在ST保存,然后浏览器刷新才能看到新的效果,好在markdown
写得多的话也不需要每敲一行看一次效果。
不过了,我使用MarkdownPad2写的,这是实时显示的。
快捷键
ST支持自定义快捷键,markdown preview
默认没有快捷键,我们可以自己为preview in browser
设置快捷键。方法是在Preferences -> Key Bindings User
打开的文件的中括号中添加以下代码(可在Key Bindings Default
找到格式,我是在个人设置中写的):
{ "keys": ["alt+m"], "command": "markdown_preview", "args": { "target": "browser"} }
Alt + m
可设置为自己喜欢的按键。
设置语法高亮和mathjax支持
在首选项 -> 插件设置 -> Markdown Preview -> Setting Default
中找到下面几行代码:
"enable_mathjax": false,
"enable_highlight": false,
"enable_pygments": true,
我是没有在Setting Default
中改,而是在Setting User
中改的,这样靠谱一点。
"enable_mathjax": true,
"enable_highlight": true,
"enable_pygments": false,
其中"enable_pygments": false,
改的原因主要是要和MarkdownPad2的效果匹配。大家可以试试,我找了好久啊。
设置MarkdownPad2的css设置
在Setting Default
中还有一句代码:
css": "default",
在Setting User
中改为:
"css": "D:\\Program Files\\Sublime Text 2\\Data\\Packages\\Markdown Preview\\Qfx.css",
其中这个Qfx.css
是我复制MarkdownPad2的css
。这个我很喜欢css
,下面这个的源码,放血分享给大家:
MarkdownPad2的css源码
/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
/* Author: Nicolas Hery - http://nicolashery.com */
/* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
/* Source: https://github.com/nicolahery/markdownpad-github */
/* RESET
=============================================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
/* BODY
=============================================================================*/
body {
font-family: Helvetica, arial, freesans, clean, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
background-color: #fff;
padding: 20px;
max-width: 960px;
margin: 0 auto;
}
body>*:first-child {
margin-top: 0 !important;
}
body>*:last-child {
margin-bottom: 0 !important;
}
/* BLOCKS
=============================================================================*/
p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}
/* HEADERS
=============================================================================*/
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}
h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}
h1 {
font-size: 28px;
color: #000;
}
h2 {
font-size: 24px;
color: #000;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
color: #777;
font-size: 14px;
}
body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}
/* LINKS
=============================================================================*/
a {
color: #4183C4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* LISTS
=============================================================================*/
ul, ol {
padding-left: 30px;
}
ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}
dl {
padding: 0;
}
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
dl dt:first-child {
padding: 0;
}
dl dt>:first-child {
margin-top: 0px;
}
dl dt>:last-child {
margin-bottom: 0px;
}
dl dd {
margin: 0 0 15px;
padding: 0 15px;
}
dl dd>:first-child {
margin-top: 0px;
}
dl dd>:last-child {
margin-bottom: 0px;
}
/* CODE
=============================================================================*/
pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}
code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
pre code, pre tt {
background-color: transparent;
border: none;
}
kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}
/* QUOTES
=============================================================================*/
blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}
blockquote>:first-child {
margin-top: 0px;
}
blockquote>:last-child {
margin-bottom: 0px;
}
/* HORIZONTAL RULES
=============================================================================*/
hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}
/* TABLES
=============================================================================*/
table th {
font-weight: bold;
}
table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}
table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}
table tr:nth-child(2n) {
background-color: #f8f8f8;
}
/* IMAGES
=============================================================================*/
img {
max-width: 100%
}
OK,太好了,现在可以用Sublime Text2畅快的写Markdown
了。对了,写完之后Ctrl+B
编译成html
。
我发布在博客园的帖子:http://www.cnblogs.com/qfx-coder/p/4274505.html