python设置黑色主题手机壁纸_博客园代码黑色主题高亮设置

本文介绍了如何使用highlight.js为博客园的代码块设置黑色主题,包括下载highlight.js,选择Monokai Sublime主题,以及解决样式冲突的方法。通过自定义CSS,实现了Markdown博客的代码高亮显示。
摘要由CSDN通过智能技术生成

碎碎念:

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

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

小提示:

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

1. highlight.js插件介绍

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

02db2681bcf34c3724d1747962de0a0f.png

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

2. 操作步骤

2-1. 下载highlight

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

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

c95534debf7266e461f5daef186f5fd9.png

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

814f51d0883dde9782bd0e8aa4efd468.png

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

0557a7d24c0ebcaff47f1dcd619de6d0.png

2-2. 开始修改

小提示:

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

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

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

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

然后复制里面的css代码

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

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

30a76ffc327d1f94c92a5be22a25bd91.png

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值