自定义markdown代码高亮显示-cnblog
- 2019 年 10 月 6 日
- 筆記

这个代码高亮。。一点儿都不高亮……
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样式美化博客园