在博客园使用 MarkDown写blog

博客园配置

1. 进入管理->设置->通过css代码定制代码页面风格

2. 在通过css代码定制页面风格部分添加MarkDown相关的css样式
   一下是我添加的样式(来自于网络)

   .post{ color:#444; font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; font-size:13px; line-height:1.5em; padding:1em;
   background:#fefefe; }

   .post h1,.post h2,.post h3,.post h4,.post h5,.post h6 { font-weight: bold; }

   .post h1 { color: #000000; font-size: 28px; }

   .post h2 { color: #000000; font-size: 24px; }

   .post h3 { font-size: 18px; }

   h4 { font-size: 16px; }

   .post h5 { font-size: 14px; }

   .post h6 { color: #777777; background-color: inherit; font-size: 14px; }

   .post hr { height: 0.2em; border: 0; color: #CCCCCC; background-color: #CCCCCC; }

   .post p,.post blockquote,.post ul,.post ol,.post dl,.post li,.post table,.post pre { margin: 15px 0; }

   .post p{ margin:1em 0; }

   .post pre { background-color: #F8F8F8;
   border: 1px solid #CCCCCC; border-radius: 3px; overflow: auto; padding: 5px; }

   .post pre code ,.pose .xcode{ background-color: #F8F8F8; border: none;
   padding: 0; }

   .post code,.post .xcode { font-family: Consolas, Monaco, Andale Mono, monospace; background-color:#F8F8F8; border: 1px solid #CCCCCC; border-radius: 3px; padding: 0 0.2em; line-height: 1; }

   .post pre > code { border: 0; margin: 0; padding: 0; }

   .post a:focus{ outline: thin dotted; } .post a:hover, a:active{ outline: 0; }

   .post ::-moz-selection{background:rgba(255,255,0,0.3);color:#000} .post ::selection{background:rgba(255,255,0,0.3);color:#000}

   .post a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad} .post a::selection{background:rgba(255,255,0,0.3);color:#0645ad}

   .post blockquote{ color:#666666; margin:0; padding-left: 3em; border-left: 0.5em #EEE solid; }

   .post ul,.post ol { margin: 1em 0; padding: 0 0 0 2em; } .post li p:last-child { margin:0 } .post dd { margin: 0 0 0 2em; }

   .post img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; max-width:100%;}

   table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } .post @media only screen and (min-width: 480px) { body{font-size:14px;} }

   .post @media only screen and (min-width: 768px) { body{font-size:16px;} }

3. 进入 管理->选项->默认编辑器

将默认编辑器设置为纯文本框,以方便在markdown的编辑器里写完后拷贝生成的html文档到这里.

真希望博客园出一个github样式的主题和支持markdown的编辑器.免得上面的配置,虽然也不是很麻烦,但程序员都是为了偷懒而工作的

使用markdown编辑器

1. 如果图方便的话可以下载一个markdownpad的编辑器来使用,完成后直接复制生成的HTML文档到博客园的编辑器中
2. 使用Sublime写Markdown

一、安装

1. 下载Sublime Text 2
2. 安装

二、安装Package Control

按Ctrl + ` 打开console 粘贴代码到console并回车 重启Sublime Text 2

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

三、安装Markdown Preview

按Ctrl + Shift + P 输入pci 后回车(Package Control: Install Package) 稍等... ^_^ 输入Markdown Preview回车

四、编辑

按Ctrl + N 新建一个文档 按Ctrl + Shift + P 使用Markdown语法编辑文档 语法高亮，输入ssm 后回车(Set Syntax: Markdown)

五、在浏览器预览Markdown文档

按Ctrl + Shift + P 输入mp 后回车(Markdown Preview: current file in browser) 此时就可以在浏览器里看到刚才编辑的文档了