自定义markdown代码高亮显示-cnblog

这个代码高亮。。一点儿都不高亮......
cnblog里已经有闻道先者贴出代码了,
https://www.cnblogs.com/liutongqing/p/7745413.html
效果大概是这样的:


然后自己做了一些自定义修改:
<style>
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #569CD6;
}
.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: #CE9178;
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #6A9955;
}
.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #B5CEA8;
}
.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #DCDCAA;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #569CD6;
}
.hljs-attr {
color: #9CDCFE;
}
.cnblogs-markdown .hljs
{
background: #1E1E1E !important;
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
最终效果是这样的:


把引用的代码和自定义的代码一起粘出来:
下面这一段放在页面定制CSS里:
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
pre {
/*控制代码不换行*/
white-space: pre;
word-wrap: normal;
}
.cnblogs-markdown .hljs {
font-size: 16px!important;
font-family: consolas,monospace !important;
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f !important;
color: #FFF;
white-space: pre;
word-break: normal;
padding: 10px 15px !important;
}
.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;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #569CD6;
}
.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: #CE9178;
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #6A9955;
}
.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #B5CEA8;
}
.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #DCDCAA;
}
//这段放在页首html中
<style>
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #569CD6;
}
.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: #CE9178;
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #6A9955;
}
.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #B5CEA8;
}
.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #DCDCAA;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #569CD6;
}
.hljs-attr {
color: #9CDCFE;
}
.cnblogs-markdown .hljs
{
background: #1E1E1E !important;
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
参考文档:自定义css样式美化博客园
自定义markdown代码高亮显示-cnblog的更多相关文章
- 使用highlightjs自定义markdown代码高亮
目录 概述 实现方法 概述 最近使用markdown来写一些技术文档和博客,觉得真心不错,这才是程序员该用的编辑器嘛~~ Mou在mac上的 markdown 编辑器,很简约,可惜Mou好像只支持标准 ...
- sublime 自定义快捷代码
选择打开tools ->developer->new snippet <snippet> <content><![CDATA[Hello, ${1:this} ...
- 自定义sublime代码片段
sublime text 已经有一些他们内置的一些代码片段,但是有时候,这些并不能满足我们,这就需要我们自定义一些代码片段. 步骤如下: 1.打开sublime text 2.选择 tools -&g ...
- 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示
在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...
- html中代码高亮显示
<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> ...
- sublime自定义snippet代码片段
相信很多人喜欢sublime编辑工具有两个原因:第一sublime很轻巧方便:第二sublime提供很多自定义拓展功能,包括很简单且和很好用的代码片段功能snippet文件. 今天,在这里就介绍下su ...
- VS code自定义用户代码片段snippet
打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix 就是你自定义的快捷键 body 就是你自定义的代码片段 description 就是这 ...
- Jmeter使用自定义编写代码
原文地址:http://blog.csdn.net/li_ok/article/details/1487685 我们在做性能测试时,有时需要自己编写测试脚本,很多测试工具都支持自定义编写测试脚本,比如 ...
- [MIP]mip-script组件自定义 JS 代码使用限制
自mip升级v2版本后,多了一个mip-script组件,很多人就都以为可以写自定义js代码了!然并卵,MIP2页中还是一样不允许自定义javascript代码,所有的交互须通过组件实现. 引用官方说 ...
随机推荐
- JS高级程序设计第2章--精简版
前言:这次是二刷了,想暑假做一次完整的笔记,但用本子来写笔记的话太贵了,可能哪天还丢了..所以还是博客好== 第二章:在HTML中使用JavaScript 2.1 <script>元素: ...
- mysql的数据存储
# pycharm 连接mysql import pymysql username = input("输入用户名:") pwd = input("输入密码:") ...
- ABP开发框架前后端开发系列---(15)ABP框架的服务端和客户端缓存的使用
缓存在一个大型一点的系统里面是必然会涉及到的,合理的使用缓存能够给我们的系统带来更高的响应速度.由于数据提供服务涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发 ...
- 分布式事务(3)---RocketMQ实现分布式事务原理
分布式事务(3)-RocketMQ实现分布式事务原理 之前讲过有关分布式事务2PC.3PC.TCC的理论知识,博客地址: 1.分布式事务(1)---2PC和3PC原理 2.分布式事务(2)---TCC ...
- Bean property 'transactionManagerBeanName' is not writable or has an invalid set
[2017-02-07 11:38:48,458]-[localhost-startStop-1]-[org.springframework.beans.factory.support.Default ...
- nodejs中文乱码问题
node.js暂时不支持GBK或gb2312,所以编程文件(js)需要修改为utf-8格式. 另外如需要返回html代码,在 writeHead 方法中加入 "charset=utf-8&q ...
- 使用wincc vbs脚本查找进程及如何运行进程
使用vbs代码查看某个进程是否在运行,本文要检查的进程名为 QRscan.exe,其代码如下: sub CheckProcess Dim WMI,Objs,Process,ObjSet WMI=Get ...
- 【题解】P1396 营救-C++
原题传送门 这道题目基本就是一个克鲁斯卡尔最小生成树的模板题,唯一不同的是,这道题目的最终目标不是所有点相连,而是只要s和t相连就可以了.还有就是这道题目求的是最小生成树中的最大边权值.但是,克鲁斯卡 ...
- python 的深浅拷贝问题
深浅拷贝概念 基本类型和引用类型数据拷贝的问题.因为基本类型的数据大小是固定的,所以他保存在栈内存中:而引用类型的数据大小不固定,因而保存在堆内存中,单引用类型在栈内存中只保存一个指向堆内存的指针. ...
- 用了三星Dex,我已经快一个月回家没开过电脑了
其实比较早就知道手机使用显示屏扩展的功能,但是以前的技术可能受性能影响体验还不太好.后来让我期待的是Linux On Dex这个项目知道了手机已经如此强大了,可惜只能是是特定机器,因此在618之际乘着 ...