您的位置：首页 > 编程语言

博客园代码黑色主题高亮设置

2018-01-26 10:30 615 查看
碎碎念：

貌似现在喜欢写博客之前先叨叨一下。。。。之前做了《博客园自定义样式》的相关设置，博客园界面变得顺眼一点了。

但是
代码块
还是看着比较变扭，习惯黑色主体编辑器的我，颜控的我，不能忍啊。所以还是改改改。


小提示：

具体的操作实现参考GitHub：
https://github.com/RealAndMe/blogs-style



1. 
highlight.js
插件介绍

代码高亮使用插件
highlight.js
，官网可以查看各种
demo
，highlight.js官网：
https://highlightjs.org/static/demo/




有很多好看的主题，你可以尽情挑选你喜欢的。

2. 操作步骤

2-1. 下载
highlight

先去官网下载
highlight.js
，下载地址https://highlightjs.org/。

点击
get version
按钮进入
语言选择




勾选你常用的语言，在使用插件时会自动检测展示的代码语言，并自动高亮。通常
common
就足够了



点击
download
下载压缩包，然后解压



2-2. 开始修改


小提示：

因为直接将解压后的样式引入会存在一些样式优先级的冲突，还需要一些调整

所以，不建议采用引入整个css文件的方式，而是通过
页面定制css
功能来实现比较好，而且主题的css 代码也相对较少


我选用的主题是
Monokai Sublime
，下面的介绍是基于我选着的主题来的，你也可以选择其他你喜欢的主题，操作基本都是一样的。

在你刚下载解压的
highlight.js
的
styles
文件夹里找到你想要的主题文件

然后
复制里面的css代码


粘贴在
[ 管理 ] - [ 设置 ] - 页面定制css


提交之后，可能会有样式优先级冲突，这里我简单粗暴的采用
!important
来强制覆盖



3. 分享我的代码主题高亮设置

/*
使用了Monokai Sublime的黑色主题皮肤，但是还存在样式冲突，需要自己修改
这个样式只适合使用makedown编写的博客
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: auto;
padding: 1.3em 2em !important;
font-size: 16px !important;
background: #272822 !important;
color: #FFF;
max-height: 700px;
}

.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;
}

/* 黑色主题makedown代码结束 */

/*makedown行间代码样式 */
.cnblogs-markdown code {
color: #c7254e;
border: none !important;
font-size: 1em !important;
background-color: #f9f2f4 !important;
font-family: sans-serif !important;
}


参考文章：

小茗同学：
http://www.cnblogs.com/liuxianan/p/custom-cnblogs-highlight-theme.html


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航