4 | 9 | 15 | 21 | 26 |
[> ]*)(?(-|\d+\.)?)(?\s*)(?~{3,}|`{3,}) *(?.*)\n(?[\s\S]*?)\k\s*\k(?\s*)$/gm; 7 | const config = hexo.config.shiki; 8 | if (!config) return; 9 | const { 10 | theme, 11 | line_number, 12 | beautify, 13 | highlight_copy, 14 | highlight_lang, 15 | highlight_height_limit, 16 | is_highlight_shrink, 17 | css_cdn, 18 | js_cdn, 19 | copy: { success, error, no_support } = {}, 20 | } = config; 21 | const codeblockTheme = themes.has(theme) ? theme : "one-dark-pro"; 22 | const css = hexo.extend.helper.get("css").bind(hexo); 23 | const js = hexo.extend.helper.get("js").bind(hexo); 24 | hexo.extend.injector.register("head_end", () => { 25 | return css( 26 | css_cdn || 27 | "https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.css" 28 | ); 29 | }); 30 | hexo.extend.injector.register("head_end", () => { 31 | return themes.get(codeblockTheme); 32 | }); 33 | if (config.highlight_height_limit) { 34 | hexo.extend.injector.register("head_end", () => { 35 | return ` 36 | 43 | `; 44 | }); 45 | } 46 | 47 | if (beautify) { 48 | hexo.extend.injector.register("body_end", () => { 49 | return js( 50 | js_cdn || 51 | "https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.js" 52 | ); 53 | }); 54 | } 55 | hexo.extend.injector.register("body_end", () => { 56 | return ` 57 | 79 | `; 80 | }); 81 | return shiki 82 | .getHighlighter({ 83 | theme, 84 | }) 85 | .then((hl) => { 86 | hexo.extend.filter.register("before_post_render", (post) => { 87 | post.content = post.content.replace(codeMatch, (...argv) => { 88 | let { quote, ul, start, end, args, code } = argv.pop(); 89 | let result; 90 | const match = new RegExp(`^${quote.trimEnd()}`, "gm"); 91 | code = code.replace(match, ""); 92 | code = stripIndent(code.trimEnd()); 93 | const arr = code.split("\n"); 94 | let numbers = ""; 95 | let pre = ""; 96 | try { 97 | pre = hl.codeToHtml(code, { lang: args }); 98 | pre = pre.replace(/]*>/, (match) => { 99 | return match.replace(/\s*style\s*=\s*"[^"]*"\s*tabindex="0"/, ""); 100 | }); 101 | } catch (error) { 102 | console.warn(error); 103 | pre = `${code}`; 104 | } 105 | result = ``; 106 | result += ""; 107 | if (line_number) { 108 | for (let i = 0, len = arr.length; i < len; i++) { 109 | numbers += `${1 + i}`; 110 | } 111 | result += `${numbers}`; 112 | } 113 | result += `${pre}`; 114 | result += ""; 115 | return `${ 116 | quote + ul + start 117 | }${result}${end}`; 118 | }); 119 | }); 120 | }); 121 | -------------------------------------------------------------------------------- /lib/codeblock.js: -------------------------------------------------------------------------------- 1 | const addHighlightTool = function () { 2 | const isHidden = (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0; 3 | if (!CODE_CONFIG || !CODE_CONFIG.beautify) return; 4 | 5 | const { highlightCopy, highlightLang, highlightHeightLimit } = CODE_CONFIG; 6 | const isHighlightShrink = CODE_CONFIG.isHighlightShrink; 7 | const isShowTool = 8 | highlightCopy || highlightLang || isHighlightShrink !== undefined; 9 | const $figureHighlight = document.querySelectorAll("figure.shiki"); 10 | 11 | if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) 12 | return; 13 | 14 | const highlightShrinkClass = isHighlightShrink === true ? "closed" : ""; 15 | const highlightShrinkEle = 16 | isHighlightShrink !== undefined 17 | ? `` 18 | : ""; 19 | const highlightCopyEle = highlightCopy 20 | ? '' 21 | : ""; 22 | 23 | const copy = async (text, ctx) => { 24 | const showMsg = (msg) => { 25 | const prevEle = ctx.previousElementSibling; 26 | prevEle.textContent = msg; 27 | prevEle.style.opacity = 1; 28 | setTimeout(() => { 29 | prevEle.style.opacity = 0; 30 | }, 700); 31 | }; 32 | if ( 33 | document.queryCommandSupported && 34 | document.queryCommandSupported("copy") 35 | ) { 36 | document.execCommand("copy"); 37 | showMsg(CODE_CONFIG.copy.success); 38 | } else if (navigator.clipboard) { 39 | try { 40 | await navigator.clipboard.writeText(text); 41 | showMsg(CODE_CONFIG.copy.success); 42 | } catch { 43 | showMsg(CODE_CONFIG.copy.error); 44 | } 45 | } else { 46 | showMsg(CODE_CONFIG.copy.noSupport); 47 | } 48 | }; 49 | 50 | // click events 51 | const highlightCopyFn = (ele) => { 52 | const $buttonParent = ele.parentNode; 53 | $buttonParent.classList.add("copy-true"); 54 | const selection = window.getSelection(); 55 | const range = document.createRange(); 56 | const preCodeSelector = "div.codeblock .code pre"; 57 | range.selectNodeContents( 58 | $buttonParent.querySelectorAll(`${preCodeSelector}`)[0] 59 | ); 60 | selection.removeAllRanges(); 61 | selection.addRange(range); 62 | const text = selection.toString(); 63 | copy(text, ele.lastChild); 64 | selection.removeAllRanges(); 65 | $buttonParent.classList.remove("copy-true"); 66 | }; 67 | 68 | const highlightShrinkFn = (ele) => { 69 | const $nextEle = [...ele.parentNode.children].slice(1); 70 | ele.firstChild.classList.toggle("closed"); 71 | if (isHidden($nextEle[$nextEle.length - 1])) { 72 | $nextEle.forEach((e) => { 73 | e.style.display = "flex"; 74 | }); 75 | } else { 76 | $nextEle.forEach((e) => { 77 | e.style.display = "none"; 78 | }); 79 | } 80 | }; 81 | 82 | const highlightToolsFn = function (e) { 83 | const $target = e.target.classList; 84 | if ($target.contains("expand")) highlightShrinkFn(this); 85 | else if ($target.contains("copy-button")) highlightCopyFn(this); 86 | }; 87 | 88 | const expandCode = function () { 89 | this.classList.toggle("expand-done"); 90 | }; 91 | 92 | function createEle(lang, item, service) { 93 | const fragment = document.createDocumentFragment(); 94 | 95 | if (isShowTool) { 96 | const hlTools = document.createElement("div"); 97 | hlTools.className = `shiki-tools ${highlightShrinkClass}`; 98 | hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle; 99 | hlTools.addEventListener("click", highlightToolsFn); 100 | fragment.appendChild(hlTools); 101 | } 102 | 103 | if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) { 104 | const ele = document.createElement("div"); 105 | ele.className = "code-expand-btn"; 106 | ele.innerHTML = ''; 107 | ele.addEventListener("click", expandCode); 108 | fragment.appendChild(ele); 109 | } 110 | 111 | if (service === "hl") { 112 | item.insertBefore(fragment, item.firstChild); 113 | } else { 114 | item.parentNode.insertBefore(fragment, item); 115 | } 116 | } 117 | 118 | $figureHighlight.forEach(function (item) { 119 | if (highlightLang) { 120 | let langName = item.getAttribute("class").split(" ")[1]; 121 | if (langName === "plain" || langName === undefined) 122 | langName = "PlainText"; 123 | const highlightLangEle = `${langName}`; 124 | createEle(highlightLangEle, item, "hl"); 125 | } else { 126 | createEle("", item, "hl"); 127 | } 128 | }); 129 | }; 130 | 131 | document.addEventListener("pjax:success", addHighlightTool); 132 | document.addEventListener("DOMContentLoaded", addHighlightTool); 133 | -------------------------------------------------------------------------------- /lib/codeblock.css: -------------------------------------------------------------------------------- 1 | /* scrollbar */ 2 | figure.shiki div.codeblock::-webkit-scrollbar-thumb { 3 | background: var(--hlscrollbar-bg); 4 | border-radius: 2.5px; 5 | } 6 | figure.shiki div.codeblock::-webkit-scrollbar { 7 | width: 5px; 8 | height: 5px; 9 | } 10 | /* code block figure */ 11 | figure.shiki .shiki-tools.closed ~ * { 12 | display: none; 13 | } 14 | figure.shiki div.codeblock { 15 | margin: 0; 16 | } 17 | figure.shiki { 18 | margin: 0 0 24px; 19 | border-radius: 7px; 20 | -webkit-transform: translateZ(0); 21 | transform: translateZ(0); 22 | position: relative; 23 | overflow: auto; 24 | padding: 0; 25 | background: var(--hl-bg); 26 | color: var(--hl-color); 27 | line-height: 1.6; 28 | } 29 | /* highlighttool bar */ 30 | .shiki-tools { 31 | position: relative; 32 | display: -webkit-box; 33 | display: -moz-box; 34 | display: -webkit-flex; 35 | display: -ms-flexbox; 36 | display: box; 37 | display: flex; 38 | -webkit-box-align: center; 39 | -moz-box-align: center; 40 | -o-box-align: center; 41 | -ms-flex-align: center; 42 | -webkit-align-items: center; 43 | align-items: center; 44 | overflow: hidden; 45 | min-height: 24px; 46 | height: 2.15em; 47 | background: var(--hltools-bg); 48 | color: var(--hltools-color); 49 | font-size: 1em; 50 | user-select: none; 51 | } 52 | figure.shiki .shiki-tools .expand { 53 | right: 0; 54 | position: absolute; 55 | padding: 0.57em 0.7em; 56 | cursor: pointer; 57 | -webkit-transition: -webkit-transform 0.3s; 58 | -moz-transition: -moz-transform 0.3s; 59 | -o-transition: -o-transform 0.3s; 60 | -ms-transition: -ms-transform 0.3s; 61 | transition: transform 0.3s; 62 | } 63 | 64 | figure.shiki .shiki-tools .expand.closed { 65 | -webkit-transition: all 0.3s; 66 | -moz-transition: all 0.3s; 67 | -o-transition: all 0.3s; 68 | -ms-transition: all 0.3s; 69 | transition: all 0.3s; 70 | -webkit-transform: rotate(90deg); 71 | -moz-transform: rotate(90deg); 72 | -o-transform: rotate(90deg); 73 | -ms-transform: rotate(90deg); 74 | transform: rotate(90deg); 75 | } 76 | figure.shiki .shiki-tools .code-lang { 77 | left: 75px; 78 | position: absolute; 79 | text-transform: uppercase; 80 | font-weight: 700; 81 | font-size: 1.15em; 82 | -webkit-user-select: none; 83 | -moz-user-select: none; 84 | -ms-user-select: none; 85 | user-select: none; 86 | } 87 | 88 | figure.shiki .shiki-tools .expand ~ .copy-notice { 89 | right: 3.45em; 90 | position: absolute; 91 | opacity: 0; 92 | -webkit-transition: opacity 0.4s; 93 | -moz-transition: opacity 0.4s; 94 | -o-transition: opacity 0.4s; 95 | -ms-transition: opacity 0.4s; 96 | transition: opacity 0.4s; 97 | } 98 | 99 | figure.shiki .shiki-tools .expand ~ .copy-button { 100 | right: 2.1em; 101 | position: absolute; 102 | cursor: pointer; 103 | -webkit-transition: color 0.2s; 104 | -moz-transition: color 0.2s; 105 | -o-transition: color 0.2s; 106 | -ms-transition: color 0.2s; 107 | transition: color 0.2s; 108 | } 109 | .shiki-tools .copy-button:hover { 110 | color: #49b1f5; 111 | } 112 | figure.shiki .shiki-tools:after { 113 | position: absolute; 114 | left: 14px; 115 | width: 12px; 116 | height: 12px; 117 | border-radius: 50%; 118 | background: #fc625d; 119 | -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; 120 | box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; 121 | content: " "; 122 | } 123 | /* bottom toolbar */ 124 | .code-expand-btn { 125 | position: absolute; 126 | display: flex; 127 | bottom: 0; 128 | z-index: 10; 129 | width: 100%; 130 | background: var(--hlexpand-bg); 131 | justify-content: center; 132 | align-items: center; 133 | font-size: 1em; 134 | cursor: pointer; 135 | } 136 | @-moz-keyframes code-expand-key { 137 | 0% { 138 | opacity: 0.6; 139 | } 140 | 141 | 50% { 142 | opacity: 0.1; 143 | } 144 | 145 | 100% { 146 | opacity: 0.6; 147 | } 148 | } 149 | 150 | @-webkit-keyframes code-expand-key { 151 | 0% { 152 | opacity: 0.6; 153 | } 154 | 155 | 50% { 156 | opacity: 0.1; 157 | } 158 | 159 | 100% { 160 | opacity: 0.6; 161 | } 162 | } 163 | 164 | @-o-keyframes code-expand-key { 165 | 0% { 166 | opacity: 0.6; 167 | } 168 | 169 | 50% { 170 | opacity: 0.1; 171 | } 172 | 173 | 100% { 174 | opacity: 0.6; 175 | } 176 | } 177 | 178 | @keyframes code-expand-key { 179 | 0% { 180 | opacity: 0.6; 181 | } 182 | 183 | 50% { 184 | opacity: 0.1; 185 | } 186 | 187 | 100% { 188 | opacity: 0.6; 189 | } 190 | } 191 | .code-expand-btn i { 192 | padding: 6px 0; 193 | color: var(--hlnumber-color); 194 | -webkit-animation: code-expand-key 1.2s infinite; 195 | -moz-animation: code-expand-key 1.2s infinite; 196 | -o-animation: code-expand-key 1.2s infinite; 197 | -ms-animation: code-expand-key 1.2s infinite; 198 | animation: code-expand-key 1.2s infinite; 199 | } 200 | .code-expand-btn.expand-done > i { 201 | -webkit-transform: rotate(180deg); 202 | -moz-transform: rotate(180deg); 203 | -o-transform: rotate(180deg); 204 | -ms-transform: rotate(180deg); 205 | transform: rotate(180deg); 206 | } 207 | /* codeblock */ 208 | figure.shiki div.codeblock { 209 | display: block; 210 | overflow: auto; 211 | border: none; 212 | display: flex; 213 | } 214 | figure.shiki div.codeblock div { 215 | padding: 0; 216 | border: none; 217 | } 218 | figure.shiki .gutter pre { 219 | padding-right: 10px !important; 220 | padding-left: 10px !important; 221 | background-color: var(--hlnumber-bg) !important; 222 | color: var(--hlnumber-color) !important; 223 | text-align: right !important; 224 | user-select: none !important; 225 | } 226 | figure.shiki pre { 227 | margin: 0 !important; 228 | padding: 8px 0 !important; 229 | border: none !important; 230 | } 231 | figure.shiki pre code { 232 | background: none !important; 233 | } 234 | figure.shiki .codeblock pre * { 235 | font-size: 1em; 236 | font-family: Consolas, "Fira Code", "Fira Mono", Menlo, "DejaVu Sans Mono", 237 | monospace, 宋体; 238 | overflow: auto !important; 239 | line-height: 1.6; 240 | } 241 | figure.shiki .code pre { 242 | padding-right: 10px !important; 243 | padding-left: 10px !important; 244 | width: 100% !important; 245 | background: none !important; 246 | } 247 | .code-expand-btn:not(.expand-done) ~ pre, 248 | .code-expand-btn:not(.expand-done) ~ *pre { 249 | overflow: hidden; 250 | } 251 | .code-expand-btn.expand-done + pre, 252 | .code-expand-btn.expand-done + * pre, 253 | .code-expand-btn.expand-done + div.codeblock, 254 | .code-expand-btn.expand-done + * div.codeblock { 255 | margin-bottom: 1.8em; 256 | } 257 | --------------------------------------------------------------------------------
[\s\S]*?)\k\s*\k(?\s*)$/gm; 7 | const config = hexo.config.shiki; 8 | if (!config) return; 9 | const { 10 | theme, 11 | line_number, 12 | beautify, 13 | highlight_copy, 14 | highlight_lang, 15 | highlight_height_limit, 16 | is_highlight_shrink, 17 | css_cdn, 18 | js_cdn, 19 | copy: { success, error, no_support } = {}, 20 | } = config; 21 | const codeblockTheme = themes.has(theme) ? theme : "one-dark-pro"; 22 | const css = hexo.extend.helper.get("css").bind(hexo); 23 | const js = hexo.extend.helper.get("js").bind(hexo); 24 | hexo.extend.injector.register("head_end", () => { 25 | return css( 26 | css_cdn || 27 | "https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.css" 28 | ); 29 | }); 30 | hexo.extend.injector.register("head_end", () => { 31 | return themes.get(codeblockTheme); 32 | }); 33 | if (config.highlight_height_limit) { 34 | hexo.extend.injector.register("head_end", () => { 35 | return ` 36 | 43 | `; 44 | }); 45 | } 46 | 47 | if (beautify) { 48 | hexo.extend.injector.register("body_end", () => { 49 | return js( 50 | js_cdn || 51 | "https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.js" 52 | ); 53 | }); 54 | } 55 | hexo.extend.injector.register("body_end", () => { 56 | return ` 57 | 79 | `; 80 | }); 81 | return shiki 82 | .getHighlighter({ 83 | theme, 84 | }) 85 | .then((hl) => { 86 | hexo.extend.filter.register("before_post_render", (post) => { 87 | post.content = post.content.replace(codeMatch, (...argv) => { 88 | let { quote, ul, start, end, args, code } = argv.pop(); 89 | let result; 90 | const match = new RegExp(`^${quote.trimEnd()}`, "gm"); 91 | code = code.replace(match, ""); 92 | code = stripIndent(code.trimEnd()); 93 | const arr = code.split("\n"); 94 | let numbers = ""; 95 | let pre = ""; 96 | try { 97 | pre = hl.codeToHtml(code, { lang: args }); 98 | pre = pre.replace(/]*>/, (match) => { 99 | return match.replace(/\s*style\s*=\s*"[^"]*"\s*tabindex="0"/, ""); 100 | }); 101 | } catch (error) { 102 | console.warn(error); 103 | pre = `${code}`; 104 | } 105 | result = ``; 106 | result += ""; 107 | if (line_number) { 108 | for (let i = 0, len = arr.length; i < len; i++) { 109 | numbers += `${1 + i}`; 110 | } 111 | result += `${numbers}`; 112 | } 113 | result += `${pre}`; 114 | result += ""; 115 | return `${ 116 | quote + ul + start 117 | }${result}${end}`; 118 | }); 119 | }); 120 | }); 121 | -------------------------------------------------------------------------------- /lib/codeblock.js: -------------------------------------------------------------------------------- 1 | const addHighlightTool = function () { 2 | const isHidden = (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0; 3 | if (!CODE_CONFIG || !CODE_CONFIG.beautify) return; 4 | 5 | const { highlightCopy, highlightLang, highlightHeightLimit } = CODE_CONFIG; 6 | const isHighlightShrink = CODE_CONFIG.isHighlightShrink; 7 | const isShowTool = 8 | highlightCopy || highlightLang || isHighlightShrink !== undefined; 9 | const $figureHighlight = document.querySelectorAll("figure.shiki"); 10 | 11 | if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) 12 | return; 13 | 14 | const highlightShrinkClass = isHighlightShrink === true ? "closed" : ""; 15 | const highlightShrinkEle = 16 | isHighlightShrink !== undefined 17 | ? `` 18 | : ""; 19 | const highlightCopyEle = highlightCopy 20 | ? '' 21 | : ""; 22 | 23 | const copy = async (text, ctx) => { 24 | const showMsg = (msg) => { 25 | const prevEle = ctx.previousElementSibling; 26 | prevEle.textContent = msg; 27 | prevEle.style.opacity = 1; 28 | setTimeout(() => { 29 | prevEle.style.opacity = 0; 30 | }, 700); 31 | }; 32 | if ( 33 | document.queryCommandSupported && 34 | document.queryCommandSupported("copy") 35 | ) { 36 | document.execCommand("copy"); 37 | showMsg(CODE_CONFIG.copy.success); 38 | } else if (navigator.clipboard) { 39 | try { 40 | await navigator.clipboard.writeText(text); 41 | showMsg(CODE_CONFIG.copy.success); 42 | } catch { 43 | showMsg(CODE_CONFIG.copy.error); 44 | } 45 | } else { 46 | showMsg(CODE_CONFIG.copy.noSupport); 47 | } 48 | }; 49 | 50 | // click events 51 | const highlightCopyFn = (ele) => { 52 | const $buttonParent = ele.parentNode; 53 | $buttonParent.classList.add("copy-true"); 54 | const selection = window.getSelection(); 55 | const range = document.createRange(); 56 | const preCodeSelector = "div.codeblock .code pre"; 57 | range.selectNodeContents( 58 | $buttonParent.querySelectorAll(`${preCodeSelector}`)[0] 59 | ); 60 | selection.removeAllRanges(); 61 | selection.addRange(range); 62 | const text = selection.toString(); 63 | copy(text, ele.lastChild); 64 | selection.removeAllRanges(); 65 | $buttonParent.classList.remove("copy-true"); 66 | }; 67 | 68 | const highlightShrinkFn = (ele) => { 69 | const $nextEle = [...ele.parentNode.children].slice(1); 70 | ele.firstChild.classList.toggle("closed"); 71 | if (isHidden($nextEle[$nextEle.length - 1])) { 72 | $nextEle.forEach((e) => { 73 | e.style.display = "flex"; 74 | }); 75 | } else { 76 | $nextEle.forEach((e) => { 77 | e.style.display = "none"; 78 | }); 79 | } 80 | }; 81 | 82 | const highlightToolsFn = function (e) { 83 | const $target = e.target.classList; 84 | if ($target.contains("expand")) highlightShrinkFn(this); 85 | else if ($target.contains("copy-button")) highlightCopyFn(this); 86 | }; 87 | 88 | const expandCode = function () { 89 | this.classList.toggle("expand-done"); 90 | }; 91 | 92 | function createEle(lang, item, service) { 93 | const fragment = document.createDocumentFragment(); 94 | 95 | if (isShowTool) { 96 | const hlTools = document.createElement("div"); 97 | hlTools.className = `shiki-tools ${highlightShrinkClass}`; 98 | hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle; 99 | hlTools.addEventListener("click", highlightToolsFn); 100 | fragment.appendChild(hlTools); 101 | } 102 | 103 | if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) { 104 | const ele = document.createElement("div"); 105 | ele.className = "code-expand-btn"; 106 | ele.innerHTML = ''; 107 | ele.addEventListener("click", expandCode); 108 | fragment.appendChild(ele); 109 | } 110 | 111 | if (service === "hl") { 112 | item.insertBefore(fragment, item.firstChild); 113 | } else { 114 | item.parentNode.insertBefore(fragment, item); 115 | } 116 | } 117 | 118 | $figureHighlight.forEach(function (item) { 119 | if (highlightLang) { 120 | let langName = item.getAttribute("class").split(" ")[1]; 121 | if (langName === "plain" || langName === undefined) 122 | langName = "PlainText"; 123 | const highlightLangEle = `${langName}`; 124 | createEle(highlightLangEle, item, "hl"); 125 | } else { 126 | createEle("", item, "hl"); 127 | } 128 | }); 129 | }; 130 | 131 | document.addEventListener("pjax:success", addHighlightTool); 132 | document.addEventListener("DOMContentLoaded", addHighlightTool); 133 | -------------------------------------------------------------------------------- /lib/codeblock.css: -------------------------------------------------------------------------------- 1 | /* scrollbar */ 2 | figure.shiki div.codeblock::-webkit-scrollbar-thumb { 3 | background: var(--hlscrollbar-bg); 4 | border-radius: 2.5px; 5 | } 6 | figure.shiki div.codeblock::-webkit-scrollbar { 7 | width: 5px; 8 | height: 5px; 9 | } 10 | /* code block figure */ 11 | figure.shiki .shiki-tools.closed ~ * { 12 | display: none; 13 | } 14 | figure.shiki div.codeblock { 15 | margin: 0; 16 | } 17 | figure.shiki { 18 | margin: 0 0 24px; 19 | border-radius: 7px; 20 | -webkit-transform: translateZ(0); 21 | transform: translateZ(0); 22 | position: relative; 23 | overflow: auto; 24 | padding: 0; 25 | background: var(--hl-bg); 26 | color: var(--hl-color); 27 | line-height: 1.6; 28 | } 29 | /* highlighttool bar */ 30 | .shiki-tools { 31 | position: relative; 32 | display: -webkit-box; 33 | display: -moz-box; 34 | display: -webkit-flex; 35 | display: -ms-flexbox; 36 | display: box; 37 | display: flex; 38 | -webkit-box-align: center; 39 | -moz-box-align: center; 40 | -o-box-align: center; 41 | -ms-flex-align: center; 42 | -webkit-align-items: center; 43 | align-items: center; 44 | overflow: hidden; 45 | min-height: 24px; 46 | height: 2.15em; 47 | background: var(--hltools-bg); 48 | color: var(--hltools-color); 49 | font-size: 1em; 50 | user-select: none; 51 | } 52 | figure.shiki .shiki-tools .expand { 53 | right: 0; 54 | position: absolute; 55 | padding: 0.57em 0.7em; 56 | cursor: pointer; 57 | -webkit-transition: -webkit-transform 0.3s; 58 | -moz-transition: -moz-transform 0.3s; 59 | -o-transition: -o-transform 0.3s; 60 | -ms-transition: -ms-transform 0.3s; 61 | transition: transform 0.3s; 62 | } 63 | 64 | figure.shiki .shiki-tools .expand.closed { 65 | -webkit-transition: all 0.3s; 66 | -moz-transition: all 0.3s; 67 | -o-transition: all 0.3s; 68 | -ms-transition: all 0.3s; 69 | transition: all 0.3s; 70 | -webkit-transform: rotate(90deg); 71 | -moz-transform: rotate(90deg); 72 | -o-transform: rotate(90deg); 73 | -ms-transform: rotate(90deg); 74 | transform: rotate(90deg); 75 | } 76 | figure.shiki .shiki-tools .code-lang { 77 | left: 75px; 78 | position: absolute; 79 | text-transform: uppercase; 80 | font-weight: 700; 81 | font-size: 1.15em; 82 | -webkit-user-select: none; 83 | -moz-user-select: none; 84 | -ms-user-select: none; 85 | user-select: none; 86 | } 87 | 88 | figure.shiki .shiki-tools .expand ~ .copy-notice { 89 | right: 3.45em; 90 | position: absolute; 91 | opacity: 0; 92 | -webkit-transition: opacity 0.4s; 93 | -moz-transition: opacity 0.4s; 94 | -o-transition: opacity 0.4s; 95 | -ms-transition: opacity 0.4s; 96 | transition: opacity 0.4s; 97 | } 98 | 99 | figure.shiki .shiki-tools .expand ~ .copy-button { 100 | right: 2.1em; 101 | position: absolute; 102 | cursor: pointer; 103 | -webkit-transition: color 0.2s; 104 | -moz-transition: color 0.2s; 105 | -o-transition: color 0.2s; 106 | -ms-transition: color 0.2s; 107 | transition: color 0.2s; 108 | } 109 | .shiki-tools .copy-button:hover { 110 | color: #49b1f5; 111 | } 112 | figure.shiki .shiki-tools:after { 113 | position: absolute; 114 | left: 14px; 115 | width: 12px; 116 | height: 12px; 117 | border-radius: 50%; 118 | background: #fc625d; 119 | -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; 120 | box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; 121 | content: " "; 122 | } 123 | /* bottom toolbar */ 124 | .code-expand-btn { 125 | position: absolute; 126 | display: flex; 127 | bottom: 0; 128 | z-index: 10; 129 | width: 100%; 130 | background: var(--hlexpand-bg); 131 | justify-content: center; 132 | align-items: center; 133 | font-size: 1em; 134 | cursor: pointer; 135 | } 136 | @-moz-keyframes code-expand-key { 137 | 0% { 138 | opacity: 0.6; 139 | } 140 | 141 | 50% { 142 | opacity: 0.1; 143 | } 144 | 145 | 100% { 146 | opacity: 0.6; 147 | } 148 | } 149 | 150 | @-webkit-keyframes code-expand-key { 151 | 0% { 152 | opacity: 0.6; 153 | } 154 | 155 | 50% { 156 | opacity: 0.1; 157 | } 158 | 159 | 100% { 160 | opacity: 0.6; 161 | } 162 | } 163 | 164 | @-o-keyframes code-expand-key { 165 | 0% { 166 | opacity: 0.6; 167 | } 168 | 169 | 50% { 170 | opacity: 0.1; 171 | } 172 | 173 | 100% { 174 | opacity: 0.6; 175 | } 176 | } 177 | 178 | @keyframes code-expand-key { 179 | 0% { 180 | opacity: 0.6; 181 | } 182 | 183 | 50% { 184 | opacity: 0.1; 185 | } 186 | 187 | 100% { 188 | opacity: 0.6; 189 | } 190 | } 191 | .code-expand-btn i { 192 | padding: 6px 0; 193 | color: var(--hlnumber-color); 194 | -webkit-animation: code-expand-key 1.2s infinite; 195 | -moz-animation: code-expand-key 1.2s infinite; 196 | -o-animation: code-expand-key 1.2s infinite; 197 | -ms-animation: code-expand-key 1.2s infinite; 198 | animation: code-expand-key 1.2s infinite; 199 | } 200 | .code-expand-btn.expand-done > i { 201 | -webkit-transform: rotate(180deg); 202 | -moz-transform: rotate(180deg); 203 | -o-transform: rotate(180deg); 204 | -ms-transform: rotate(180deg); 205 | transform: rotate(180deg); 206 | } 207 | /* codeblock */ 208 | figure.shiki div.codeblock { 209 | display: block; 210 | overflow: auto; 211 | border: none; 212 | display: flex; 213 | } 214 | figure.shiki div.codeblock div { 215 | padding: 0; 216 | border: none; 217 | } 218 | figure.shiki .gutter pre { 219 | padding-right: 10px !important; 220 | padding-left: 10px !important; 221 | background-color: var(--hlnumber-bg) !important; 222 | color: var(--hlnumber-color) !important; 223 | text-align: right !important; 224 | user-select: none !important; 225 | } 226 | figure.shiki pre { 227 | margin: 0 !important; 228 | padding: 8px 0 !important; 229 | border: none !important; 230 | } 231 | figure.shiki pre code { 232 | background: none !important; 233 | } 234 | figure.shiki .codeblock pre * { 235 | font-size: 1em; 236 | font-family: Consolas, "Fira Code", "Fira Mono", Menlo, "DejaVu Sans Mono", 237 | monospace, 宋体; 238 | overflow: auto !important; 239 | line-height: 1.6; 240 | } 241 | figure.shiki .code pre { 242 | padding-right: 10px !important; 243 | padding-left: 10px !important; 244 | width: 100% !important; 245 | background: none !important; 246 | } 247 | .code-expand-btn:not(.expand-done) ~ pre, 248 | .code-expand-btn:not(.expand-done) ~ *pre { 249 | overflow: hidden; 250 | } 251 | .code-expand-btn.expand-done + pre, 252 | .code-expand-btn.expand-done + * pre, 253 | .code-expand-btn.expand-done + div.codeblock, 254 | .code-expand-btn.expand-done + * div.codeblock { 255 | margin-bottom: 1.8em; 256 | } 257 | --------------------------------------------------------------------------------
\s*\k(?\s*)$/gm; 7 | const config = hexo.config.shiki; 8 | if (!config) return; 9 | const { 10 | theme, 11 | line_number, 12 | beautify, 13 | highlight_copy, 14 | highlight_lang, 15 | highlight_height_limit, 16 | is_highlight_shrink, 17 | css_cdn, 18 | js_cdn, 19 | copy: { success, error, no_support } = {}, 20 | } = config; 21 | const codeblockTheme = themes.has(theme) ? theme : "one-dark-pro"; 22 | const css = hexo.extend.helper.get("css").bind(hexo); 23 | const js = hexo.extend.helper.get("js").bind(hexo); 24 | hexo.extend.injector.register("head_end", () => { 25 | return css( 26 | css_cdn || 27 | "https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.css" 28 | ); 29 | }); 30 | hexo.extend.injector.register("head_end", () => { 31 | return themes.get(codeblockTheme); 32 | }); 33 | if (config.highlight_height_limit) { 34 | hexo.extend.injector.register("head_end", () => { 35 | return ` 36 | 43 | `; 44 | }); 45 | } 46 | 47 | if (beautify) { 48 | hexo.extend.injector.register("body_end", () => { 49 | return js( 50 | js_cdn || 51 | "https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.js" 52 | ); 53 | }); 54 | } 55 | hexo.extend.injector.register("body_end", () => { 56 | return ` 57 | 79 | `; 80 | }); 81 | return shiki 82 | .getHighlighter({ 83 | theme, 84 | }) 85 | .then((hl) => { 86 | hexo.extend.filter.register("before_post_render", (post) => { 87 | post.content = post.content.replace(codeMatch, (...argv) => { 88 | let { quote, ul, start, end, args, code } = argv.pop(); 89 | let result; 90 | const match = new RegExp(`^${quote.trimEnd()}`, "gm"); 91 | code = code.replace(match, ""); 92 | code = stripIndent(code.trimEnd()); 93 | const arr = code.split("\n"); 94 | let numbers = ""; 95 | let pre = ""; 96 | try { 97 | pre = hl.codeToHtml(code, { lang: args }); 98 | pre = pre.replace(/]*>/, (match) => { 99 | return match.replace(/\s*style\s*=\s*"[^"]*"\s*tabindex="0"/, ""); 100 | }); 101 | } catch (error) { 102 | console.warn(error); 103 | pre = `${code}`; 104 | } 105 | result = ``; 106 | result += ""; 107 | if (line_number) { 108 | for (let i = 0, len = arr.length; i < len; i++) { 109 | numbers += `${1 + i}`; 110 | } 111 | result += `${numbers}`; 112 | } 113 | result += `${pre}`; 114 | result += ""; 115 | return `${ 116 | quote + ul + start 117 | }${result}${end}`; 118 | }); 119 | }); 120 | }); 121 | -------------------------------------------------------------------------------- /lib/codeblock.js: -------------------------------------------------------------------------------- 1 | const addHighlightTool = function () { 2 | const isHidden = (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0; 3 | if (!CODE_CONFIG || !CODE_CONFIG.beautify) return; 4 | 5 | const { highlightCopy, highlightLang, highlightHeightLimit } = CODE_CONFIG; 6 | const isHighlightShrink = CODE_CONFIG.isHighlightShrink; 7 | const isShowTool = 8 | highlightCopy || highlightLang || isHighlightShrink !== undefined; 9 | const $figureHighlight = document.querySelectorAll("figure.shiki"); 10 | 11 | if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) 12 | return; 13 | 14 | const highlightShrinkClass = isHighlightShrink === true ? "closed" : ""; 15 | const highlightShrinkEle = 16 | isHighlightShrink !== undefined 17 | ? `` 18 | : ""; 19 | const highlightCopyEle = highlightCopy 20 | ? '' 21 | : ""; 22 | 23 | const copy = async (text, ctx) => { 24 | const showMsg = (msg) => { 25 | const prevEle = ctx.previousElementSibling; 26 | prevEle.textContent = msg; 27 | prevEle.style.opacity = 1; 28 | setTimeout(() => { 29 | prevEle.style.opacity = 0; 30 | }, 700); 31 | }; 32 | if ( 33 | document.queryCommandSupported && 34 | document.queryCommandSupported("copy") 35 | ) { 36 | document.execCommand("copy"); 37 | showMsg(CODE_CONFIG.copy.success); 38 | } else if (navigator.clipboard) { 39 | try { 40 | await navigator.clipboard.writeText(text); 41 | showMsg(CODE_CONFIG.copy.success); 42 | } catch { 43 | showMsg(CODE_CONFIG.copy.error); 44 | } 45 | } else { 46 | showMsg(CODE_CONFIG.copy.noSupport); 47 | } 48 | }; 49 | 50 | // click events 51 | const highlightCopyFn = (ele) => { 52 | const $buttonParent = ele.parentNode; 53 | $buttonParent.classList.add("copy-true"); 54 | const selection = window.getSelection(); 55 | const range = document.createRange(); 56 | const preCodeSelector = "div.codeblock .code pre"; 57 | range.selectNodeContents( 58 | $buttonParent.querySelectorAll(`${preCodeSelector}`)[0] 59 | ); 60 | selection.removeAllRanges(); 61 | selection.addRange(range); 62 | const text = selection.toString(); 63 | copy(text, ele.lastChild); 64 | selection.removeAllRanges(); 65 | $buttonParent.classList.remove("copy-true"); 66 | }; 67 | 68 | const highlightShrinkFn = (ele) => { 69 | const $nextEle = [...ele.parentNode.children].slice(1); 70 | ele.firstChild.classList.toggle("closed"); 71 | if (isHidden($nextEle[$nextEle.length - 1])) { 72 | $nextEle.forEach((e) => { 73 | e.style.display = "flex"; 74 | }); 75 | } else { 76 | $nextEle.forEach((e) => { 77 | e.style.display = "none"; 78 | }); 79 | } 80 | }; 81 | 82 | const highlightToolsFn = function (e) { 83 | const $target = e.target.classList; 84 | if ($target.contains("expand")) highlightShrinkFn(this); 85 | else if ($target.contains("copy-button")) highlightCopyFn(this); 86 | }; 87 | 88 | const expandCode = function () { 89 | this.classList.toggle("expand-done"); 90 | }; 91 | 92 | function createEle(lang, item, service) { 93 | const fragment = document.createDocumentFragment(); 94 | 95 | if (isShowTool) { 96 | const hlTools = document.createElement("div"); 97 | hlTools.className = `shiki-tools ${highlightShrinkClass}`; 98 | hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle; 99 | hlTools.addEventListener("click", highlightToolsFn); 100 | fragment.appendChild(hlTools); 101 | } 102 | 103 | if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) { 104 | const ele = document.createElement("div"); 105 | ele.className = "code-expand-btn"; 106 | ele.innerHTML = ''; 107 | ele.addEventListener("click", expandCode); 108 | fragment.appendChild(ele); 109 | } 110 | 111 | if (service === "hl") { 112 | item.insertBefore(fragment, item.firstChild); 113 | } else { 114 | item.parentNode.insertBefore(fragment, item); 115 | } 116 | } 117 | 118 | $figureHighlight.forEach(function (item) { 119 | if (highlightLang) { 120 | let langName = item.getAttribute("class").split(" ")[1]; 121 | if (langName === "plain" || langName === undefined) 122 | langName = "PlainText"; 123 | const highlightLangEle = `${langName}`; 124 | createEle(highlightLangEle, item, "hl"); 125 | } else { 126 | createEle("", item, "hl"); 127 | } 128 | }); 129 | }; 130 | 131 | document.addEventListener("pjax:success", addHighlightTool); 132 | document.addEventListener("DOMContentLoaded", addHighlightTool); 133 | -------------------------------------------------------------------------------- /lib/codeblock.css: -------------------------------------------------------------------------------- 1 | /* scrollbar */ 2 | figure.shiki div.codeblock::-webkit-scrollbar-thumb { 3 | background: var(--hlscrollbar-bg); 4 | border-radius: 2.5px; 5 | } 6 | figure.shiki div.codeblock::-webkit-scrollbar { 7 | width: 5px; 8 | height: 5px; 9 | } 10 | /* code block figure */ 11 | figure.shiki .shiki-tools.closed ~ * { 12 | display: none; 13 | } 14 | figure.shiki div.codeblock { 15 | margin: 0; 16 | } 17 | figure.shiki { 18 | margin: 0 0 24px; 19 | border-radius: 7px; 20 | -webkit-transform: translateZ(0); 21 | transform: translateZ(0); 22 | position: relative; 23 | overflow: auto; 24 | padding: 0; 25 | background: var(--hl-bg); 26 | color: var(--hl-color); 27 | line-height: 1.6; 28 | } 29 | /* highlighttool bar */ 30 | .shiki-tools { 31 | position: relative; 32 | display: -webkit-box; 33 | display: -moz-box; 34 | display: -webkit-flex; 35 | display: -ms-flexbox; 36 | display: box; 37 | display: flex; 38 | -webkit-box-align: center; 39 | -moz-box-align: center; 40 | -o-box-align: center; 41 | -ms-flex-align: center; 42 | -webkit-align-items: center; 43 | align-items: center; 44 | overflow: hidden; 45 | min-height: 24px; 46 | height: 2.15em; 47 | background: var(--hltools-bg); 48 | color: var(--hltools-color); 49 | font-size: 1em; 50 | user-select: none; 51 | } 52 | figure.shiki .shiki-tools .expand { 53 | right: 0; 54 | position: absolute; 55 | padding: 0.57em 0.7em; 56 | cursor: pointer; 57 | -webkit-transition: -webkit-transform 0.3s; 58 | -moz-transition: -moz-transform 0.3s; 59 | -o-transition: -o-transform 0.3s; 60 | -ms-transition: -ms-transform 0.3s; 61 | transition: transform 0.3s; 62 | } 63 | 64 | figure.shiki .shiki-tools .expand.closed { 65 | -webkit-transition: all 0.3s; 66 | -moz-transition: all 0.3s; 67 | -o-transition: all 0.3s; 68 | -ms-transition: all 0.3s; 69 | transition: all 0.3s; 70 | -webkit-transform: rotate(90deg); 71 | -moz-transform: rotate(90deg); 72 | -o-transform: rotate(90deg); 73 | -ms-transform: rotate(90deg); 74 | transform: rotate(90deg); 75 | } 76 | figure.shiki .shiki-tools .code-lang { 77 | left: 75px; 78 | position: absolute; 79 | text-transform: uppercase; 80 | font-weight: 700; 81 | font-size: 1.15em; 82 | -webkit-user-select: none; 83 | -moz-user-select: none; 84 | -ms-user-select: none; 85 | user-select: none; 86 | } 87 | 88 | figure.shiki .shiki-tools .expand ~ .copy-notice { 89 | right: 3.45em; 90 | position: absolute; 91 | opacity: 0; 92 | -webkit-transition: opacity 0.4s; 93 | -moz-transition: opacity 0.4s; 94 | -o-transition: opacity 0.4s; 95 | -ms-transition: opacity 0.4s; 96 | transition: opacity 0.4s; 97 | } 98 | 99 | figure.shiki .shiki-tools .expand ~ .copy-button { 100 | right: 2.1em; 101 | position: absolute; 102 | cursor: pointer; 103 | -webkit-transition: color 0.2s; 104 | -moz-transition: color 0.2s; 105 | -o-transition: color 0.2s; 106 | -ms-transition: color 0.2s; 107 | transition: color 0.2s; 108 | } 109 | .shiki-tools .copy-button:hover { 110 | color: #49b1f5; 111 | } 112 | figure.shiki .shiki-tools:after { 113 | position: absolute; 114 | left: 14px; 115 | width: 12px; 116 | height: 12px; 117 | border-radius: 50%; 118 | background: #fc625d; 119 | -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; 120 | box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; 121 | content: " "; 122 | } 123 | /* bottom toolbar */ 124 | .code-expand-btn { 125 | position: absolute; 126 | display: flex; 127 | bottom: 0; 128 | z-index: 10; 129 | width: 100%; 130 | background: var(--hlexpand-bg); 131 | justify-content: center; 132 | align-items: center; 133 | font-size: 1em; 134 | cursor: pointer; 135 | } 136 | @-moz-keyframes code-expand-key { 137 | 0% { 138 | opacity: 0.6; 139 | } 140 | 141 | 50% { 142 | opacity: 0.1; 143 | } 144 | 145 | 100% { 146 | opacity: 0.6; 147 | } 148 | } 149 | 150 | @-webkit-keyframes code-expand-key { 151 | 0% { 152 | opacity: 0.6; 153 | } 154 | 155 | 50% { 156 | opacity: 0.1; 157 | } 158 | 159 | 100% { 160 | opacity: 0.6; 161 | } 162 | } 163 | 164 | @-o-keyframes code-expand-key { 165 | 0% { 166 | opacity: 0.6; 167 | } 168 | 169 | 50% { 170 | opacity: 0.1; 171 | } 172 | 173 | 100% { 174 | opacity: 0.6; 175 | } 176 | } 177 | 178 | @keyframes code-expand-key { 179 | 0% { 180 | opacity: 0.6; 181 | } 182 | 183 | 50% { 184 | opacity: 0.1; 185 | } 186 | 187 | 100% { 188 | opacity: 0.6; 189 | } 190 | } 191 | .code-expand-btn i { 192 | padding: 6px 0; 193 | color: var(--hlnumber-color); 194 | -webkit-animation: code-expand-key 1.2s infinite; 195 | -moz-animation: code-expand-key 1.2s infinite; 196 | -o-animation: code-expand-key 1.2s infinite; 197 | -ms-animation: code-expand-key 1.2s infinite; 198 | animation: code-expand-key 1.2s infinite; 199 | } 200 | .code-expand-btn.expand-done > i { 201 | -webkit-transform: rotate(180deg); 202 | -moz-transform: rotate(180deg); 203 | -o-transform: rotate(180deg); 204 | -ms-transform: rotate(180deg); 205 | transform: rotate(180deg); 206 | } 207 | /* codeblock */ 208 | figure.shiki div.codeblock { 209 | display: block; 210 | overflow: auto; 211 | border: none; 212 | display: flex; 213 | } 214 | figure.shiki div.codeblock div { 215 | padding: 0; 216 | border: none; 217 | } 218 | figure.shiki .gutter pre { 219 | padding-right: 10px !important; 220 | padding-left: 10px !important; 221 | background-color: var(--hlnumber-bg) !important; 222 | color: var(--hlnumber-color) !important; 223 | text-align: right !important; 224 | user-select: none !important; 225 | } 226 | figure.shiki pre { 227 | margin: 0 !important; 228 | padding: 8px 0 !important; 229 | border: none !important; 230 | } 231 | figure.shiki pre code { 232 | background: none !important; 233 | } 234 | figure.shiki .codeblock pre * { 235 | font-size: 1em; 236 | font-family: Consolas, "Fira Code", "Fira Mono", Menlo, "DejaVu Sans Mono", 237 | monospace, 宋体; 238 | overflow: auto !important; 239 | line-height: 1.6; 240 | } 241 | figure.shiki .code pre { 242 | padding-right: 10px !important; 243 | padding-left: 10px !important; 244 | width: 100% !important; 245 | background: none !important; 246 | } 247 | .code-expand-btn:not(.expand-done) ~ pre, 248 | .code-expand-btn:not(.expand-done) ~ *pre { 249 | overflow: hidden; 250 | } 251 | .code-expand-btn.expand-done + pre, 252 | .code-expand-btn.expand-done + * pre, 253 | .code-expand-btn.expand-done + div.codeblock, 254 | .code-expand-btn.expand-done + * div.codeblock { 255 | margin-bottom: 1.8em; 256 | } 257 | --------------------------------------------------------------------------------
${code}
${numbers}
9 | 
15 | 
21 | 
26 |