博客园添加SyntaxHighlighter

这个版本添加的样式在博客园里会错乱,我修正了一些样式,请参考http://www.cnblogs.com/timelyxyz/p/3633757.html

1. 切换编辑器至markdown

个人设置选项->默认编辑器->markdown
推荐一在线md编辑器(附语法): https://www.zybuluo.com/mdeditor

2. 上SyntaxHighlighter官网下载引用文件,并上传到博客园

官网下载:http://alexgorbatchev.com/SyntaxHighlighter/download
进入博客园“个人设置->文件”,上传下载来的shCore.js和shCore.css,如下图所示

3. 进入“个人设置->页首Html代码”,添加SyntaxHighlighter引用

<script type="text/javascript" src="第2步中获得的shCore.js的url"></script>
<link type="text/css" rel="stylesheet" href="第2步中获得的shCore.css的url"/>
<script type="text/javascript">SyntaxHighlighter.all();</script> 

4. 使用高亮,添加<pre></pre>标签对,<pre>添加属性:'class="brush: 引用代码使用的语言;"',e.g.

<pre class="brush: js;">
function helloSyntaxHighlighter()
{
	return "hi!";
}
</pre>

5. 以上均参考SyntaxHighlighter官方使用说明。

posted on 2014-03-14 01:33  timelyxyz  阅读(573)  评论(0编辑  收藏  举报

导航