自定义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样式美化博客园

原文地址:https://www.cnblogs.com/noneplus/p/11332549.html

时间: 2024-10-31 19:15:46

自定义markdown代码高亮显示-cnblog的相关文章

自定义sublime代码片段

sublime text 已经有一些他们内置的一些代码片段,但是有时候,这些并不能满足我们,这就需要我们自定义一些代码片段. 步骤如下: 1.打开sublime text 2.选择 tools -> new snippet 就会打开一个未命名的文件,代码如下: <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional:

sublimi 自定义快捷代码

选择打开tools ->developer->new snippet <snippet> <content><![CDATA[Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello&l

关于UITabBar各部分自定义的代码片段

一.自定义TabBar选项卡背景默认UITabBarController的TabBar背景是黑色的,如何自定义成背景图片呢? UITabBarController *tabBarController = [[UITabBarController alloc] init]; // 获取选项卡控制器视图的所有子视图,保存到一数组中 NSArray *array = [tabBarController.view subviews]; // 索引值为1的应该就是TabBar UITabBar  *tab

友坚4412开发板怎样在source insight中使汇编代码高亮显示?

友坚4412开发板怎样在source insight中使汇编代码高亮显示?4412开发板 做ARM嵌入式开发时,有时得整汇编代码,但在SIS里建立PROJECT并ADD TREE的时候,根据默认设置并不会把该TREE里面所有汇编文件都包含进来,默认只加了.inc和.asm后缀的, .s后缀的没有.而且用SIS打开.s的文件时,一片黑白没有色彩, 感觉回到DOS的EDIT时代里了. 解决方法是在Options->Document Options里面,点左上的Document Type下拉菜单,选择

sublime自定义snippet代码片段

相信很多人喜欢sublime编辑工具有两个原因:第一sublime很轻巧方便:第二sublime提供很多自定义拓展功能,包括很简单且和很好用的代码片段功能snippet文件. 今天,在这里就介绍下sublime如何自定义各种代码片段,先来感受一下效果: 上面看到的是我用sublime初始化一个html文件的操作gif,相信这是很多人在新项目必经的步骤.而我里面不同的时,不需要任何复制,只需几秒钟就完成整个初始化的工作,这就是sublime的魅力之一:代码片段snippet. 下面我就拿上面的动画

phpstorm 强大的活动模板 可以自定义注释,代码段,根据cms订制自动提示

http://jingyan.baidu.com/article/8275fc86badd6346a03cf6aa.html [PHP] phpstorm的使用(1) http://v.youku.com/v_show/id_XNTY0MzE3NDI4.html (20分钟之后的视频内容讲的非常有用) PhpStorm设置代码碎片Snippets 百度经验http://jingyan.baidu.com/article/8275fc86badd6346a03cf6aa.html phpstorm

最全Pycharm教程(23)——Pycharm编辑器功能之代码高亮显示及错误提示机制

1.代码高亮显示 当你在编辑框中输入代码时,Pycharm会在后台对其进行分析.这个IDE能够智能的识别出关键字.变量.字符串.注释等,并以不同的字体颜色进行显示.Pycharm的符号配色方案定义在 Colors and Fonts settings中(Ctrl+Alt+S→IDE Settings→Editor→Color and Fonts). 我们先选择编程语言,这里选择Python,然后根据个人习惯来设置字符配色方案.然而这里Pycharm自带的配色方案是不可更改的,我们需要先创建一个拷

百度ueditor代码高亮显示

1 <script type="text/javascript" charset="utf-8" src="ueditor1_4_3-utf8-php/ueditor.config.js"></script> 2 3 <!--加入高亮的js和css文件,如果你的编辑器和展示也是一个页面那么高亮的js可以不加载--> 4 <script type="text/javascript" ch

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

打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix   就是你自定义的快捷键 body    就是你自定义的代码片段 description 就是这段代码的注释 demo :  { "Print to console": { "prefix": "nodes", "body": [ "const http = require('http')", "