园子里有人问到了这个问题,所以写篇博客简单介绍下。
博客园代码高亮使用的插件是 ,本来想替换成我 使用的 ,但是比较坑爹的是,解析过程在服务端已经完成了,为什么这么说呢?因为我禁用浏览器 JS 重新刷新页面时,
里面的所有代码都已经被解析成一个个
- pre>code
了:
- span
没办法,只能通过替换主题来达到效果了。
博客园最大的优点就是足够的开放,页面想加什么 CSS、JS 都随心所欲,这一点给博客园点个赞!
highlight 官网提供了 77 种主题: , 大家可以选择一款自己喜欢的,然后放到博客里面。
由于直接将样式加进来存在一些样式冲突,还需要一些调整,调试的时候需要来回改,所以,不太建议采用引入整个 CSS 文件的方式,建议通过
功能来实现,因为主题 CSS 代码很少。
- 定制页面CSS
下面以我使用的
为例来介绍。
- Monokai Sublime
下载
包,进入主题文件夹找到你想要的主题文件,然后复制里面的 CSS 代码,进入你的博客园主页,管理 -> 设置,找到页面定制 CSS 部分,粘贴到最后:
- highlight.js
由于调整的时候可能会出一些问题,建议你在晚上人少的时候修改。
提交之后存在一些样式冲突,一般是背景色和字体颜色,我偷懒直接使用
来强制覆盖了。
- !important
另外代码是会换行的,这个我不太喜欢,所以我加了如下样式:
- pre {
- /*控制代码不换行*/
- white - space: pre;
- word - wrap: normal;
- }
微调几次后一般就没啥问题了。
需要特别说明的是,由于每个人使用了不同的主题,直接应用可能还是会有各种各样的问题,还是需要大家自己去微调。
我的 CSS 代码:
- /*
- 代码高亮开始,使用了一个叫Monokai Sublime的黑色主题皮肤,直接拿过来还不行,有一些样式冲突,还要自己稍微改一些地方
- Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
- */
- pre {
- /*控制代码不换行*/
- white - space: pre;
- word - wrap: normal;
- }.cnblogs - markdown.hljs {
- display: block;
- overflow - x: auto;
- padding: 0.5em;
- background: #23241f ! important;
- color: #FFF;
- white - space: pre;
- word -
- break: normal;
- }.hljs,
- .hljs - tag,
- .hljs - subst {
- color: #f8f8f2;
- }.hljs - strong,
- .hljs - emphasis {
- color: #a8a8a2;
- }.hljs - bullet,
- .hljs - quote,
- .hljs - number,
- .hljs - regexp,
- .hljs - literal,
- .hljs - link {
- color: #ae81ff;
- }.hljs - code,
- .hljs - title,
- .hljs - section,
- .hljs - selector - class {
- color: #a6e22e;
- }.hljs - strong {
- font - weight: bold;
- }.hljs - emphasis {
- font - style: italic;
- }.hljs - keyword,
- .hljs - selector - tag,
- .hljs - name,
- .hljs - attr {
- color: #f92672;
- }.hljs - symbol,
- .hljs - attribute {
- color: #66d9ef;
- }.hljs - params,
- .hljs - class.hljs - title {
- color: #f8f8f2;
- }.hljs - string,
- .hljs - type,
- .hljs - built_in,
- .hljs - builtin - name,
- .hljs - selector - id,
- .hljs - selector - attr,
- .hljs - selector - pseudo,
- .hljs - addition,
- .hljs - variable,
- .hljs - template - variable {
- color: #e6db74;
- }.hljs - comment,
- .hljs - deletion,
- .hljs - meta {
- color: #75715e;
- }
- /*黑色主题皮肤结束*/
来源: http://www.cnblogs.com/liuxianan/p/custom-cnblogs-highlight-theme.html