博客园设置代码样式

 

使用syntaxhighlighter插件对代码进行高亮。

 

1. 下载syntaxhighlighter

https://files.cnblogs.com/heyuquan/SyntaxHighlighter%E7%A4%BA%E4%BE%8B%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD.rar

2. 将需要的css样式上传到博客园（管理-->文件），然后在设置【页首html代码】添加css引用：

<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/cc11001100/shThemeEclipse.css">
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/cc11001100/shCoreEclipse.css">

 

3. 插入代码时需要进行html转义，否则可能会出现奇怪的问题，首先使用博客园自带的编辑器插入代码，然后使用html视图手动修改样式，样式即会被应用：

<div class="cnblogs_Highlighter">
<pre class="brush:sql;gutter:true;">
 自己的代码
</pre>
</div>

 注意插入的时候只选择PlainText即可，后期样式会进行自动添加的。

 

效果如图：

 

 

HTML在线转义： http://www.sojson.com/rehtml

感谢这位博主的插件： http://www.cnblogs.com/wbbice/p/5596095.html

 

 

 

 

.