博客园的Markdown文章 样式优化 实战经历

Round 1

记得前几天园子有篇博客说Markdown的很火，看看有没借鉴的。

Markdown语法中文版 ，很可惜，只是Markdown的语法介绍。而且这篇博客居然没有用Markdown写。。。

所以这一阶段没有收获~

Round 2

自己写CSS自然是件吃力不讨好的事情。所以我们找找别人写好了。虽然很想用马克飞象的CSS。但是估计有版权问题。所以确定使用github的样式。

Round 3

Google一下，关键字

github markdown css

看着第一个还不错。github: sindresorhus/github-markdown-css

一个开源的（MIT协议，可以自由使用哦）项目。

项目里面有个CSS文件

github-markdown.css

内嵌了字体。感觉还不错。但是我检查了下，貌似博客园的外部容器不是

.markdown-body

，是

.cnblogs-markdown

。这得改改。不知道会不会有其它冲突。

所以，我们再找找其它的，最好是针对博客园的CSS。

Round 4

找到一些博客。

扩展博客园的markdown编辑器

只是一个扩展，不涉及CSS

新版markdown功能发布！支持github flavored markdown！

看来博客园新版的代码和Github很像。那么问题来了，以前针对博客园的CSS现在还能用么？

Sublog: 支持Markdown和语法高亮的跨平台博客客户端

看似不错的一套解决方案。但是编写我还是用马克飞象吧。markdown.css 好像没有加上外层容器筛选。

用Markdown在博客园写博客

看来果然可能会和模版的CSS有冲突。需要改模板的话，那就复杂了。。。

而且CSS最后一段

<style>
/* ... */
.markdown-body img {
max-width: 100%
}
</style>

明显和博客园不一样。（参见Round 3）

所以决定放弃再继续查找。感觉Round 3找到的CSS就很不错了。应该是精心维护的。

Round 5

于是，我们就站在巨人的基础上Fork一个版本出来，针对博客园的Markdown文章的样式。

Step 1

Fork it！于是得到了 github: huizhong/github-markdown-css

Step 2

修改外部容器。 把所有

.markdown-body

替换成

.cnblogs-markdown

commit

Step 3

复制

github-markdown.css

文件内容到博客园的CSS设置里的

页面定制CSS代码

里。

Step4

测试 饭团(0)：提升效率的开发工具

感觉不错~

总结

花了一个小时，完成了预期的目标。（其中现场写博客花了80%的时间 :P ）

先是有需求。后面确定想要做成什么样。然后调研。最后才是改代码。

实际上真正“有用”的工作一分钟就能做完。磨刀不误砍柴工。

其实还有些后续改进。比如 标题太小，修改我们fork出来的项目。添加指导说明。这些下班后再来~ 上班去了。