51工具盒子Highlight {#Highlight}
以使用Kimbie dark主题配色为例子
配置hljs为true {#配置hljs为true}
修改Hexo根目录下的_config.yml
|---------------------|----------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 | highlight: enable: true line_number: true auto_detect: false tab_replace: hljs: true |
配置highlight_theme为false {#配置highlight-theme为false}
修改主题配置文件
|-----------|--------------------------------|
| 1 | highlight_theme: false |
下载和修改CSS文件 {#下载和修改CSS文件}
在Github上找到这个CSS
在Hexo的根目录source文件夹下创立一个self文件夹，在self文件夹创建一个Kimbiedark.css文件
把Github上Kimbie dark的CSS代码复制到Kimbiedark.css去。（你也可以直接从Github上下载这个CSS）
Kimbiedark.css代码如下
|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | /* Name: Kimbie (dark) Author: Jan T. Sott License: Creative Commons Attribution-ShareAlike 4.0 Unported License URL: https://github.com/idleberg/Kimbie-highlight.js */ /* Kimbie Comment */ .hljs-comment, .hljs-quote { color: #d6baad; } /* Kimbie Red */ .hljs-variable, .hljs-template-variable, .hljs-tag, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-regexp, .hljs-meta { color: #dc3958; } /* Kimbie Orange */ .hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params, .hljs-deletion, .hljs-link { color: #f79a32; } /* Kimbie Yellow */ .hljs-title, .hljs-section, .hljs-attribute { color: #f06431; } /* Kimbie Green */ .hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #889b4a; } /* Kimbie Purple */ .hljs-keyword, .hljs-selector-tag, .hljs-function { color: #98676a; } .hljs { display: block; overflow-x: auto; background: #221a0f; color: #d3af86; padding: 0.5em; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } |
修改这个CSS文件为
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | /* Name: Kimbie (dark) Author: Jan T. Sott License: Creative Commons Attribution-ShareAlike 4.0 Unported License URL: https://github.com/idleberg/Kimbie-highlight.js */ /* 新添加的内容 ------------------------------------- --hl-color 代码框字体顔色 【必须】 (把下面.hljs的 color复制到这里来) --hl-bg 代码框背景色 【必须】 (把下面.hljs的 background复制到这里来) --hltools-bg: #321a0f 代码框顶部工具栏背景色 【可选】(如果你关掉了 copy、lang 和 shrink,可不用配置这个） --hltools-color: #fff 代码框顶部工具栏字体顔色 【可选】(如果你关掉了 copy、lang 和 shrink,可不用配置这个） --hlnumber-bg: #221a0f 代码框行数背景色 【可选】(如果已经关掉 line_number,可以不用配置这个) --hlnumber-color: #fff 代码框行数字体顔色 【可选】 (如果已经关掉 line_number,可以不用配置这个) --hlscrollbar-bg: #d3af86 代码框滚动条顔色 【可选】（默认为主题主顔色） --hlexpand-bg: #d3af86 代码框底部展开背景色 【可选】(如果已经关掉 highlight_height_limit,可以不用配置这个) */ :root { --hl-color: #d3af86; --hl-bg: #221a0f; --hltools-bg: #321a0f; --hltools-color: #fff; --hlnumber-bg: #221a0f; --hlnumber-color: #fff; --hlscrollbar-bg: #d3af86; --hlexpand-bg: #d3af86; } /* Kimbie Comment */ .hljs-comment, .hljs-quote { color: #d6baad; } /* Kimbie Red */ .hljs-variable, .hljs-template-variable, .hljs-tag, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-regexp, .hljs-meta { color: #dc3958; } /* Kimbie Orange */ .hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params, .hljs-deletion, .hljs-link { color: #f79a32; } /* Kimbie Yellow */ .hljs-title, .hljs-section, .hljs-attribute { color: #f06431; } /* Kimbie Green */ .hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #889b4a; } /* Kimbie Purple */ .hljs-keyword, .hljs-selector-tag, .hljs-function { color: #98676a; } /* 更改的内容 把.hljs改为 #article-container figure.highlight .hljs *、 /* ------------------------------------- */ #article-container figure.highlight .hljs { display: block; overflow-x: auto; background: #221a0f; color: #d3af86; padding: 0.5em; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } |
引入文件 {#引入文件}
修改主题配置文件
|---------------|-----------------------------------------------------------------------------|
| 1 2 3 | inject: head: - <link rel="stylesheet" href="/self/Kimbiedark.css"> |
运行Hexo {#运行Hexo}
运行Hexo后，应该可以看到修改的效果
Prismjs {#Prismjs}
以使用prism-duotone-light主题配色为例子
配置highlight_theme为false {#配置highlight-theme为false-1}
修改主题配置文件
|-----------|--------------------------------|
| 1 | highlight_theme: false |
下载和修改CSS文件 {#下载和修改CSS文件-1}
在Github上找到这个CSS
在 Hexo 的根目录source文件夹下创立一个self文件夹，在self文件夹创建一个duotone.css文件
把Github上prism-duotone-light的 CSS 代码复制到duotone.css去。（你也可以直接从Github上下载这个CSS）
prism-duotone-light代码如下
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 | /* Name: Duotone Light Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css) Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) */ code[class*="language-"], pre[class*="language-"] { font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; font-size: 14px; line-height: 1.375; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; background: #faf8f5; color: #728fcb; } pre > code[class*="language-"] { font-size: 1em; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { text-shadow: none; background: #faf8f5; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { text-shadow: none; background: #faf8f5; } /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #b6ad9a; } .token.punctuation { color: #b6ad9a; } .token.namespace { opacity: .7; } .token.tag, .token.operator, .token.number { color: #063289; } .token.property, .token.function { color: #b29762; } .token.tag-id, .token.selector, .token.atrule-id { color: #2d2006; } code.language-javascript, .token.attr-name { color: #896724; } code.language-css, code.language-scss, .token.boolean, .token.string, .token.entity, .token.url, .language-css .token.string, .language-scss .token.string, .style .token.string, .token.attr-value, .token.keyword, .token.control, .token.directive, .token.unit, .token.statement, .token.regex, .token.atrule { color: #728fcb; } .token.placeholder, .token.variable { color: #93abdc; } .token.deleted { text-decoration: line-through; } .token.inserted { border-bottom: 1px dotted #2d2006; text-decoration: none; } .token.italic { font-style: italic; } .token.important, .token.bold { font-weight: bold; } .token.important { color: #896724; } .token.entity { cursor: help; } pre > code.highlight { outline: .4em solid #896724; outline-offset: .4em; } /* overrides color-values for the Line Numbers plugin * http://prismjs.com/plugins/line-numbers/ */ .line-numbers .line-numbers-rows { border-right-color: #ece8de; } .line-numbers-rows > span:before { color: #cdc4b1; } /* overrides color-values for the Line Highlight plugin * http://prismjs.com/plugins/line-highlight/ */ .line-highlight { background: rgba(45, 32, 6, 0.2); background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0)); background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0)); } |
修改这个CSS文件为
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 | /* 新添加的内容 ------------------------------------- --hl-color 代码框字体顔色 【必须】 (把下面 pre[class*="language-"]的 color 复制到这里来) --hl-bg 代码框背景色 【必须】 (把下面 pre[class*="language-"]的 background复制到这里来) --hltools-bg: #321a0f 代码框顶部工具栏背景色 【可选】(如果你关掉了 copy、lang 和 shrink,可不用配置这个） --hltools-color: #fff 代码框顶部工具栏字体顔色 【可选】(如果你关掉了 copy、lang 和 shrink,可不用配置这个） --hlnumber-bg: #221a0f 代码框行数背景色 【可选】(如果已经关掉 line_number,可以不用配置这个) --hlnumber-color: #fff 代码框行数字体顔色 【可选】 (如果已经关掉 line_number,可以不用配置这个) --hlscrollbar-bg: #d3af86 代码框滚动条顔色 【可选】（默认为主题主顔色） --hlexpand-bg: #d3af86 代码框底部展开背景色 【可选】(如果已经关掉 highlight_height_limit,可以不用配置这个) */ :root { --hl-color: #728fcb; --hl-bg: #faf8f5; --hltools-bg: xxxxxxx; --hltools-color: xxxxxxx; --hlnumber-bg: xxxxxxx; --hlnumber-color: xxxxxxxx; --hlscrollbar-bg: xxxxx; --hlexpand-bg: xxxxxxx } /* ------------------------------------- */ /* 这些可以删除（可留着，如果有冲突，请删除） */ /* ------------------------------------- */ code[class*="language-"], pre[class*="language-"] { font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; font-size: 14px; line-height: 1.375; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; background: #faf8f5; color: #728fcb; } pre > code[class*="language-"] { font-size: 1em; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { text-shadow: none; background: #faf8f5; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { text-shadow: none; background: #faf8f5; } /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; } /* ------------------------------------- */ /* 到这里为止，可以删除 */ .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #b6ad9a; } .token.punctuation { color: #b6ad9a; } .token.namespace { opacity: .7; } .token.tag, .token.operator, .token.number { color: #063289; } .token.property, .token.function { color: #b29762; } .token.tag-id, .token.selector, .token.atrule-id { color: #2d2006; } code.language-javascript, .token.attr-name { color: #896724; } code.language-css, code.language-scss, .token.boolean, .token.string, .token.entity, .token.url, .language-css .token.string, .language-scss .token.string, .style .token.string, .token.attr-value, .token.keyword, .token.control, .token.directive, .token.unit, .token.statement, .token.regex, .token.atrule { color: #728fcb; } .token.placeholder, .token.variable { color: #93abdc; } .token.deleted { text-decoration: line-through; } .token.inserted { border-bottom: 1px dotted #2d2006; text-decoration: none; } .token.italic { font-style: italic; } .token.important, .token.bold { font-weight: bold; } .token.important { color: #896724; } .token.entity { cursor: help; } pre > code.highlight { outline: .4em solid #896724; outline-offset: .4em; } /* overrides color-values for the Line Numbers plugin * http://prismjs.com/plugins/line-numbers/ */ .line-numbers .line-numbers-rows { border-right-color: #ece8de; } .line-numbers-rows > span:before { color: #cdc4b1; } /* overrides color-values for the Line Highlight plugin * http://prismjs.com/plugins/line-highlight/ */ .line-highlight { background: rgba(45, 32, 6, 0.2); background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0)); background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0)); } |
引入文件 {#引入文件-1}
修改主题配置文件
|---------------|--------------------------------------------------------------------------|
| 1 2 3 | inject: head: - <link rel="stylesheet" href="/self/duotone.css"> |
运行Hexo {#运行Hexo-1}
运行Hexo后，应该可以看到修改的效果
官网链接：https://butterfly.js.org/posts/b37b5fe3/
