这个代码高亮。。一点儿都不高亮......

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的更多相关文章

  1. 使用highlightjs自定义markdown代码高亮

    目录 概述 实现方法 概述 最近使用markdown来写一些技术文档和博客,觉得真心不错,这才是程序员该用的编辑器嘛~~ Mou在mac上的 markdown 编辑器,很简约,可惜Mou好像只支持标准 ...

  2. sublime 自定义快捷代码

    选择打开tools ->developer->new snippet <snippet> <content><![CDATA[Hello, ${1:this} ...

  3. 自定义sublime代码片段

    sublime text 已经有一些他们内置的一些代码片段,但是有时候,这些并不能满足我们,这就需要我们自定义一些代码片段. 步骤如下: 1.打开sublime text 2.选择 tools -&g ...

  4. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  5. html中代码高亮显示

    <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> ...

  6. sublime自定义snippet代码片段

    相信很多人喜欢sublime编辑工具有两个原因:第一sublime很轻巧方便:第二sublime提供很多自定义拓展功能,包括很简单且和很好用的代码片段功能snippet文件. 今天,在这里就介绍下su ...

  7. VS code自定义用户代码片段snippet

    打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix   就是你自定义的快捷键 body    就是你自定义的代码片段 description 就是这 ...

  8. Jmeter使用自定义编写代码

    原文地址:http://blog.csdn.net/li_ok/article/details/1487685 我们在做性能测试时,有时需要自己编写测试脚本,很多测试工具都支持自定义编写测试脚本,比如 ...

  9. [MIP]mip-script组件自定义 JS 代码使用限制

    自mip升级v2版本后,多了一个mip-script组件,很多人就都以为可以写自定义js代码了!然并卵,MIP2页中还是一样不允许自定义javascript代码,所有的交互须通过组件实现. 引用官方说 ...

随机推荐

  1. WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现

    WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现 一.漏洞描述 Weblogic管理端未授权的两个页面存在任意上传getshell漏洞,可直接获取权限.Oracle 7月 ...

  2. Spring Cloud Alibaba | Nacos服务注册与发现

    目录 Spring Cloud Alibaba | Nacos服务注册与发现 1. 服务提供者 1.1 pom.xml项目依赖 1.2 配置文件application.yml 1.3 启动类Produ ...

  3. windows开机自启python服务(任务计划程序+bat脚本)

    需求:根据上海某银行 的需求,使用到获取数据服务的软件 只能在windows上运行,所以有 windows系统开机用户登录后自启动python flask服务 的需求: 相关工具:win10系统中,使 ...

  4. C语言中的函数与数学上的函数很类似

    函数,是C语言编程中一个很重要的概念,重要到个人认为可以与指针并驾齐驱.好多教材.老师.学习资源都会专门挑出一章来讲函数.我今天也来说说函数,只不过我是从数学课上的函数来引申到C语言中的函数. 先来说 ...

  5. KdTree && Octree 原理学习对比以及可视化分析--"索引树"

    1. Kdtree 原理 k-d树(k-dimensional树的简称),是一种分割k维数据空间的数据结构.主要应用于多维空间关键数据的搜索(如:范围搜索和最近邻搜索): 索引结构中相似性查询有两种基 ...

  6. 【学习笔记】动态规划—斜率优化DP(超详细)

    [学习笔记]动态规划-斜率优化DP(超详细) [前言] 第一次写这么长的文章. 写完后感觉对斜优的理解又加深了一些. 斜优通常与决策单调性同时出现.可以说决策单调性是斜率优化的前提. 斜率优化 \(D ...

  7. MyBatis 接口多参数的处理方法

    From<MyBatis从入门到精通> 1.接口类中增加的方法: /* 2.7 多个接口参数的用法 多个参数时,可以选取的方案有:使用Map类型或者使用@Param注解 使用Map类型作为 ...

  8. python函数知识一 函数初始、定义与调用、返回值、参数和函数的好处+菜中菜

    第四章 函数 1.函数初识: def :关键字 -- 定义 函数名:和变量的定义方式一样 (): 用于参数传递,: 形参:函数的定义中()内的是形参 实参:调用的()内是实参 传参:调用时将实参传递给 ...

  9. 网页缓存相关的HTTP头部信息详解

    前言 之前看完了李智慧老师著的<大型网站技术架构-核心原理与案例分析>这本书,书中多次提起浏览器缓存的话题,恰是这几天生产又遇到了一个与缓存的问题,发现自己书是没少看,正经走心的内容却不多 ...

  10. 洛谷P2001 硬币的面值 题解

    题目链接:https://www.luogu.org/problemnew/show/P2001 这题的数据范围吓得我很慌. 分析: 这道题蒟蒻本来想用背包的,但是发现m太大,一写肯定炸,然后看到数据 ...