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

最新推荐文章于 2024-01-04 17:29:15 发布
最新推荐文章于 2024-01-04 17:29:15 发布
阅读量825 收藏 1
点赞数
文章标签： markdown json
原文链接：http://www.cnblogs.com/noneplus/p/11332549.html
版权

1565432258664

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

cnblog里已经有闻道先者贴出代码了，

https://www.cnblogs.com/liutongqing/p/7745413.html

效果大概是这样的：

1565432579871

1565432592298

然后自己做了一些自定义修改：

<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>

最终效果是这样的：

1565432707525

1565432736187

把引用的代码和自定义的代码一起粘出来：

下面这一段放在页面定制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

WY2718
关注
使用highlightjs自定义markdown代码高亮
jumping_frog
04-26 4895
使用highlightjs自定义markdown代码高亮概述Mou在mac上的 markdown 编辑器，很简约，可惜Mou好像只支持标准的 markdown 语法，不支持 markdown Extra ,比如[toc]生成目录和代码高亮等，所以才有了本文。highlight.js是一个github上的代码高亮插件，支持大多数的语言，能自动识别语言，还可以随意切换不同的代码块样式。
vscode 中Markdown中的math的语法高亮
m0_37028767的博客
07-28 1433
vscode自定义Markdown中的math的语法高亮 打开C:\Users\thinkpad\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\markdown-basics\syntaxes中的markdown.tmLanguage.json文件 然后将内容改为以下代码。 { "information_for_contributors":["This file has been converted from ht
Markdown文字背景自定义高亮+字体自定义颜色 简单操作
最新发布
qq_55285829的博客
01-04 859
CSS 颜色 (w3school.com.cn)
Markdown编辑器(Haroopad)代码块语法高亮方法及支持语言
Tianyi_liang的博客
09-06 2106
在MarkDown语法中，使用代码块的方法是使用```来包裹住代码部分，如果代码内部也有这种符号肯能会造成无法正常显示的情况，这时只要将内部的代码使用Tab键缩进两次即可正常显示。在Haroopad中，如果只输入```则会始终显示黑色字体而不会有高亮标记，并不像某些编辑器那样会自动识别或是有默认配色，这时需要在```后面加上语言名字或者缩写（key）即可，比如： ```SQL INSERT
CSDN Markdown编辑器插入代码块时不能代码高亮
happyCoding1024的博客
06-02 1544
当我们点击插入代码块按钮，会提示我们在这里插入代码片，我们在三个单引号对之间输入代码后发现并没有实现代码块高亮， ‘’’ 在这里插入代码片 ‘’’ 如下图所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>淘宝网</title>...
markdown-to-jsx：:factory:最轻巧，可自定义的React markdown组件
02-03
markdown-to-jsx 最轻巧，可定制的React markdown组件。 markdown-to-jsx使用经过大量修改的分支作为其解析引擎，并以多种方式扩展了它，使您的生活更轻松。 值得注意的是，此软件包还具有以下其他优点： 支持任意...
markdown-it-prism：使用棱镜突出显示markdown-it中的代码块
02-12
const md = require ( 'markdown-it' ) ( ) ; const prism = require ( 'markdown-it-prism' ) ; md . use ( prism , options ) ; 该插件会将必要的标记插入所有代码块中。 在HTML中以获取突出显示的代码。 选件 ...
markdown-it-image-size:向markdown-it呈现的图像标签添加宽度和高度
03-05
Markdown-it是一个流行的JavaScript库，它允许开发者自定义Markdown语法的解析规则，以满足特定需求。 Markdown是一种轻量级的标记语言，它使得人们能够用纯文本格式编写文档，同时保持整洁和易于阅读的结构。在...
前端开源库-markdown-it-highlightjs
08-30
Markdown-it支持多种自定义插件，Markdown-it-HighlightJS就是其中之一，用于处理代码高亮显示。 Highlight.js是一款流行的JavaScript代码高亮库，它可以自动识别多种编程语言，并应用相应的颜色样式。它具有丰富的...
Markdown 与 CSDN博客代码高亮
RedKeyer的博客
04-24 243
MarkDown支持多种语言的代码高亮，以下介绍下使用方法： 使用前： public static void main(String[] args){ System.out.println(“Hello”); } 代码高亮配置格式(去掉//，```这个是键盘左上角1旁边那个)： //```key //代码段 //``` 使用后（ CSDN写博客预览时没有代码行号，但是发布博客后就会...
Laravel&html笔记-MarkDown增加展示时代码高亮功能
IT1995的博客
07-25 814
折腾了几个小时，很简单的功能，方向错了。在此记录下，实现的功能是这样的。将这样的效果转成这样的效果这里我在前端添加了点css和js。
CSDN markdown 代码块高亮
宁静致远
10-18 6440
在需要高亮的代码块的前一行及后一行使用三个反引号“ ` ” （注意这个反引号的输入是 英文输入模式下tab键上面那个），同时第一行反引号后面表面代码块所使用的语言，如下图： 代码效果如下： int sched_get_priority_max(int policy); int sched_get_priority_min(int policy); 参考： https://blog.csdn...
MarkDown 编辑高亮
amihui的博客
06-06 7634
MarkDown 编辑高亮 更多前端工具和笔记博客： https://yaohuihou.github.io/ MarkDown 文档 主要是为了在引入一些代码的时候能够高亮显示，这样界面可以更加友好 没有使用： # 创建一个 markdown 文件 echo '# Hello VuePress' > README.md 使用之后 # 创建一个 markdown 文件 echo '# H...
完美：C# Blazor中显示Markdown并添加代码高亮
zls365365的博客
03-15 414
昨天发了一篇介绍这个库：C# Blazor中显示Markdown文件，介绍怎么在Blazor中显示Markdown内容的文章，文章内的代码是没有高亮的，思来相去，还是要做好，于是百度到这篇...
markdown java 代码高亮_Markdown 入门教程
weixin_42305648的博客
02-26 3556
Markdown 代码高亮1. 前言Markdown 的代码高亮是对代码块语法的扩展。即通过对代码块进行语法标注，对其在渲染输出时匹配不同的样式。代码高亮模块是 Markdown 的一种扩展语法，通常通过第三方的高亮插件完成支持。常见的高亮插件实现如 Typora 使用的 「codemirror」，还有在网页中应用较多的 「highlightjs」等。大部分的 Markdown 编辑器或者编辑环境...
vue3-markdown-it::sparkles: 一个很棒的 Vue 3 markdown-it 包装插件，甚至可以支持外部插件！
07-23
markdown-it-highlightjs - 为代码块添加高亮 markdown-it-ins - 添加标签 markdown-it-mark - 添加标记/突出显示 markdown-it-sub - 添加下标 markdown-it-sup - 添加上标 markdown-it-task-lists - 添加任务列表 ...
MarkDown 代码块高亮显示
一只奋斗的猪
03-09 3216
这里使用的是Dart语言，其他语言也类似： 未使用前的效果： ``` void main() => runApp(MyApp()); ``` 使用后的效果: ```dart void main() => runApp(MyApp()); ``` 【注】在不同的网站中由于编辑器的不同，显示的样式也不相同。 这里的dart，可以换成其他语言，如java、c...
想有自己的博客吗？浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-07 3732
MarkDown，写作神器，还是有必要掌握一下。 以下为一个最简单的，使浏览器支持MarkDown渲染和语法高亮的demo，可以为以后的个人的markdown博客储备。 使用了流行的markdown-it(MarkDown渲染),highlight.js（语法高亮）和mermaid.js（画流程图、时序图等的js库）组件。 附图，浏览器显示出来的效果： 附完整的html的使用...
全新的同步渲染 markdown 文章 + 高亮更新 书写体验
weixin_34383618的博客
10-28 179
前言 16 年在 SF 中发布了文章 "探究SegumentFault Markdown编辑器"，目的是仿 SF 线上书写 Markdown 文档的体验：高亮定位修改节点 在上述文章中的工具已经不再维护（
highlight实现自定义代码块高亮及左右滑动
qq_39309802的博客
02-03 1159
在网页使用过程中，经常会用到代码的展示。而不同颜色的代码，可以让代码看起来更直观，也更美观。 找了几个不同的插件，觉得highlight的插件比较实用，而且用起来炒鸡简单。 1.引入css文件 <!--开启代码高亮css--> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dark.min.css"> 2.引入js文件 &l.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值