最近又开始想起了写博客,用来记录一下自己所学到的知识和总结近期的学习经验。在博客园发表了一篇博客后,发现博客园的代码块真是难以入目,就决定去美化一下。
准备工作
既然要美化代码显示,当然要选择一个代码高亮的js插件,这里我选择的是SyntaxHighlighter
插件。
其次要在博客园申请使用js代码的权限,只有申请了js权限,才可以在页面添加自己的js代码。
开始美化
1、在博客园的管理>设置>页脚Html代码框中添加
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
]]>
其中shCore.js
与shCore.css
是必须的,而'shBrushJScript.js'与shBrushCss.js
则是代表了JavaScript和Css的代码高亮规则,可根据自己的常用语言自行添加。做完这些美化也就基本完成了。
2、可是当我们用Markdown发表一篇博客后却发现,代码块的样式并没有改变。解决的方法就是在写Markdown时将
这样SyntaxHighlighter就可以成功渲染代码块了。
注意: Markdown中的代码块应当与文本空一行,不然渲染后代码的第一行会出现br标签!
SyntaxHighlighter的基本配置
在pre标签的class中我们还可以对代码块进行简单的设置
需要什么只需在class中添加即可。
至此,代码块的美化工作就已经全部完成了,不出问题大家应该已经看到了效果。其实SyntaxHighlighter还提供了一些主题供人选择,只需将相应的theme.css引入到script中即可,也是十分简单,这里就不在赘述了。