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

Blackjun 发布于2019-08-29 14:20 / 701人阅读

摘要：之前做了博客园自定义样式的相关设置，博客园界面变得顺眼一点了。但是代码块还是看着比较变扭，习惯黑色主体编辑器的我，颜控的我，不能忍啊。

碎碎念：

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

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

小提示：
具体的操作实现参考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

云服务器 GPU云服务器博客园博客园webrtc wcf博客园 android博客园

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113060.html

前端小白也能快速学会的博客园博客美化全攻略

摘要：前端小白也能快速学会的博客园博客美化全攻略呦，博客园的自我修养是什么第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔美化方法论简介一般而言，需要选一个默认的，然后在该基础上调整。或者也可进博客园园子页面，发状态博客园团队，申请开通权限。前端小白也能快速学会的博客园博客美化全攻略 A呦V，博客园er的自我修养是什么？第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔~ 美化方法论简...

StonePanda 2019-08-23 15:09 评论0 收藏0
配置一个强大的vim

摘要：我在配置文件的第一行添加上这样的配置插件改变了原先只能把插件全部扔到目录下的操作方式，使得各个插件可以以一个独立的文件夹存在于目录中，添加和删除插件都变的非常清爽。首先推荐简明Vim练级攻略学习Vim的使用。以前我的vim是这样配置的（参见我在博客园的博客），但是感觉安装的插件数量太少，而且将所有的都写在一个配置文件里面不好管理，所以现在想在一般的配置的基础上，找一些好的插件...

LeoHsiun 2019-06-28 10:11 评论0 收藏0
我是如何将博客转成PDF的

摘要：但发现导出来的没有高亮语法没有语法高亮咋看啊，所以到这里我就放弃了，将就用一下博客园生成的吧爬虫学习上面提供的接口是一个生成一个文件，我是不可能一个一个将链接和标题放上去生成的因为博客园上发的也将近篇了。前言只有光头才能变强之前有读者问过我：3y你的博客有没有电子版的呀？我想要份电子版的。我说：没有啊，我没有弄过电子版的，我这边有个文章导航页面，你可以去文章导航去找来看呀..然后...

mindwind 2019-08-16 13:58 评论0 收藏0
博客园样式

摘要：美化博客侧边栏公告博客园侧边栏样式插入时钟插入访客来源插入总访客数插入通讯组件网易音乐将生成后的代码进博客园后台设置博客侧边栏公告支持代码支持代码输入框中下面的是笔者博客的样式，不做解释。博客园侧边栏样式插入时钟：http://www.blogclock.cn/插入访客来源：http://s11.flagcounter.com/more/Fe64/插入总访客数：http://www.ama...

番茄西红柿 2019-04-23 13:40 评论0 收藏0
提高 JavaScript 开发效率的高级 VSCode 扩展！

摘要：使用高亮类似的扩展更强大的高亮扩展，具有更多功能。为了检查和检查响应，使用了之类的工具。在这里获取这两个扩展自动闭合标记和自动重命名标记。类似的扩展显示提交历史的精美图表等等。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ Quokka.js Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行...

zhigoo 2019-08-23 14:00 评论0 收藏0