Changeset 2994656

highlighting-code-block/tags/2.0.0/build/css/hcb--dark.css

r2886197	r2994656
1		.hcb_wrap.hcb_wrap{display:block;margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap pre{-webkit-overflow-scrolling:touch;border-radius:0;box-sizing:border-box;display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);letter-spacing:.1px;line-height:1;margin:0;overflow:auto;padding:1.75em 1.5em;position:static}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap pre{word-wrap:normal;background:var(--hcb-color--bg,#f7f6f6);border:none;color:var(--hcb-color--text,#1f1e1e);-webkit-hyphens:none;hyphens:none;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px var(--hcb-color--text-shadow,#fff);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap span{box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:1.5;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb-color--highlight,hsla(24,20%,49%,.1));font-size:inherit;left:0;line-height:inherit;margin-top:1.75em;padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap .line-highlight:before,.hcb_wrap .line-highlight[data-end]:after{background-color:var(--hcb-color--highlight-bg,#b1aead);border-radius:0;box-sizing:border-box;color:var(--hcb-color--highlight-text,#f5f2f0);content:attr(data-start);font-size:12px;font-weight:700;left:0;line-height:inherit;min-width:1.5em;padding:1px 2px;position:absolute;text-align:center;text-shadow:none;top:0;vertical-align:middle}.hcb_wrap .line-highlight[data-end]:after{bottom:0;content:attr(data-end);top:auto}.hcb_wrap .line-numbers .line-highlight:after,.hcb_wrap .line-numbers .line-highlight:before{content:none}.hcb_wrap pre.line-numbers{counter-reset:linenumber;padding-left:3.75em;position:static}.hcb_wrap pre.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers .line-numbers-rows{border-right:1px solid var(--hcb-color--line-numbers,#999);font-size:inherit;left:-3.75em;letter-spacing:-1px;pointer-events:none;position:absolute;top:-2px;-webkit-user-select:none;user-select:none;width:3em}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;pointer-events:none}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb-color--line-numbers,#999);content:counter(linenumber);display:block;padding-right:.8em;text-align:right}.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap .hcb-clipboard+pre:before{right:26px}.hcb_wrap pre[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap pre[data-show-lang="0"]:not([data-file]):before{content:none}.hcb_wrap .hcb-clipboard{background-color:hsla(0,0%,100%,.8);background-image:url(../../assets/img/clipborad.svg);background-position:50%;background-repeat:no-repeat;background-size:16px auto;border:none;border-radius:1px;box-sizing:border-box;height:20px;padding:0;position:absolute;right:0;text-align:center;top:0;width:20px;z-index:1}.hcb_wrap .hcb-clipboard.-done{background-image:url(../../assets/img/copied.svg)}.hcb_wrap .hcb-clipboard.-done:before{bottom:100%;content:"Copied!";font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;position:absolute;right:0}.hcb_wrap pre::-webkit-scrollbar{height:6px}.hcb_wrap pre::-webkit-scrollbar-track{background:var(--hcb-color--scrollbar-track,hsla(0,0%,59%,.1));border:none}.hcb_wrap pre::-webkit-scrollbar-thumb{background:var(--hcb-color--scrollbar-thumb,hsla(0,0%,59%,.25));border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}body{--hcb-color--text:#f8f8f2;--hcb-color--text-shadow:rg1a1a1ab(136,132,132);--hcb-color--bg:#34352e;--hcb-color--lang--text:#fff;--hcb-color--lang--bg:#111;--hcb-color--line-numbers:#999;--hcb-color--highlight:rgba(255,250,245,.1);--hcb-color--highlight-text:#fcfcfc;--hcb-color--highlight-bg:#afa7a166;--hcb-file-icon:url(../../assets/img/file-icon-dark.svg);--hcb-color--scrollbar-track:hsla(0,0%,100%,.1);--hcb-color--scrollbar-thumb:hsla(0,0%,100%,.2)}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#a8a897}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:#ff2c78}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector{color:#b4ec43}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.string{color:#f3e880}.token.function,.token.keyword.def{color:#5fe6ff}.token.keyword,.token.operator{color:#f92672}.token.keyword.this,.token.regex{color:#fd971f}.token.delimiter:not(.symbol){color:#5294ff}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.language-css .token.property,.language-json .token.property,.language-scss .token.property{color:#5fe6ff}.language-php .token.important.delimiter{font-weight:400}.language-ruby .token.interpolation{color:#f8f8f2}.language-json .token.operator{color:#f3e880}@media screen and (max-width:599px){.hcb_wrap.hcb_wrap pre{font-size:var(--hcb-font-size--mobile,13px)}}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--pX:1.5em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb_wrap.hcb_wrap{display:block;font-size:var(--hcb--fz,14px);margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap>pre{-webkit-overflow-scrolling:touch;border-radius:var(--hcb--radius,0);box-sizing:border-box;display:block;font-family:var(--hcb--ff);font-size:inherit;letter-spacing:.1px;line-height:1.5;margin:0;overflow:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static}.hcb_wrap.hcb_wrap>pre,.hcb_wrap.hcb_wrap>pre>code{word-wrap:normal;background:var(--hcb--bgc);border:none;color:var(--hcb--c);-webkit-hyphens:none;hyphens:none;tab-size:4;text-align:left;text-shadow:var(--hcb--tsh);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap :is(code,span){box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb--highlight-color);font-size:inherit;left:0;line-height:inherit;margin-top:var(--hcb--pY);padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap>.prism.line-numbers{counter-reset:linenumber;padding-left:calc(var(--hcb--pX) + var(--hcb--linenumW));position:static}.hcb_wrap>.prism.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers-rows{border-right:1px solid var(--hcb--line-numbers--c);font-size:inherit;left:calc(-1px - var(--hcb--linenumW) - var(--hcb--pX)/2);min-width:var(--hcb--linenumW);pointer-events:none;position:absolute;top:-.125em;-webkit-user-select:none;user-select:none}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;letter-spacing:-.25px;pointer-events:none;text-align:center}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb--line-numbers--c);content:counter(linenumber);display:block}.hcb_wrap>pre::-webkit-scrollbar{height:6px}.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap>pre[data-show-lang="0"]{--hcb--data-label:none}.hcb_wrap>pre[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb_wrap>pre[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap{--hcb-clipbtn-opacity:0}.hcb-clipboard:focus-visible,.hcb_wrap:hover{--hcb-clipbtn-opacity:100}.hcb-clipboard{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:url(../../assets/img/clipboard-to-copy.svg) no-repeat 50%/64% auto;background-color:#fafafacc;border:none;border-radius:3px;box-shadow:0 1px 2px #3d3d3d40;box-sizing:border-box;color:#000;height:2.25em;opacity:var(--hcb-clipbtn-opacity);padding:0;position:absolute;right:8px;text-align:center;top:calc(var(--hcb--btn-offset, 0px) + 8px);transition:opacity .25s;width:2.25em;z-index:2}[data-show-lang="0"]+.hcb-clipboard{--hcb--btn-offset:0px}[data-show-lang="1"]+.hcb-clipboard{--hcb--btn-offset:20px}.hcb-clipboard.-done{background-image:url(../../assets/img/clipboard-copied.svg)}.hcb-clipboard.-done:before{background-color:inherit;border-radius:8px;color:inherit;content:"✓Copied";display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;padding:2px 4px 2px 2px;position:absolute;right:calc(4px + 100%);top:50%;translate:0 -50%}:root{--hcb--c:#f9f9f6;--hcb--bgc:#2d2e29;--hcb--data-label--c:#fff;--hcb--data-label--bgc:#20211f;--hcb--line-numbers--c:#a3a3a3;--hcb--highlight-color:#fffaf51a;--hcb--file-icon:url(../../assets/img/file-icon-dark.svg);--hcb--scbar-track--bgc:#ffffff1a;--hcb--scbar-thumb--bgc:#fff3}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#a8a897}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:#ff2c78}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector{color:#b4ec43}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.string{color:#f3e880}.token.function,.token.keyword.def{color:#5fe6ff}.token.keyword,.token.operator{color:#f92672}.token.keyword.this,.token.regex{color:#fd971f}.token.delimiter:not(.symbol){color:#5294ff}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.language-css .token.property,.language-json .token.property,.language-scss .token.property{color:#5fe6ff}.language-php .token.important.delimiter{font-weight:400}.language-ruby .token.interpolation{color:#f8f8f2}.language-json .token.operator{color:#f3e880}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/tags/2.0.0/build/css/hcb--light.css

r2886197	r2994656
1		.hcb_wrap.hcb_wrap{display:block;margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap pre{-webkit-overflow-scrolling:touch;border-radius:0;box-sizing:border-box;display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);letter-spacing:.1px;line-height:1;margin:0;overflow:auto;padding:1.75em 1.5em;position:static}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap pre{word-wrap:normal;background:var(--hcb-color--bg,#f7f6f6);border:none;color:var(--hcb-color--text,#1f1e1e);-webkit-hyphens:none;hyphens:none;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px var(--hcb-color--text-shadow,#fff);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap span{box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:1.5;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb-color--highlight,hsla(24,20%,49%,.1));font-size:inherit;left:0;line-height:inherit;margin-top:1.75em;padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap .line-highlight:before,.hcb_wrap .line-highlight[data-end]:after{background-color:var(--hcb-color--highlight-bg,#b1aead);border-radius:0;box-sizing:border-box;color:var(--hcb-color--highlight-text,#f5f2f0);content:attr(data-start);font-size:12px;font-weight:700;left:0;line-height:inherit;min-width:1.5em;padding:1px 2px;position:absolute;text-align:center;text-shadow:none;top:0;vertical-align:middle}.hcb_wrap .line-highlight[data-end]:after{bottom:0;content:attr(data-end);top:auto}.hcb_wrap .line-numbers .line-highlight:after,.hcb_wrap .line-numbers .line-highlight:before{content:none}.hcb_wrap pre.line-numbers{counter-reset:linenumber;padding-left:3.75em;position:static}.hcb_wrap pre.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers .line-numbers-rows{border-right:1px solid var(--hcb-color--line-numbers,#999);font-size:inherit;left:-3.75em;letter-spacing:-1px;pointer-events:none;position:absolute;top:-2px;-webkit-user-select:none;user-select:none;width:3em}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;pointer-events:none}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb-color--line-numbers,#999);content:counter(linenumber);display:block;padding-right:.8em;text-align:right}.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap .hcb-clipboard+pre:before{right:26px}.hcb_wrap pre[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap pre[data-show-lang="0"]:not([data-file]):before{content:none}.hcb_wrap .hcb-clipboard{background-color:hsla(0,0%,100%,.8);background-image:url(../../assets/img/clipborad.svg);background-position:50%;background-repeat:no-repeat;background-size:16px auto;border:none;border-radius:1px;box-sizing:border-box;height:20px;padding:0;position:absolute;right:0;text-align:center;top:0;width:20px;z-index:1}.hcb_wrap .hcb-clipboard.-done{background-image:url(../../assets/img/copied.svg)}.hcb_wrap .hcb-clipboard.-done:before{bottom:100%;content:"Copied!";font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;position:absolute;right:0}.hcb_wrap pre::-webkit-scrollbar{height:6px}.hcb_wrap pre::-webkit-scrollbar-track{background:var(--hcb-color--scrollbar-track,hsla(0,0%,59%,.1));border:none}.hcb_wrap pre::-webkit-scrollbar-thumb{background:var(--hcb-color--scrollbar-thumb,hsla(0,0%,59%,.25));border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}body{--hcb-color--text:#1f1e1e;--hcb-color--text-shadow:#fff;--hcb-color--bg:#f7f6f6;--hcb-color--lang--text:#1f1e1e;--hcb-color--lang--bg:#dedede;--hcb-color--line-numbers:#999;--hcb-color--highlight:hsla(24,20%,49%,.1);--hcb-color--highlight-text:#f5f2f0;--hcb-color--highlight-bg:#b1aead;--hcb-file-icon:url(../../assets/img/file-icon-light.svg);--hcb-color--scrollbar-track:rgba(0,0,0,.05);--hcb-color--scrollbar-thumb:#0000001a}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#5f5f5f}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector,.token.string{color:#407b08}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#9a6e3a}.token.atrule,.token.attr-value,.token.function{color:#07a}.token.keyword,.token.operator{color:#c72c4c}.token.important,.token.keyword.this,.token.regex,.token.variable{color:#f18106}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.token.delimiter.important{color:#183d86;font-weight:400}@media screen and (max-width:599px){.hcb_wrap.hcb_wrap pre{font-size:var(--hcb-font-size--mobile,13px)}}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--pX:1.5em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb_wrap.hcb_wrap{display:block;font-size:var(--hcb--fz,14px);margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap>pre{-webkit-overflow-scrolling:touch;border-radius:var(--hcb--radius,0);box-sizing:border-box;display:block;font-family:var(--hcb--ff);font-size:inherit;letter-spacing:.1px;line-height:1.5;margin:0;overflow:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static}.hcb_wrap.hcb_wrap>pre,.hcb_wrap.hcb_wrap>pre>code{word-wrap:normal;background:var(--hcb--bgc);border:none;color:var(--hcb--c);-webkit-hyphens:none;hyphens:none;tab-size:4;text-align:left;text-shadow:var(--hcb--tsh);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap :is(code,span){box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb--highlight-color);font-size:inherit;left:0;line-height:inherit;margin-top:var(--hcb--pY);padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap>.prism.line-numbers{counter-reset:linenumber;padding-left:calc(var(--hcb--pX) + var(--hcb--linenumW));position:static}.hcb_wrap>.prism.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers-rows{border-right:1px solid var(--hcb--line-numbers--c);font-size:inherit;left:calc(-1px - var(--hcb--linenumW) - var(--hcb--pX)/2);min-width:var(--hcb--linenumW);pointer-events:none;position:absolute;top:-.125em;-webkit-user-select:none;user-select:none}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;letter-spacing:-.25px;pointer-events:none;text-align:center}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb--line-numbers--c);content:counter(linenumber);display:block}.hcb_wrap>pre::-webkit-scrollbar{height:6px}.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap>pre[data-show-lang="0"]{--hcb--data-label:none}.hcb_wrap>pre[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb_wrap>pre[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap{--hcb-clipbtn-opacity:0}.hcb-clipboard:focus-visible,.hcb_wrap:hover{--hcb-clipbtn-opacity:100}.hcb-clipboard{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:url(../../assets/img/clipboard-to-copy.svg) no-repeat 50%/64% auto;background-color:#fafafacc;border:none;border-radius:3px;box-shadow:0 1px 2px #3d3d3d40;box-sizing:border-box;color:#000;height:2.25em;opacity:var(--hcb-clipbtn-opacity);padding:0;position:absolute;right:8px;text-align:center;top:calc(var(--hcb--btn-offset, 0px) + 8px);transition:opacity .25s;width:2.25em;z-index:2}[data-show-lang="0"]+.hcb-clipboard{--hcb--btn-offset:0px}[data-show-lang="1"]+.hcb-clipboard{--hcb--btn-offset:20px}.hcb-clipboard.-done{background-image:url(../../assets/img/clipboard-copied.svg)}.hcb-clipboard.-done:before{background-color:inherit;border-radius:8px;color:inherit;content:"✓Copied";display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;padding:2px 4px 2px 2px;position:absolute;right:calc(4px + 100%);top:50%;translate:0 -50%}:root{--hcb--tsh:1px 1px 0px #f0f0f0}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#5f5f5f}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector,.token.string{color:#407b08}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#9a6e3a}.token.atrule,.token.attr-value,.token.function{color:#07a}.token.keyword,.token.operator{color:#c72c4c}.token.important,.token.keyword.this,.token.regex,.token.variable{color:#f18106}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.token.delimiter.important{color:#183d86;font-weight:400}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/tags/2.0.0/build/css/hcb-editor--dark.css

r2886197	r2994656
1		.mce-content-body .hcb_wrap{margin:2em 0}.hcb_wrap.hcb_wrap{border:1px solid #f1f1f1;position:relative}.hcb_wrap.hcb_wrap pre,.hcb_wrap.hcb_wrap textarea.hcb_textarea{background:var(--hcb-color--bg,#f7f6f6);border:none;border-radius:0;box-sizing:border-box;color:var(--hcb-color--text,#1f1e1e);display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);line-height:1.8;margin:0!important;overflow-wrap:break-word;overflow-x:auto;padding:1.5em;position:static;-o-tab-size:2;tab-size:2;white-space:pre!important;width:100%}.hcb_wrap .hcb_codewrap{background:var(--hcb-color--bg,#f7f6f6);color:var(--hcb-color--text,#1f1e1e);padding-right:1em;position:relative}.hcb_wrap pre::-webkit-scrollbar,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar{border:none;height:8px}.hcb_wrap pre::-webkit-scrollbar-track,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar-track{background:#f7f7f7;border:none}.hcb_wrap pre::-webkit-scrollbar-thumb,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:4px}.hcb_wrap textarea.hcb_textarea{box-shadow:none;outline:none;resize:none}.hcb_wrap pre code{background:inherit!important;color:inherit!important;display:block;font-family:inherit!important;padding:0!important;-o-tab-size:2;tab-size:2}.hcb_wrap .hcb_controls{display:flex;flex-wrap:wrap;padding:8px}.hcb_wrap .hcb_controls:after{clear:both;content:"";display:block;height:0;visibility:hidden}.hcb_wrap .hcb_controls .components-base-control{flex-basis:50%;max-width:25rem}.hcb_wrap .hcb_controls .components-base-control select{width:100%}.hcb_wrap .hcb_controls .filename_input{flex-basis:20%;height:28px;line-height:28px;margin-left:auto;min-width:10em;padding:0 8px}.hcb_wrap .hcb_controls .num_input{flex-basis:20%;height:28px;line-height:28px;margin-left:16px;min-width:10em;padding:0 8px}.hcb_wrap .hcb_linenum{border-right:1px solid hsla(0,0%,59%,.5);display:none;height:calc(100% - 2em);left:1em;position:absolute;top:1em;width:0}.hcb-block[data-show-linenum] .hcb_linenum{display:block}.hcb-block[data-show-linenum] textarea.hcb_textarea{margin-left:2em!important;padding-left:.5em;width:calc(100% - 2em)}.hcb-block:before,.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb-block[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb-block[data-show-lang="0"]:not([data-file]):before{content:none}.wp-embed-responsive.editor-styles-wrapper .hcb_controls,[data-type="loos-hcb/code-block"]:not(.is-selected) .hcb_controls{display:none}body{--hcb-color--text:#f8f8f2;--hcb-color--text-shadow:rg1a1a1ab(136,132,132);--hcb-color--bg:#34352e;--hcb-color--lang--text:#fff;--hcb-color--lang--bg:#111;--hcb-file-icon:url(../../assets/img/file-icon-dark.svg)}.hcb_wrap textarea.hcb_textarea::placeholder{color:hsla(0,0%,100%,.4);font-style:italic}.hcb_wrap textarea.hcb_textarea::-moz-placeholder,.hcb_wrap textarea.hcb_textarea::-ms-input-placeholder,.hcb_wrap textarea.hcb_textarea::-webkit-input-placeholder{color:hsla(0,0%,100%,.4);font-style:italic}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb-code-in-label{font-size:.95em;padding:2px;text-transform:lowercase}.hcb-datapreview{background-color:inherit;border-radius:var(--hcb--radius);bottom:var(--hcb--scbarH,0);color:inherit;display:flex;flex-wrap:wrap;font-size:12px;gap:4px;line-height:1.25;opacity:.75;padding:2px 4px;position:absolute;right:0}.mce-content-body .hcb_wrap{margin:2em 0}:root{--hcb--pY:2em;--hcb--pX:1.5em;--hcb--linenumW:3em}.hcb_wrap{position:relative}.hcb_wrap>.hcb_codewrap{background:var(--hcb--bgc);border-radius:var(--hcb--radius);color:var(--hcb--c);padding-right:.75em;position:relative}.hcb_codewrap,.hcb_textarea,.hcb_wrap>pre{background:var(--hcb--bgc)!important;color:var(--hcb--c)!important;font-family:var(--hcb--ff)!important;font-size:var(--hcb--fz,14px)!important;line-height:1.5!important}.hcb_textarea.hcb_textarea,.hcb_wrap.hcb_wrap>pre{border:none;border-radius:0;box-sizing:border-box;display:block;margin:0!important;overflow-wrap:break-word;overflow-x:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static;tab-size:4;white-space:pre!important;width:100%}.hcb_textarea.hcb_textarea::-webkit-scrollbar,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar{border:none;height:6px}.hcb_textarea.hcb_textarea::-webkit-scrollbar-track,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_textarea.hcb_textarea::-webkit-scrollbar-thumb,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}.hcb_textarea.hcb_textarea{box-shadow:none;height:calc(1.5emvar(--hcb--code-linenum, 1) + var(--hcb--pY)2 + var(--hcb--scbarH, 0px));outline:none;resize:none}.hcb_textarea.hcb_textarea::placeholder{color:inherit;font-style:italic;opacity:.5}.hcb_textarea.hcb_textarea::-moz-placeholder,.hcb_textarea.hcb_textarea::-ms-input-placeholder,.hcb_textarea.hcb_textarea::-webkit-input-placeholder{color:inherit;font-style:italic;opacity:.5}.hcb_wrap>pre code{background:inherit!important;color:inherit!important;display:block;font-family:inherit!important;padding:0!important;tab-size:2}.hcb_linenum{border-right:1px solid;color:var(--hcb--line-numbers--c);height:calc(100% - var(--hcb--pY)*2);left:calc(var(--hcb--linenumW)/2 + .5em);position:absolute;top:var(--hcb--pY);width:0}.hcb_linenum>.hcb-startNum{word-wrap:normal;font:inherit;font-size:.95em;line-height:1.5;position:absolute;right:.5em;right:calc(.95em - 1px);top:0;translate:50%;white-space:nowrap}.hcb-block[data-show-linenum] .hcb_codewrap{padding-left:calc(var(--hcb--linenumW)/2 + 1em)}.hcb-block[data-show-linenum] .hcb_textarea{padding-left:calc(var(--hcb--linenumW)/2 - 1em)}.hcb-block:before,.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb-block[data-show-lang="0"]{--hcb--data-label:none}.hcb-block[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb-block[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}:root{--hcb--c:#f8f8f2;--hcb--bgc:#34352e;--hcb--data-label--c:#fff;--hcb--data-label--bgc:#111;--hcb--file-icon:url(../../assets/img/file-icon-dark.svg);--hcb--scbar-track--bgc:#ffffff1a;--hcb--scbar-thumb--bgc:#fff3}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/tags/2.0.0/build/css/hcb-editor--light.css

r2886197	r2994656
1		.mce-content-body .hcb_wrap{margin:2em 0}.hcb_wrap.hcb_wrap{border:1px solid #f1f1f1;position:relative}.hcb_wrap.hcb_wrap pre,.hcb_wrap.hcb_wrap textarea.hcb_textarea{background:var(--hcb-color--bg,#f7f6f6);border:none;border-radius:0;box-sizing:border-box;color:var(--hcb-color--text,#1f1e1e);display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);line-height:1.8;margin:0!important;overflow-wrap:break-word;overflow-x:auto;padding:1.5em;position:static;-o-tab-size:2;tab-size:2;white-space:pre!important;width:100%}.hcb_wrap .hcb_codewrap{background:var(--hcb-color--bg,#f7f6f6);color:var(--hcb-color--text,#1f1e1e);padding-right:1em;position:relative}.hcb_wrap pre::-webkit-scrollbar,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar{border:none;height:8px}.hcb_wrap pre::-webkit-scrollbar-track,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar-track{background:#f7f7f7;border:none}.hcb_wrap pre::-webkit-scrollbar-thumb,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:4px}.hcb_wrap textarea.hcb_textarea{box-shadow:none;outline:none;resize:none}.hcb_wrap pre code{background:inherit!important;color:inherit!important;display:block;font-family:inherit!important;padding:0!important;-o-tab-size:2;tab-size:2}.hcb_wrap .hcb_controls{display:flex;flex-wrap:wrap;padding:8px}.hcb_wrap .hcb_controls:after{clear:both;content:"";display:block;height:0;visibility:hidden}.hcb_wrap .hcb_controls .components-base-control{flex-basis:50%;max-width:25rem}.hcb_wrap .hcb_controls .components-base-control select{width:100%}.hcb_wrap .hcb_controls .filename_input{flex-basis:20%;height:28px;line-height:28px;margin-left:auto;min-width:10em;padding:0 8px}.hcb_wrap .hcb_controls .num_input{flex-basis:20%;height:28px;line-height:28px;margin-left:16px;min-width:10em;padding:0 8px}.hcb_wrap .hcb_linenum{border-right:1px solid hsla(0,0%,59%,.5);display:none;height:calc(100% - 2em);left:1em;position:absolute;top:1em;width:0}.hcb-block[data-show-linenum] .hcb_linenum{display:block}.hcb-block[data-show-linenum] textarea.hcb_textarea{margin-left:2em!important;padding-left:.5em;width:calc(100% - 2em)}.hcb-block:before,.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb-block[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb-block[data-show-lang="0"]:not([data-file]):before{content:none}.wp-embed-responsive.editor-styles-wrapper .hcb_controls,[data-type="loos-hcb/code-block"]:not(.is-selected) .hcb_controls{display:none}body{--hcb-color--text:#1f1e1e;--hcb-color--text-shadow:#fff;--hcb-color--bg:#f7f6f6;--hcb-color--lang--text:#1f1e1e;--hcb-color--lang--bg:#dedede;--hcb-file-icon:url(../../assets/img/file-icon-light.svg)}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb-code-in-label{font-size:.95em;padding:2px;text-transform:lowercase}.hcb-datapreview{background-color:inherit;border-radius:var(--hcb--radius);bottom:var(--hcb--scbarH,0);color:inherit;display:flex;flex-wrap:wrap;font-size:12px;gap:4px;line-height:1.25;opacity:.75;padding:2px 4px;position:absolute;right:0}.mce-content-body .hcb_wrap{margin:2em 0}:root{--hcb--pY:2em;--hcb--pX:1.5em;--hcb--linenumW:3em}.hcb_wrap{position:relative}.hcb_wrap>.hcb_codewrap{background:var(--hcb--bgc);border-radius:var(--hcb--radius);color:var(--hcb--c);padding-right:.75em;position:relative}.hcb_codewrap,.hcb_textarea,.hcb_wrap>pre{background:var(--hcb--bgc)!important;color:var(--hcb--c)!important;font-family:var(--hcb--ff)!important;font-size:var(--hcb--fz,14px)!important;line-height:1.5!important}.hcb_textarea.hcb_textarea,.hcb_wrap.hcb_wrap>pre{border:none;border-radius:0;box-sizing:border-box;display:block;margin:0!important;overflow-wrap:break-word;overflow-x:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static;tab-size:4;white-space:pre!important;width:100%}.hcb_textarea.hcb_textarea::-webkit-scrollbar,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar{border:none;height:6px}.hcb_textarea.hcb_textarea::-webkit-scrollbar-track,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_textarea.hcb_textarea::-webkit-scrollbar-thumb,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}.hcb_textarea.hcb_textarea{box-shadow:none;height:calc(1.5emvar(--hcb--code-linenum, 1) + var(--hcb--pY)2 + var(--hcb--scbarH, 0px));outline:none;resize:none}.hcb_textarea.hcb_textarea::placeholder{color:inherit;font-style:italic;opacity:.5}.hcb_textarea.hcb_textarea::-moz-placeholder,.hcb_textarea.hcb_textarea::-ms-input-placeholder,.hcb_textarea.hcb_textarea::-webkit-input-placeholder{color:inherit;font-style:italic;opacity:.5}.hcb_wrap>pre code{background:inherit!important;color:inherit!important;display:block;font-family:inherit!important;padding:0!important;tab-size:2}.hcb_linenum{border-right:1px solid;color:var(--hcb--line-numbers--c);height:calc(100% - var(--hcb--pY)*2);left:calc(var(--hcb--linenumW)/2 + .5em);position:absolute;top:var(--hcb--pY);width:0}.hcb_linenum>.hcb-startNum{word-wrap:normal;font:inherit;font-size:.95em;line-height:1.5;position:absolute;right:.5em;right:calc(.95em - 1px);top:0;translate:50%;white-space:nowrap}.hcb-block[data-show-linenum] .hcb_codewrap{padding-left:calc(var(--hcb--linenumW)/2 + 1em)}.hcb-block[data-show-linenum] .hcb_textarea{padding-left:calc(var(--hcb--linenumW)/2 - 1em)}.hcb-block:before,.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb-block[data-show-lang="0"]{--hcb--data-label:none}.hcb-block[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb-block[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/tags/2.0.0/build/css/hcb.css

r2886197	r2994656
1		.hcb_wrap.hcb_wrap{display:block;margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap pre{-webkit-overflow-scrolling:touch;border-radius:0;box-sizing:border-box;display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);letter-spacing:.1px;line-height:1;margin:0;overflow:auto;padding:1.75em 1.5em;position:static}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap pre{word-wrap:normal;background:var(--hcb-color--bg,#f7f6f6);border:none;color:var(--hcb-color--text,#1f1e1e);-webkit-hyphens:none;hyphens:none;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px var(--hcb-color--text-shadow,#fff);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap span{box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:1.5;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb-color--highlight,hsla(24,20%,49%,.1));font-size:inherit;left:0;line-height:inherit;margin-top:1.75em;padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap .line-highlight:before,.hcb_wrap .line-highlight[data-end]:after{background-color:var(--hcb-color--highlight-bg,#b1aead);border-radius:0;box-sizing:border-box;color:var(--hcb-color--highlight-text,#f5f2f0);content:attr(data-start);font-size:12px;font-weight:700;left:0;line-height:inherit;min-width:1.5em;padding:1px 2px;position:absolute;text-align:center;text-shadow:none;top:0;vertical-align:middle}.hcb_wrap .line-highlight[data-end]:after{bottom:0;content:attr(data-end);top:auto}.hcb_wrap .line-numbers .line-highlight:after,.hcb_wrap .line-numbers .line-highlight:before{content:none}.hcb_wrap pre.line-numbers{counter-reset:linenumber;padding-left:3.75em;position:static}.hcb_wrap pre.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers .line-numbers-rows{border-right:1px solid var(--hcb-color--line-numbers,#999);font-size:inherit;left:-3.75em;letter-spacing:-1px;pointer-events:none;position:absolute;top:-2px;-webkit-user-select:none;user-select:none;width:3em}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;pointer-events:none}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb-color--line-numbers,#999);content:counter(linenumber);display:block;padding-right:.8em;text-align:right}.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap .hcb-clipboard+pre:before{right:26px}.hcb_wrap pre[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap pre[data-show-lang="0"]:not([data-file]):before{content:none}.hcb_wrap .hcb-clipboard{background-color:hsla(0,0%,100%,.8);background-image:url(../../assets/img/clipborad.svg);background-position:50%;background-repeat:no-repeat;background-size:16px auto;border:none;border-radius:1px;box-sizing:border-box;height:20px;padding:0;position:absolute;right:0;text-align:center;top:0;width:20px;z-index:1}.hcb_wrap .hcb-clipboard.-done{background-image:url(../../assets/img/copied.svg)}.hcb_wrap .hcb-clipboard.-done:before{bottom:100%;content:"Copied!";font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;position:absolute;right:0}.hcb_wrap pre::-webkit-scrollbar{height:6px}.hcb_wrap pre::-webkit-scrollbar-track{background:var(--hcb-color--scrollbar-track,hsla(0,0%,59%,.1));border:none}.hcb_wrap pre::-webkit-scrollbar-thumb{background:var(--hcb-color--scrollbar-thumb,hsla(0,0%,59%,.25));border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}@media screen and (max-width:599px){.hcb_wrap.hcb_wrap pre{font-size:var(--hcb-font-size--mobile,13px)}}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--pX:1.5em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb_wrap.hcb_wrap{display:block;font-size:var(--hcb--fz,14px);margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap>pre{-webkit-overflow-scrolling:touch;border-radius:var(--hcb--radius,0);box-sizing:border-box;display:block;font-family:var(--hcb--ff);font-size:inherit;letter-spacing:.1px;line-height:1.5;margin:0;overflow:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static}.hcb_wrap.hcb_wrap>pre,.hcb_wrap.hcb_wrap>pre>code{word-wrap:normal;background:var(--hcb--bgc);border:none;color:var(--hcb--c);-webkit-hyphens:none;hyphens:none;tab-size:4;text-align:left;text-shadow:var(--hcb--tsh);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap :is(code,span){box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb--highlight-color);font-size:inherit;left:0;line-height:inherit;margin-top:var(--hcb--pY);padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap>.prism.line-numbers{counter-reset:linenumber;padding-left:calc(var(--hcb--pX) + var(--hcb--linenumW));position:static}.hcb_wrap>.prism.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers-rows{border-right:1px solid var(--hcb--line-numbers--c);font-size:inherit;left:calc(-1px - var(--hcb--linenumW) - var(--hcb--pX)/2);min-width:var(--hcb--linenumW);pointer-events:none;position:absolute;top:-.125em;-webkit-user-select:none;user-select:none}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;letter-spacing:-.25px;pointer-events:none;text-align:center}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb--line-numbers--c);content:counter(linenumber);display:block}.hcb_wrap>pre::-webkit-scrollbar{height:6px}.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap>pre[data-show-lang="0"]{--hcb--data-label:none}.hcb_wrap>pre[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb_wrap>pre[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap{--hcb-clipbtn-opacity:0}.hcb-clipboard:focus-visible,.hcb_wrap:hover{--hcb-clipbtn-opacity:100}.hcb-clipboard{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:url(../../assets/img/clipboard-to-copy.svg) no-repeat 50%/64% auto;background-color:#fafafacc;border:none;border-radius:3px;box-shadow:0 1px 2px #3d3d3d40;box-sizing:border-box;color:#000;height:2.25em;opacity:var(--hcb-clipbtn-opacity);padding:0;position:absolute;right:8px;text-align:center;top:calc(var(--hcb--btn-offset, 0px) + 8px);transition:opacity .25s;width:2.25em;z-index:2}[data-show-lang="0"]+.hcb-clipboard{--hcb--btn-offset:0px}[data-show-lang="1"]+.hcb-clipboard{--hcb--btn-offset:20px}.hcb-clipboard.-done{background-image:url(../../assets/img/clipboard-copied.svg)}.hcb-clipboard.-done:before{background-color:inherit;border-radius:8px;color:inherit;content:"✓Copied";display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;padding:2px 4px 2px 2px;position:absolute;right:calc(4px + 100%);top:50%;translate:0 -50%}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/tags/2.0.0/build/js/code-block/index.asset.php

r2886197	r2994656
1		<?php return array('dependencies' => array('~~wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'f4c02a0a618beab3fcd5f56b8c4dc46b~~');
	1	<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'eee4433c3b38834bd373');

highlighting-code-block/tags/2.0.0/build/js/code-block/index.js

r2886197	r2994656
1		!function(){var e={643:function(e,t,a){"use strict";var n=window.wp.blocks,l=window.wp.element,o=window.wp.i18n,s=window.wp.blockEditor,r=window.wp.components,c=(0,l.memo)((e=>{let{attributes:t,setAttributes:a}=e;const{isLineShow:n,isShowLang:c}=t;return(0,l.createElement)(s.InspectorControls,null,(0,l.createElement)(r.PanelBody,{title:(0,o.__)("HCB settings","loos-hcb"),initialOpen:!0},(0,l.createElement)(r.RadioControl,{label:(0,o.__)("Settings for displaying the number of lines","loos-hcb"),selected:n,options:[{label:(0,o.__)("Do not set individually","loos-hcb"),value:"undefined"},{label:(0,o.__)("Display row count","loos-hcb"),value:"on"},{label:(0,o.__)("Do not display row count","loos-hcb"),value:"off"}],onChange:e=>{a({isLineShow:e})}}),(0,l.createElement)(r.RadioControl,{label:(0,o.__)("Settings for displaying language name","loos-hcb"),selected:c,options:[{label:(0,o.__)("Do not set individually","loos-hcb"),value:""},{label:(0,o.__)("Display language","loos-hcb"),value:"1"},{label:(0,o.__)("Do not display language","loos-hcb"),value:"0"}],onChange:e=>{a({isShowLang:e})}})))}));function i(e){const t=e.value.match(/\r\n\|\n/g);let a;a=null!==t?t.length+1:1,e.style.height=1.8*a+1.6+2+"em"}function u(e){return e?e.replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):e}var p=a(184),d=a.n(p);let m=window.hcbLangs;"object"!=typeof m&&(m={html:"HTML",css:"CSS",scss:"SCSS",js:"JavaScript",ts:"TypeScript",php:"PHP",ruby:"Ruby",python:"Python",swift:"Swift",c:"C",csharp:"C#",cpp:"C++",objectivec:"Objective-C",sql:"SQL",json:"JSON",bash:"Bash",git:"Git"});const g=[{value:"",label:"- Lang Select -"}];Object.keys(m).forEach((e=>{g.push({value:e,label:m[e]})}));var h=JSON.parse('{"u2":"loos-hcb/code-block"}'),f=(0,l.createElement)("svg",{x:"0px",y:"0px",viewBox:"0 0 512 512"},(0,l.createElement)("path",{d:"M48,346.8h34.6v51h31.2v-51h34.6v135.8h-34.6V428H82.6v54.5H48V346.8z"}),(0,l.createElement)("path",{d:"M268.1,344.3c17.5,0,31.6,8.3,41,17.3l-19,21.6c-6.2-5.6-12.8-9.2-22-9.2c-17.3,0-30.5,15.2-30.5,40.4 c0,26.1,13.2,40.6,32,40.6c9,0,16.4-4.5,22.4-11.1l19,21.1c-11.5,13.4-26.7,19.9-43.4,19.9c-35.3,0-65.4-23.1-65.4-69.4 C202.1,370.3,231.5,344.3,268.1,344.3z"}),(0,l.createElement)("path",{d:"M363,346.8h44.4c28.2,0,50.6,7.1,50.6,33.7c0,11.8-7.1,25.4-22.9,29.5v0.8c19.2,3.6,29,13.7,29,31.8 c0,28-23.1,40-52.6,40H363V346.8z M406.3,400.6c12.6,0,17.7-6,17.7-14.9c0-8.6-5.3-12.2-17.7-12.2h-8.5v27.1H406.3z M408.9,455.8 c14.7,0,21.1-5.5,21.1-16.2c0-10.5-6.4-14.9-21.1-14.9h-11.1v31H408.9z"}),(0,l.createElement)("polygon",{points:"209.8,56.9 184,31 39.3,175.7 39.3,175.7 39.3,175.7 184,320.4 209.8,294.6 91,175.7"}),(0,l.createElement)("polygon",{points:"302.2,56.9 328,31 472.7,175.7 472.7,175.7 472.7,175.7 328,320.4 302.2,294.6 421,175.7"})),b=[{supports:{className:!1},attributes:{code:{type:"string",source:"text",selector:"code"},className:{type:"string",default:""},langType:{type:"string",default:""},langName:{type:"string",default:""},fileName:{type:"string",default:""},dataLineNum:{type:"string",default:""},isLineShow:{type:"string",default:"undefined"},isShowLang:{type:"string",default:""}},save:e=>{let{attributes:t}=e;const{code:a,fileName:n,langName:o,dataLineNum:r,isLineShow:c,isShowLang:i}=t,p=t.langType\|\|"plain";let m=d()("prism",`lang-${p}`);return"undefined"!==c&&(m=d()(m,`${c}-numbers`)),(0,l.createElement)("div",{className:"hcb_wrap"},(0,l.createElement)("pre",{className:m,"data-file":n\|\|null,"data-lang":o\|\|null,"data-line":r\|\|null,"data-show-lang":i\|\|null},(0,l.createElement)(s.RichText.Content,{tagName:"code",value:u(a)})))}},{supports:{className:!1},attributes:{code:{type:"string",source:"text",selector:"code"},className:{type:"string",default:""},langType:{type:"string",default:"plane"},langName:{type:"string",default:""},fileName:{type:"string",default:""},dataLineNum:{type:"string",default:""},isLineShow:{type:"string",default:"undefined"},isShowLang:{type:"string",default:""}},migrate:e=>("plane"===e.langType&&(e.langType=""),e),save:e=>{let{attributes:t}=e;const{code:a,langType:n,fileName:o,langName:r,dataLineNum:c,isLineShow:i,isShowLang:p}=t,d="prism "+i+"-numbers lang-"+n;return(0,l.createElement)("div",{className:"hcb_wrap"},(0,l.createElement)("pre",{className:d,"data-file":o\|\|null,"data-lang":r\|\|null,"data-line":c\|\|null,"data-show-lang":p\|\|null},(0,l.createElement)(s.RichText.Content,{tagName:"code",value:u(a)})))}}];(0,n.registerBlockType)(h.u2,{icon:f,transforms:{from:[{type:"block",blocks:["core/code"],transform:e=>(0,n.createBlock)("loos-hcb/code-block",{code:e.content})}],to:[{type:"block",blocks:["core/code"],transform:e=>(0,n.createBlock)("core/code",{content:e.code})}]},edit:e=>{let{attributes:t,setAttributes:a,clientId:n}=e;const u=(0,l.useRef)(),{code:p,fileName:h,langName:f,dataLineNum:b,isShowLang:v,isLineShow:y}=t,w=d()("hcb_wrap","hcb-block");(0,l.useEffect)((()=>{const e=t.className;if(!e)return;const n=e.split(" "),l=[...new Set(n)];a({className:d()(l)})}),[]),(0,l.useEffect)((()=>{const{ownerDocument:e}=u.current;e&&i(e.querySelector(`#block-${n} .hcb_textarea`))}),[n,p]);const N=window.hcbEditorVars?.showLang,S=window.hcbEditorVars?.showLinenum;let E="0";("1"===v\|\|""===v&&"on"===N)&&(E="1");let _=null;("on"===y\|\|"undefined"===y&&"on"===S)&&(_="1");const L=(0,s.useBlockProps)({ref:u,className:w,"data-file":h\|\|null,"data-lang":f\|\|null,"data-show-lang":E,"data-show-linenum":_});return(0,l.createElement)(l.Fragment,null,(0,l.createElement)(c,{attributes:t,setAttributes:a}),(0,l.createElement)("div",L,(0,l.createElement)("div",{className:"hcb_codewrap"},(0,l.createElement)("div",{className:"hcb_linenum"}),(0,l.createElement)("textarea",{className:"hcb_textarea",placeholder:"Your Code...",value:p,onChange:e=>{a({code:e.target.value}),i(e.target)}})),(0,l.createElement)("div",{className:"hcb_controls"},(0,l.createElement)(r.SelectControl,{value:t.langType,options:g,onChange:e=>{a(""===e?{langType:"",langName:""}:{langType:e,langName:m[e]})}}),(0,l.createElement)("input",{type:"text",className:"filename_input",value:h,placeholder:(0,o.__)("file name","loos-hcb"),onChange:e=>{a({fileName:e.target.value})}}),(0,l.createElement)("input",{type:"text",className:"num_input",value:b,placeholder:(0,o.__)('"data-line" value',"loos-hcb"),onChange:e=>{a({dataLineNum:e.target.value})}}))))},save:e=>{let{attributes:t}=e;const{code:a,fileName:n,langName:o,dataLineNum:r,isLineShow:c,isShowLang:i}=t,p=t.langType\|\|"plain",m=d()("prism",`${c}-numbers`,`lang-${p}`),g=s.useBlockProps.save({className:"hcb_wrap"});return(0,l.createElement)("div",g,(0,l.createElement)("pre",{className:m,"data-file":n\|\|null,"data-lang":o\|\|null,"data-line":r\|\|null,"data-show-lang":i\|\|null},(0,l.createElement)(s.RichText.Content,{tagName:"code",value:u(a)})))},deprecated:b})},184:function(e,t){var a;!function(){"use strict";var n={}.hasOwnProperty;function l(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var o=typeof a;if("string"===o\|\|"number"===o)e.push(a);else if(Array.isArray(a)){if(a.length){var s=l.apply(null,a);s&&e.push(s)}}else if("object"===o)if(a.toString===Object.prototype.toString)for(var r in a)n.call(a,r)&&a[r]&&e.push(r);else e.push(a.toString())}}return e.join(" ")}e.exports?(l.default=l,e.exports=l):void 0===(a=function(){return l}.apply(t,[]))\|\|(e.exports=a)}()}},t={};function a(n){var l=t[n];if(void 0!==l)return l.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,a),o.exports}a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a(643)}();
	1	(()=>{var e={184:(e,t)=>{var a;!function(){"use strict";var l={}.hasOwnProperty;function n(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var o=typeof a;if("string"===o\|\|"number"===o)e.push(a);else if(Array.isArray(a)){if(a.length){var r=n.apply(null,a);r&&e.push(r)}}else if("object"===o){if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]")){e.push(a.toString());continue}for(var c in a)l.call(a,c)&&a[c]&&e.push(c)}}}return e.join(" ")}e.exports?(n.default=n,e.exports=n):void 0===(a=function(){return n}.apply(t,[]))\|\|(e.exports=a)}()}},t={};function a(l){var n=t[l];if(void 0!==n)return n.exports;var o=t[l]={exports:{}};return e[l](o,o.exports,a),o.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";const e=window.wp.blocks,t=window.React,l=window.wp.i18n,n=window.wp.blockEditor,o=window.wp.components,r=window.wp.element;var c=a(184),s=a.n(c);const i=window.hcbVars?.showLang,u=window.hcbVars?.showLinenum;let d=window?.hcbLangs\|\|null;const p=[["plain","Plain"],...Object.entries(d)],m=[{value:"",label:"Plain"},...Object.entries(d).map((([e,t])=>({value:e,label:t})))],g=(e="")=>{const t=e.match(/\r\n\|\n/g);return null!==t?t.length+1:1};function h(e){return e?e.replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):e}const b=JSON.parse('{"u2":"loos-hcb/code-block"}'),f=(0,t.createElement)("svg",{x:"0px",y:"0px",viewBox:"0 0 512 512"},(0,t.createElement)("g",null,(0,t.createElement)("path",{d:"M54.4,348.2H89v51h31.2v-51h34.6V484h-34.6v-54.6H89v54.5H54.4V348.2z"}),(0,t.createElement)("path",{d:"M267.5,345.7c17.5,0,31.6,8.3,41,17.3l-19,21.6c-6.2-5.6-12.8-9.2-22-9.2c-17.3,0-30.5,15.2-30.5,40.4 c0,26.1,13.2,40.6,32,40.6c9,0,16.4-4.5,22.4-11.1l19,21.1c-11.5,13.4-26.7,19.9-43.4,19.9c-35.3,0-65.4-23.1-65.4-69.4 C201.6,371.7,230.9,345.7,267.5,345.7z"}),(0,t.createElement)("path",{d:"M356.5,348.2h44.4c28.2,0,50.6,7.1,50.6,33.7c0,11.8-7.1,25.4-22.9,29.5v0.8c19.2,3.6,29,13.7,29,31.8 c0,28-23.1,40-52.6,40h-48.5V348.2z M399.8,402c12.6,0,17.7-6,17.7-14.9c0-8.6-5.3-12.2-17.7-12.2h-8.5V402H399.8z M402.3,457.2 c14.7,0,21.1-5.5,21.1-16.2c0-10.5-6.4-14.9-21.1-14.9h-11.1v31h11.1V457.2z"})),(0,t.createElement)("polygon",{points:"172,311.6 195,288.6 76.2,165.7 195,42.9 172,19.8 30.1,165.7 "}),(0,t.createElement)("polygon",{points:"340,19.8 317,42.9 435.8,165.7 317,288.6 340,311.6 481.9,165.7 "})),y=[{supports:{className:!1},attributes:{code:{type:"string",source:"text",selector:"code"},className:{type:"string",default:""},langType:{type:"string",default:""},langName:{type:"string",default:""},fileName:{type:"string",default:""},dataLineNum:{type:"string",default:""},isLineShow:{type:"string",default:"undefined"},isShowLang:{type:"string",default:""}},save:({attributes:e})=>{const{code:a,fileName:l,langName:o,dataLineNum:r,isLineShow:c,isShowLang:i}=e,u=e.langType\|\|"plain";let d=s()("prism",`lang-${u}`);return"undefined"!==c&&(d=s()(d,`${c}-numbers`)),(0,t.createElement)("div",{className:"hcb_wrap"},(0,t.createElement)("pre",{className:d,"data-file":l\|\|null,"data-lang":o\|\|null,"data-line":r\|\|null,"data-show-lang":i\|\|null},(0,t.createElement)(n.RichText.Content,{tagName:"code",value:h(a)})))}},{supports:{className:!1},attributes:{code:{type:"string",source:"text",selector:"code"},className:{type:"string",default:""},langType:{type:"string",default:"plane"},langName:{type:"string",default:""},fileName:{type:"string",default:""},dataLineNum:{type:"string",default:""},isLineShow:{type:"string",default:"undefined"},isShowLang:{type:"string",default:""}},migrate:e=>("plane"===e.langType&&(e.langType=""),e),save:({attributes:e})=>{const{code:a,langType:l,fileName:o,langName:r,dataLineNum:c,isLineShow:s,isShowLang:i}=e,u="prism "+s+"-numbers lang-"+l;return(0,t.createElement)("div",{className:"hcb_wrap"},(0,t.createElement)("pre",{className:u,"data-file":o\|\|null,"data-lang":r\|\|null,"data-line":c\|\|null,"data-show-lang":i\|\|null},(0,t.createElement)(n.RichText.Content,{tagName:"code",value:h(a)})))}}];(0,e.registerBlockType)(b.u2,{icon:f,transforms:{from:[{type:"block",blocks:["core/code"],transform:t=>(0,e.createBlock)("loos-hcb/code-block",{code:t.content})}],to:[{type:"block",blocks:["core/code"],transform:t=>(0,e.createBlock)("core/code",{content:t.code})}]},edit:({attributes:e,setAttributes:a,clientId:c})=>{const h=(0,r.useRef)(),{className:b,code:f="",langType:y,fileName:v,langName:w,dataLineNum:N,dataStart:E,isShowLang:_,isLineShow:S}=e,[L,x]=(0,r.useState)(g(f)),C=s()("hcb-block","hcb_wrap");(0,r.useEffect)((()=>{const e=b\|\|"";if(!e)return;const t=e.split(" "),l=[...new Set(t)];a({className:s()(l)})}),[b,a]),(0,r.useEffect)((()=>{const{ownerDocument:e}=h.current;if(e){const t=e.querySelector(`#block-${c}`),a=t.querySelector(".hcb_textarea");if(t.style.setProperty("--hcb--code-linenum",L),a.scrollWidth>a.offsetWidth){const e=a.offsetHeight-a.clientHeight;t.style.setProperty("--hcb--scbarH",e+"px")}}}),[c,L]);let T="0";("1"===_\|\|""===_&&"on"===i)&&(T="1");let k=null;("on"===S\|\|"undefined"===S&&"on"===u)&&(k="1");const P=(0,n.useBlockProps)({ref:h,className:C,"data-file":v\|\|null,"data-lang":w\|\|null,"data-show-lang":T,"data-show-linenum":k}),B=[...p];return y\|\|B.shift(),(0,t.createElement)(t.Fragment,null,(0,t.createElement)(n.BlockControls,null,(0,t.createElement)(o.ToolbarGroup,{isCollapsed:!0,icon:(0,t.createElement)(t.Fragment,null,w\|\|(0,l.__)("Language","loos-hcb")),title:"Lnaguage",controls:B.map((([e,t])=>({key:e,isActive:e===y,title:t,onClick:()=>{a("plain"===e?{langType:"",langName:""}:{langType:e,langName:t})}})))})),(0,t.createElement)(n.InspectorControls,null,(0,t.createElement)(o.PanelBody,{title:(0,l.__)("HCB settings","loos-hcb"),initialOpen:!0},(0,t.createElement)(o.SelectControl,{label:(0,l.__)("Language","loos-hcb"),value:e.langType,options:m,onChange:e=>{a(""===e?{langType:"",langName:""}:{langType:e,langName:d[e]})}}),(0,t.createElement)(o.SelectControl,{label:(0,l.__)("Display number of rows","loos-hcb"),value:S,options:[{label:(0,l.__)("Do not set individually","loos-hcb"),value:"undefined"},{label:(0,l.__)("Display row count","loos-hcb"),value:"on"},{label:(0,l.__)("Do not display row count","loos-hcb"),value:"off"}],onChange:e=>{a({isLineShow:e})}}),(0,t.createElement)(o.SelectControl,{label:(0,l.__)("Display language name","loos-hcb"),value:_,options:[{label:(0,l.__)("Do not set individually","loos-hcb"),value:""},{label:(0,l.__)("Display language","loos-hcb"),value:"1"},{label:(0,l.__)("Do not display language","loos-hcb"),value:"0"}],onChange:e=>{a({isShowLang:e})}}),(0,t.createElement)(o.TextControl,{label:(0,l.__)("File name","loos-hcb"),value:v,onChange:e=>{a({fileName:e})}}),(0,t.createElement)(o.TextControl,{label:(0,t.createElement)(t.Fragment,null,(0,l.__)("Highlight Number","loos-hcb")+" ( ",(0,t.createElement)("code",{className:"hcb-code-in-label"},"[data-line]")," )"),value:N,onChange:e=>{a({dataLineNum:e})}}),(0,t.createElement)(o.TextControl,{type:"number",label:(0,t.createElement)(t.Fragment,null,(0,l.__)("First line number","loos-hcb")+" ( ",(0,t.createElement)("code",{className:"hcb-code-in-label"},"[data-start]")," )"),value:E\|\|1,onChange:e=>{a({dataStart:parseInt(e\|\|1)})},style:{opacity:k?1:.5},disabled:!k}))),(0,t.createElement)("div",{...P},(0,t.createElement)("div",{className:"hcb_codewrap"},k&&(0,t.createElement)("div",{className:"hcb_linenum"},(0,t.createElement)("div",{className:"hcb-startNum"},E)),(0,t.createElement)("textarea",{className:"hcb_textarea",placeholder:"Your Code...",value:f,onChange:e=>{const t=e.target.value;a({code:t});const l=g(t);L!==l&&x(l)}}),N&&(0,t.createElement)("div",{className:"hcb-datapreview"},(0,t.createElement)("div",{className:"hcb-datapreview__items"},`{${N}}`)))))},save:({attributes:e})=>{const{code:a,fileName:l,langName:o,dataLineNum:r,dataStart:c,isLineShow:i,isShowLang:u}=e,d=e.langType\|\|"plain",p=s()("prism",`${i}-numbers`,`lang-${d}`),m=n.useBlockProps.save({className:"hcb_wrap"});return(0,t.createElement)("div",{...m},(0,t.createElement)("pre",{className:p,"data-file":l\|\|null,"data-lang":o\|\|null,"data-line":r\|\|null,"data-start":1===c?null:c,"data-show-lang":u\|\|null},(0,t.createElement)(n.RichText.Content,{tagName:"code",value:h(a)})))},deprecated:y})})()})();

highlighting-code-block/tags/2.0.0/build/js/hcb_script.asset.php

r2886197	r2994656
1		<?php return array('dependencies' => array(), 'version' => '~~a41ce2112184d183ef84f00096e88ad5~~');
	1	<?php return array('dependencies' => array(), 'version' => 'ba4f9f2286907745024d');

highlighting-code-block/tags/2.0.0/build/js/hcb_script.js

r2886197	r2994656
1		document.addEventListener("DOMContentLoaded",(function(){const t=document.querySelectorAll(".token.keyword");for(let e=0;e<t.length;e++){const n=t[e];-1!==["function","def","class"].indexOf(n.textContent)?n.classList.add("def"):"this"===n.textContent&&n.classList.add("this")}const e=document.querySelectorAll(".line-highlight");for(let t=0;t<e.length;t++){const n=e[t];if(!n.parentNode.classList.contains("line-numbers")){const t=1.5*(n.getAttribute("data-start")-1);n.style.top=t+"em"}}!function(){if(!window.ClipboardJS)return;if(!window.hcbVars?.showCopyBtn)return;let t=1;const e=document.querySelectorAll(".hcb_wrap");for(let n=0;n<e.length;n++){const o=e[n],c=o.querySelector("code");if(null===c)continue;const s=document.createElement("button");s.classList.add("hcb-clipboard"),s.setAttribute("data-clipboard-target",'[data-hcb-clip="'+t+'"]'),s.setAttribute("data-clipboard-action","copy"),s.setAttribute("aria-label",window.hcbVars?.copyBtnLabel\|\|""),o.~~pre~~pend(s),c.setAttribute("data-hcb-clip",t),t++}new ClipboardJS(".hcb-clipboard").on("success",(function(t){const e=t.trigger;e.classList.add("-done"),setTimeout((()=>{e.classList.remove("-done")}),5e3)}))}()}));
	1	document.addEventListener("DOMContentLoaded",(function(){const t=document.querySelectorAll(".token.keyword");for(let e=0;e<t.length;e++){const n=t[e];-1!==["function","def","class"].indexOf(n.textContent)?n.classList.add("def"):"this"===n.textContent&&n.classList.add("this")}const e=document.querySelectorAll(".line-highlight");for(let t=0;t<e.length;t++){const n=e[t];if(!n.parentNode.classList.contains("line-numbers")){const t=1.5*(n.getAttribute("data-start")-1);n.style.top=t+"em"}}!function(){if(!window.ClipboardJS)return;if(!window.hcbVars?.showCopyBtn)return;let t=1;const e=document.querySelectorAll(".hcb_wrap");for(let n=0;n<e.length;n++){const o=e[n],c=o.querySelector("code");if(null===c)continue;const s=document.createElement("button");s.classList.add("hcb-clipboard"),s.setAttribute("data-clipboard-target",'[data-hcb-clip="'+t+'"]'),s.setAttribute("data-clipboard-action","copy"),s.setAttribute("aria-label",window.hcbVars?.copyBtnLabel\|\|""),o.append(s),c.setAttribute("data-hcb-clip",t),t++}new ClipboardJS(".hcb-clipboard").on("success",(function(t){const e=t.trigger;e.classList.add("-done"),setTimeout((()=>{e.classList.remove("-done")}),5e3)}))}()}));

highlighting-code-block/tags/2.0.0/class/loos_hcb.php

-                      r2886197
+                      r2994656
         // Font size
         $inline_css .= ':root{--hcb-font-size: ' . $HCB['fontsize_pc'] . '}';
         $inline_css .= ':root{--hcb-font-size--mobile: ' . $HCB['fontsize_sp'] . '}';
+        $inline_css .= ':root{--hcb--fz--base: ' . $HCB['fontsize_pc'] . '}';
+        $inline_css .= ':root{--hcb--fz--mobile: ' . $HCB['fontsize_sp'] . '}';
         // Font family
         if ( $HCB['font_family'] ) {
             $inline_css .= ':root{--hcb-font-family:' . $HCB['font_family'] . '}';
+            $inline_css .= ':root{--hcb--ff:' . $HCB['font_family'] . '}';
+        }
         // Code Lang
+        // Code Lang (Default)
         if ( 'off' === $HCB['show_lang'] ) {
             $inline_css .= '.hcb_wrap pre:not([data-file]):not([data-show-lang])::before{content: none;}';
+            $inline_css .= '.hcb_wrap{--hcb--data-label: none;--hcb--btn-offset: 0px;}';
+        }

highlighting-code-block/tags/2.0.0/class/loos_hcb_scripts.php

-                      r2886197
+                      r2994656
     public static function register_hcb_block() {
         // ブロックのスクリプト登録 ( memo: wp_add_inline_script() で紐付けるために wp_register_script 必要 )
+        // ブロックのスクリプト登録 ( memo: wp_add_inline_script() でグローバル変数を紐付けるために wp_register_script() で登録している )
         $asset = include LOOS_HCB_PATH . '/build/js/code-block/index.asset.php';
         wp_register_script(
 …
         // ブロックの登録
+        register_block_type_from_metadata( LOOS_HCB_PATH . '/src/js/code-block' );
+        register_block_type_from_metadata( LOOS_HCB_PATH . '/build/js/code-block' );
+        // エディタに渡すグローバル変数
+        wp_add_inline_script(
+            'hcb-code-block',
+            'var hcbLangs = ' . self::get_lang_obj_str() . ';',
+            'before'
+        );
+        wp_localize_script( 'hcb-code-block', 'hcbVars', [
+            'showLang'    => LOOS_HCB::$settings['show_lang'],
+            'showLinenum' => LOOS_HCB::$settings['show_linenum'],
+        ] );
+    }
 …
         // 翻訳jsonファイルの読み込み
         wp_set_script_translations( 'hcb-blocks', 'loos-hcb', LOOS_HCB_PATH . '/languages' );
-        // 管理画面側に渡すグローバル変数
-        wp_localize_script( 'hcb-blocks', 'hcbEditorVars', [
-            'showLang'    => LOOS_HCB::$settings['show_lang'],
-            'showLinenum' => LOOS_HCB::$settings['show_linenum'],
-        ] );
+    }
 …
      * TinyMCEでも必要なので admin_head にフックさせている。
      */
+    public static function hook_admin_head() {
+    public static function get_lang_obj_str() {
+        $langs = LOOS_HCB::$settings['support_langs'];
+        $langs = LOOS_HCB::$settings['support_langs'];
+        $langs = mb_convert_kana( $langs, 'as' ); //全角の文字やスペースがあれば半角に直す
+        // Replace full-width characters and spaces with half-width equivalents
+        $langs = str_replace(
+            ['　', '＂', '＇', '：', '；', '，' ],
+            [' ', '"', "'", ':', ';', ',' ],
+            $langs
+        );
         $langs = str_replace( ["\r\n", "\r", "\n" ], '', $langs );
         $langs = trim( $langs, ',' );
+        $code = 'var hcbLangs = {' . trim( $langs ) . '};';
+        return '{' . trim( $langs ) . '}';
+    }
         // for tinyMCE
         echo '<script id="hcb-langs">' . wp_kses( $code, [] ) . '</script>' . PHP_EOL;
         // for Gutenberg
         wp_add_inline_script( 'hcb-code-block', $code, 'before' );
+    /**
+     * Add code to Admin Head. (for TinyMCE)
+     */
+    public static function hook_admin_head() {
+        echo '<script id="hcb-langs">var hcbLangs = ' . wp_kses( self::get_lang_obj_str(), [] ) . ';</script>' . PHP_EOL;
+    }
+}

highlighting-code-block/tags/2.0.0/highlighting-code-block.php

r2886197	r2994656
4	4	* Plugin URI: https://wordpress.org/plugins/highlighting-code-block/
5	5	* Description: Add code block with syntax highlighting using prism.js. (Available for Gutenberg and Classic Editor)
6		* Version: ~~1.7~~.0
	6	* Version: 2.0.0
7	7	* Requires at least: 5.6
8	8	* Author: LOOS, Inc.

highlighting-code-block/tags/2.0.0/languages/loos-hcb-ja-hcb-blocks.json

r2359718	r2994656
1		{"domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural_forms":"nplurals=1; plural=0;","lang":"ja_JP"},"HCB settings":["HCB設定"],"Settings for displaying the number of lines":["行数の表示に関する設定"],"Do not set individually":["個別で設定はしない"],"Display row count":["行数を表示する"],"Do not display row count":["行数を表示しない"],"Settings for displaying language name":["言語名の表示に関する設定"],"Display language":["言語を表示する"],"Do not display language":["言語を表示しない"],"\"data-line\" value":["data-line属性値"],"file name":["ファイル名"],"[HCB] Settings":["[HCB] 設定"],"Highlighting Code Block settings":["Highlighting Code Block 設定"],"Basic settings":["基本設定"],"Display language name":["言語の表示"],"Display language name in code block":["コードブロックに言語名を表示する"],"If checked, the language type is displayed in the code on the site display side.":["チェックすると、サイト表示側のコードに言語の種類が表示されます。"],"Display settings for the number of rows":["行数の表示設定"],"Show line count in code block":["コードブロックに行数を表示する"],"If checked, the number of lines will be displayed on the left end of the code on the site display side.":["チェックすると、サイト表示側のコードの左端に行数が表示されます。"],"Font smoothing":["フォントスムージング"],"Turn on font smoothing":["フォントスムージングをオンにする"],"Add %s and %s to the code block.":["コードブロックに %s と %s が追加されます。"],"Cord coloring (front side)":["コードカラーリング（フロント側）"],"Code coloring (editor side)":["コードカラーリング（エディター側）"],"Font Size":["フォントサイズ"],"\"Font-family\" in code":["コードの “font-family”"],"Default":["デフォルト"],"Advanced settings":["高度な設定"],"Language set to use":["使用する言語セット"],"Write in the format of %s, separated by \",\" (comma).":["%s の形式で、”,”（カンマ）区切りで記述してください。"],"class-key:\"language-name\"":["クラスキー:”言語名”"],"\"class-key\" is the class name used in prism.js (the part corresponding to \"◯◯\" in \"lang- ◯◯\")":["「クラスキー」は、prism.jsで使用されるクラス名（「lang-◯◯」の「◯◯」に該当する部分)です。"],"* If you use a language that is not supported by default, please use it together with \"Original prism.js\" setting.":["※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」設定と併用してください。"],"Original coloring file":["独自カラーリングファイル"],"Load your own CSS file for code coloring.":["あなたが用意したコードカラーリング用のCSSファイルを読み込みます。"],"Original prism.js":["独自prism.js"],"You can use the prism.js file corresponding to your own language set.":["自分専用の言語セットに対応したprism.jsファイルを使用できます。"],"help":["ヘルプ"],"When you use each original file, please upload it in the theme folder.":["各独自ファイルを使用する場合は、テーマフォルダの中にアップロードしてください。"],"If you set the path to your own file, the default coloring file and prism.js file will not be loaded..":["独自ファイルへのパスを設定すると、デフォルトのカラーリングファイルやprism.jsファイルは読み込まれなくなります。"],"* The currently loaded prism.js file can be downloaded at %s.":["※ 現在読み込んでいるprism.jsファイルは、 %s でダウンロードできます。"],"Here":["こちら"],"Highlighting Code Block":["Highlighting Code Block"],"https://wordpress.org/plugins/highlighting-code-block/":["https://wordpress.org/plugins/highlighting-code-block/"],"Add code block with syntax highlighting using prism.js. (Available for Gutenberg and Classic Editor)":["prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。（Gutenbergとクラシックエディター共に利用可能）"],"LOOS WEB STUDIO":["LOOS WEB STUDIO"],"https://loos-web-studio.com/":["https://loos-web-studio.com/"]}}}
	1	{"domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural_forms":"nplurals=1; plural=0;","lang":"ja_JP"},"HCB settings":["HCB設定"],"Language":["言語"],"Display number of rows":["行数の表示"],"Do not set individually":["個別で設定はしない"],"Display row count":["行数を表示する"],"Do not display row count":["行数を表示しない"],"Display language name":["言語の表示"],"Display language":["言語を表示する"],"Do not display language":["言語を表示しない"],"File name":["ファイル名"],"Highlight Number":["ハイライトする行番号"],"First line number":["開始行番号"],"[HCB] Settings":["[HCB] 設定"],"Basic settings":["基本設定"],"Display language name in code block":["コードブロックに言語名を表示する"],"If checked, the language type is displayed in the code on the site display side.":["チェックすると、サイト表示側のコードに言語の種類が表示されます。"],"Display settings for the number of rows":["行数の表示設定"],"Show line count in code block":["コードブロックに行数を表示する"],"If checked, the number of lines will be displayed on the left end of the code on the site display side.":["チェックすると、サイト表示側のコードの左端に行数が表示されます。"],"Copy button":["コピーボタン"],"Show copy button in code block":["コードブロックにコピーボタンを表示する"],"Font smoothing":["フォントスムージング"],"Turn on font smoothing":["フォントスムージングをオンにする"],"Add %s and %s to the code block.":["コードブロックに %s と %s が追加されます。"],"Cord coloring (front side)":["コードカラーリング（フロント側）"],"Code coloring (editor side)":["コードカラーリング（エディター側）"],"Font Size":["フォントサイズ"],"\"Font-family\" in code":["コードの “font-family”"],"Advanced settings":["高度な設定"],"When you use each original file, please upload it in the theme folder.":["各独自ファイルを使用する場合は、テーマフォルダの中にアップロードしてください。"],"If you set the path to your own file, the default coloring file and prism.js file will not be loaded..":["独自ファイルへのパスを設定すると、デフォルトのカラーリングファイルやprism.jsファイルは読み込まれなくなります。"],"* The currently loaded prism.js file can be downloaded at %s.":["※ 現在読み込んでいるprism.jsファイルは、 %s でダウンロードできます。"],"Here":["こちら"],"Language set to use":["使用する言語セット"],"Write in the format of %s, separated by \",\" (comma).":["%s の形式で、”,”（カンマ）区切りで記述してください。"],"class-key:\"language-name\"":["クラスキー:”言語名”"],"\"class-key\" is the class name used in prism.js (the part corresponding to \"◯◯\" in \"lang- ◯◯\")":["「クラスキー」は、prism.jsで使用されるクラス名（「lang-◯◯」の「◯◯」に該当する部分)です。"],"* If you use a language that is not supported by default, please use it together with \"Original prism.js\" setting.":["※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」設定と併用してください。"],"Original coloring file":["独自カラーリングファイル"],"Load your own CSS file for code coloring.":["あなたが用意したコードカラーリング用のCSSファイルを読み込みます。"],"Original prism.js":["独自prism.js"],"You can use the prism.js file corresponding to your own language set.":["自分専用の言語セットに対応したprism.jsファイルを使用できます。"],"help":["ヘルプ"],"Highlighting Code Block settings":["Highlighting Code Block 設定"],"Copy code to clipboard":["コードをクリップボードにコピーする"],"Highlighting Code Block":["Highlighting Code Block"],"https://wordpress.org/plugins/highlighting-code-block/":["https://wordpress.org/plugins/highlighting-code-block/"],"Add code block with syntax highlighting using prism.js. (Available for Gutenberg and Classic Editor)":["prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。（Gutenbergとクラシックエディター共に利用可能）"],"LOOS, Inc.":["LOOS, Inc."],"https://loos-web-studio.com/":["https://loos-web-studio.com/"]}}}

highlighting-code-block/tags/2.0.0/languages/loos-hcb-ja.po

-                      r2886197
+                      r2994656
 msgstr ""
 "Project-Id-Version: Highlighting Code Block\n"
 "POT-Creation-Date: 2023-03-24 15:35+0900\n"
 "PO-Revision-Date: 2023-03-24 15:35+0900\n"
+"POT-Creation-Date: 2023-11-10 00:11+0900\n"
+"PO-Revision-Date: 2023-11-10 00:12+0900\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 …
 "X-Poedit-SearchPathExcluded-4: vendor\n"
 #: src/js/code-block/_sidebar.js:14
+#: src/js/code-block/edit.js:172
 msgid "HCB settings"
 msgstr "HCB設定"
+#: src/js/code-block/_sidebar.js:16
+msgid "Settings for displaying the number of lines"
+msgstr "行数の表示に関する設定"
+#: src/js/code-block/_sidebar.js:20 src/js/code-block/_sidebar.js:42
+#: src/js/code-block/edit.js:174
+msgid "Language"
+msgstr "言語"
+#: src/js/code-block/edit.js:186
+msgid "Display number of rows"
+msgstr "行数の表示"
+#: src/js/code-block/edit.js:190 src/js/code-block/edit.js:211
 msgid "Do not set individually"
 msgstr "個別で設定はしない"
 #: src/js/code-block/_sidebar.js:24
+#: src/js/code-block/edit.js:194
 msgid "Display row count"
 msgstr "行数を表示する"
 #: src/js/code-block/_sidebar.js:28
+#: src/js/code-block/edit.js:198
 msgid "Do not display row count"
 msgstr "行数を表示しない"
 #: src/js/code-block/_sidebar.js:38
 msgid "Settings for displaying language name"
 msgstr "言語名の表示に関する設定"
 #: src/js/code-block/_sidebar.js:46
+#: src/js/code-block/edit.js:207 class/loos_hcb_menu.php:35
+msgid "Display language name"
+msgstr "言語の表示"
+#: src/js/code-block/edit.js:215
 msgid "Display language"
 msgstr "言語を表示する"
 #: src/js/code-block/_sidebar.js:50
+#: src/js/code-block/edit.js:219
 msgid "Do not display language"
 msgstr "言語を表示しない"
 #: src/js/code-block/edit.js:165
 msgid "file name"
+#: src/js/code-block/edit.js:228
+msgid "File name"
 msgstr "ファイル名"
+#: src/js/code-block/edit.js:174
+msgid "\"data-line\" value"
+msgstr "data-line属性値"
+#: src/js/code-block/edit.js:238
+msgid "Highlight Number"
+msgstr "ハイライトする行番号"
+#: src/js/code-block/edit.js:254
+msgid "First line number"
+msgstr "開始行番号"
 #: class/loos_hcb_menu.php:8
 …
 msgid "Basic settings"
 msgstr "基本設定"
-#: class/loos_hcb_menu.php:35
-msgid "Display language name"
-msgstr "言語の表示"
 #: class/loos_hcb_menu.php:38
 …
 msgstr "Highlighting Code Block 設定"
 #: class/loos_hcb_scripts.php:62
+#: class/loos_hcb_scripts.php:82
 msgid "Copy code to clipboard"
 msgstr "コードをクリップボードにコピーする"
 …
 #. Author of the plugin/theme
 msgid "LOOS, Inc."
 msgstr ""
+msgstr "LOOS, Inc."
 #. Author URI of the plugin/theme
 …
 msgstr "https://loos-web-studio.com/"
+#~ msgid "\"data-line\" value"
+#~ msgstr "data-line属性値"
+#, fuzzy
+#~| msgid "\"data-line\" value"
+#~ msgid "\"data-start\" value"
+#~ msgstr "data-line属性値"
+#~ msgid "Settings for displaying the number of lines"
+#~ msgstr "行数の表示に関する設定"
+#~ msgid "Settings for displaying language name"
+#~ msgstr "言語名の表示に関する設定"
 #~ msgid "Default"
 #~ msgstr "デフォルト"

highlighting-code-block/tags/2.0.0/readme.txt

-                      r2886197
+                      r2994656
 Tags: block, editor, guternberg, code, syntax, highlight, code highlighting, syntax highlight
 Requires at least: 5.6
 Tested up to: 6.2
 Stable tag: 1.7.0
+Tested up to: 6.4
+Stable tag: 2.0.0
 Requires PHP: 5.6
 License: GPLv2 or later
 …
 (However, we recommend using it in the "Block Editor".)
+Please see [this page](https://wemo.tech/2122/) for a detailed description of this plugin.(Japanese article)
+= How to use （For Block Editor） =
+Please see the following page for a detailed explanation of this plugin.
+URL: [https://loos.co.jp/en/documents/highlighting-code-block/](https://loos.co.jp/en/documents/highlighting-code-block/)
+### Source code
+The source code of this plugin is available on Github.
+URL: [https://github.com/ddryo/Highlighting-Code-Block](https://github.com/ddryo/Highlighting-Code-Block)
+### How to use
+#### How to use （For Block Editor）
 - Open the "Formatting" category of the Block Inserter.
 - There is a custom block named "Highlighing Code Block".
 …
 - Select the language of the code and enter any code.
+= How to use （For Classic Editor） =
+#### How to use （For Classic Editor）
 - You should see a select box labeled "Code Block" on the toolbar (2nd row by default).
 - When you select a language from the select box, a code block (pre tag) is inserted.
+= If it doesn't work =
+#### If it doesn't work
 This plugin works only with PHP version 5.6 or later, WordPress 5.6 or later.
 …
+= About settings =
+#### About settings
 The menu "[HCB] Settings" should be added to "Settings" in the left menu of the management screen.
 …
 == Changelog ==
+= 2.0.0 =
+- Support for WordPress 6.4.
+- Support for PHP 8.2.
+- The CSS and Block UI have been significantly adjusted.
+- CSS custom properties have also been renamed and cleaned up overall.
+- Added `data-start` attribute settings to blocks.
 = 1.7.0 =
 - Support for WordPress 6.2.

highlighting-code-block/tags/2.0.0/sass-builder.js

-                      r2886197
+                      r2994656
 // console.log('start sass-builder.js ...');
+const path = require( 'path' );
+const fs = require( 'fs' );
+const path = require('path');
+const fs = require('fs');
+const glob = require('glob');
 // node-sass
 const sass = require( 'node-sass' );
 const nodeSassGlobbing = require( 'node-sass-globbing' );
+const sass = require('node-sass');
+const globImporter = require('node-sass-glob-importer');
 // postcss
 const postcss = require( 'postcss' );
 const autoprefixer = require( 'autoprefixer' );
 const cssnano = require( 'cssnano' );
 const mqpacker = require( 'css-mqpacker' );
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const mqpacker = require('css-mqpacker');
 // consoleの色付け
 …
 const green = '\u001b[32m';
 const writeCSS = ( filePath, css ) => {
     const dir = path.dirname( filePath );
+const writeCSS = (filePath, css) => {
+    const dir = path.dirname(filePath);
     // ディレクトリがなければ作成
     if ( ! fs.existsSync( dir ) ) {
         fs.mkdirSync( dir, { recursive: true } );
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
     // css書き出し
     fs.writeFileSync( filePath, css );
+    fs.writeFileSync(filePath, css);
 };
+// パス
 // パス
 const src = 'src/scss';
 const dist = 'build/css';
+const files = [
+    'hcb',
+    'hcb--light',
+    'hcb--dark',
+    'hcb-editor--light',
+    'hcb-editor--dark',
+    'hcb-admin',
+];
+// const files = [
+//  'hcb',
+//  'hcb--light',
+//  'hcb--dark',
+//  'hcb-editor--light',
+//  'hcb-editor--dark',
+//  'hcb-admin',
+// ];
+const ignore = ['**/_*.scss'];
+const files = glob.sync(src + '/**/*.scss', { ignore });
+// console.log('files', files);
+files.forEach( ( fileName ) => {
+files.forEach((filePath) => {
+    const fileName = filePath.replace(src + '/', '');
+    const srcPath = path.resolve(__dirname, src, fileName);
+    const distPath = path.resolve(__dirname, dist, fileName).replace('.scss', '.css');
+    // console.log(filePath, srcPath, distPath);
     // renderSyncだとimporter使えない
     sass.render(
+        {
             file: path.resolve( __dirname, src, `${ fileName }.scss` ),
+            file: srcPath,
             outputStyle: 'compressed',
             importer: nodeSassGlobbing,
+            importer: globImporter(),
         },
         function ( err, sassResult ) {
             if ( err ) {
                 console.error( red + err );
+        function (err, sassResult) {
+            if (err) {
+                console.error(red + err);
             } else {
                 const css = sassResult.css.toString();
-                const filePath = path.resolve( __dirname, dist, `${ fileName }.css` );
                 // postcss実行
                 postcss( [ autoprefixer, mqpacker, cssnano ] )
                     .process( css, { from: undefined } )
                     .then( ( postcssResult ) => {
                         console.log( green + 'Wrote CSS to ' + filePath );
                         writeCSS( filePath, postcssResult.css );
+                postcss([autoprefixer, mqpacker, cssnano])
+                    .process(css, { from: undefined })
+                    .then((postcssResult) => {
+                        console.log(green + 'Wrote CSS to ' + distPath);
+                        writeCSS(distPath, postcssResult.css);
                         // if (postcssResult.map) {fs.writeFile('dest/app.css.map', postcssResult.map.toString(), () => true);}
                     } );
+                    });
+            }
+        }
     );
 } );
+});

highlighting-code-block/tags/2.0.0/src/js/code-block/_utils.js

-                      r2359718
+                      r2994656
  * Function for setting code block height
  */
 export function setHeightCodeBlocks(elem) {
+export function setHeightCodeBlocks(block, elem) {
     const num = elem.value.match(/\r\n|\n/g);
     let line;
+    // let line;
     if (null !== num) {
+        line = num.length + 1;
+        // line = num.length + 1;
+        elem.style.setProperty('--hcb--code-linenum', num.length + 1);
+    }
+    //  else {
+    //  line = 1;
+    // }
+    // let height = line * 1.5; // 1.5 = line-height
+    // height += 2 * 2; // py
+    // offsetXXX: padding + border + scrollbar
+    // scrollXXX: padding. スクロール可能なとき、見えていない部分のサイズも含む。
+    // clientXXX: padding. スクロール可能なとき、見えている部分のサイズ。
+    const isScrollableX = elem.scrollWidth > elem.offsetWidth;
+    if (isScrollableX) {
+        const scbarH = elem.offsetHeight - elem.clientHeight;
+        elem.style.setProperty('--hcb--scbarH', scbarH + 'px');
+        // elem.style.height = `calc(${height}em + ${scbarH}px)`;
     } else {
         line = 1;
+        // elem.style.height = height + 'em';
+    }
-    elem.style.height = line * 1.8 + 1.6 + 2 + 'em';
+}

highlighting-code-block/tags/2.0.0/src/js/code-block/block.json

-                      r2669723
+                      r2994656
             "default": ""
         },
+        "dataStart": {
+            "type": "number",
+            "default": 1
+        },
         "isLineShow": {
             "type": "string",

highlighting-code-block/tags/2.0.0/src/js/code-block/edit.js

-                      r2886197
+                      r2994656
  */
 import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+import { SelectControl } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+import { useBlockProps, InspectorControls, BlockControls } from '@wordpress/block-editor';
+import {
+    SelectControl,
+    TextControl,
+    // RadioControl,
+    PanelBody,
+    ToolbarGroup,
+} from '@wordpress/components';
+import { useState, useEffect, useRef } from '@wordpress/element';
 /**
  * @Inner dependencies
  */
+import HcbSidebar from './_sidebar';
+import { setHeightCodeBlocks } from './_utils';
+// import { setHeightCodeBlocks } from './_utils';
 /**
 …
 /**
  * 言語情報をグローバル変数から受け取る。
+ * 設定情報をグローバル変数から受け取る。
  */
+let hcbLangs = window.hcbLangs;
+if ( 'object' !== typeof hcbLangs ) {
+    hcbLangs = {
+const hcbShowLang = window.hcbVars?.showLang;
+const hcbShowLinenum = window.hcbVars?.showLinenum;
+let HCB_LANGS = window?.hcbLangs || null;
+if (null) {
+    HCB_LANGS = {
         html: 'HTML',
         css: 'CSS',
 …
+}
+const langList = [
+// HCB_LANGS を配列化する
+// const HCB_LANG_ARRAY = Object.entries(HCB_LANGS);
+const HCB_LANG_ARRAY = [['plain', 'Plain'], ...Object.entries(HCB_LANGS)];
+const LANG_SELECT_OPTIONS = [
+    {
         value: '',
         label: '- Lang Select -',
+        label: 'Plain',
     },
+    ...Object.entries(HCB_LANGS).map(([key, value]) => ({
+        value: key,
+        label: value,
+    })),
 ];
+Object.keys( hcbLangs ).forEach( ( key ) => {
+    langList.push( {
+        value: key,
+        label: hcbLangs[ key ],
+    } );
+} );
+const getLineNum = (code = '') => {
+    const lineNums = code.match(/\r\n|\n/g);
+    if (null !== lineNums) {
+        return lineNums.length + 1;
+    }
+    return 1;
+};
 // edit
 export default ( { attributes, setAttributes, clientId } ) => {
+export default ({ attributes, setAttributes, clientId }) => {
     const ref = useRef();
     const {
+        code,
+        // langType,
+        className,
+        code = '',
+        langType,
         fileName,
         langName,
         dataLineNum,
+        dataStart,
         isShowLang,
         isLineShow,
     } = attributes;
+    const blockClass = classnames( 'hcb_wrap', 'hcb-block' );
+    // コード行数
+    const [codeLineNum, setCodeLineNums] = useState(getLineNum(code));
+    const blockClass = classnames('hcb-block', 'hcb_wrap');
     // クラスの重複バグの修正
     useEffect( () => {
         const nowClass = attributes.className;
         if ( ! nowClass ) return;
         const nowClasses = nowClass.split( ' ' );
         const newClasses = [ ...new Set( nowClasses ) ]; // 重複削除
         setAttributes( { className: classnames( newClasses ) } );
     }, [] );
+    useEffect(() => {
+        const nowClass = className || '';
+        if (!nowClass) return;
+        const nowClasses = nowClass.split(' ');
+        const newClasses = [...new Set(nowClasses)]; // 重複削除
+        setAttributes({ className: classnames(newClasses) });
+    }, [className, setAttributes]);
     // コードの textarea 高さセット
     useEffect( () => {
+    useEffect(() => {
         const { ownerDocument } = ref.current;
+        if ( ownerDocument ) {
+            const hcbTextarea = ownerDocument.querySelector( `#block-${ clientId } .hcb_textarea` );
+            setHeightCodeBlocks( hcbTextarea );
+        if (ownerDocument) {
+            const hcbBlock = ownerDocument.querySelector(`#block-${clientId}`);
+            const hcbTextarea = hcbBlock.querySelector(`.hcb_textarea`);
+            hcbBlock.style.setProperty('--hcb--code-linenum', codeLineNum);
+            // offsetXXX: padding + border + scrollbar
+            // scrollXXX: padding. スクロール可能なとき、見えていない部分のサイズも含む。
+            // clientXXX: padding. スクロール可能なとき、見えている部分のサイズ。
+            const isScrollableX = hcbTextarea.scrollWidth > hcbTextarea.offsetWidth;
+            if (isScrollableX) {
+                const scbarH = hcbTextarea.offsetHeight - hcbTextarea.clientHeight;
+                hcbBlock.style.setProperty('--hcb--scbarH', scbarH + 'px');
+            }
+        }
     }, [ clientId, code ] );
+    }, [clientId, codeLineNum]);
     // preタグにつけるクラス名を生成して保存
 …
     // setAttributes({ preClass: preClass });
-    const hcbShowLang = window.hcbEditorVars?.showLang;
-    const hcbShowLinenum = window.hcbEditorVars?.showLinenum;
     let dataShowLang = '0';
     if ( '1' === isShowLang ) {
+    if ('1' === isShowLang) {
         dataShowLang = '1';
     } else if ( '' === isShowLang && 'on' === hcbShowLang ) {
+    } else if ('' === isShowLang && 'on' === hcbShowLang) {
         dataShowLang = '1';
+    }
     let dataShowLinenum = null;
     if ( 'on' === isLineShow ) {
+    if ('on' === isLineShow) {
         dataShowLinenum = '1';
     } else if ( 'undefined' === isLineShow && 'on' === hcbShowLinenum ) {
+    } else if ('undefined' === isLineShow && 'on' === hcbShowLinenum) {
         dataShowLinenum = '1';
+    }
     const blockProps = useBlockProps( {
+    const blockProps = useBlockProps({
         ref,
         className: blockClass,
 …
         'data-show-lang': dataShowLang,
         'data-show-linenum': dataShowLinenum,
+        // 'data-line': dataLineNum || null,
+    } );
+        // 'data-line': dataLineNum || null, // edit側にはつけない
+    });
+    // 新規配列を作成
+    const langArray = [...HCB_LANG_ARRAY];
+    // lang未設定の時に 'Plain' は表示しない
+    if (!langType) {
+        langArray.shift();
+    }
     return (
         <>
+            <HcbSidebar { ...{ attributes, setAttributes } } />
+            <div { ...blockProps }>
+            <BlockControls>
+                <ToolbarGroup
+                    isCollapsed={true}
+                    icon={<>{langName || __('Language', 'loos-hcb')}</>}
+                    title='Lnaguage'
+                    controls={langArray.map(([_langKey, _langName]) => {
+                        return {
+                            key: _langKey,
+                            isActive: _langKey === langType,
+                            title: _langName,
+                            // icon: null,
+                            onClick: () => {
+                                if (_langKey === 'plain') {
+                                    setAttributes({ langType: '', langName: '' });
+                                } else {
+                                    setAttributes({ langType: _langKey, langName: _langName });
+                                }
+                            },
+                        };
+                    })}
+                />
+            </BlockControls>
+            <InspectorControls>
+                <PanelBody title={__('HCB settings', 'loos-hcb')} initialOpen={true}>
+                    <SelectControl
+                        label={__('Language', 'loos-hcb')}
+                        value={attributes.langType}
+                        options={LANG_SELECT_OPTIONS}
+                        onChange={(langKey) => {
+                            if ('' === langKey) {
+                                setAttributes({ langType: '', langName: '' });
+                            } else {
+                                setAttributes({ langType: langKey, langName: HCB_LANGS[langKey] });
+                            }
+                        }}
+                    />
+                    <SelectControl
+                        label={__('Display number of rows', 'loos-hcb')} // 行数の表示
+                        value={isLineShow}
+                        options={[
+                            {
+                                label: __('Do not set individually', 'loos-hcb'), //個別で設定はしない
+                                value: 'undefined',
+                            },
+                            {
+                                label: __('Display row count', 'loos-hcb'), //行数を表示する
+                                value: 'on',
+                            },
+                            {
+                                label: __('Do not display row count', 'loos-hcb'), //行数を表示しない
+                                value: 'off',
+                            },
+                        ]}
+                        onChange={(val) => {
+                            setAttributes({ isLineShow: val });
+                        }}
+                    />
+                    <SelectControl
+                        label={__('Display language name', 'loos-hcb')} // 言語名の表示に関する設定
+                        value={isShowLang}
+                        options={[
+                            {
+                                label: __('Do not set individually', 'loos-hcb'), //個別で設定はしない
+                                value: '',
+                            },
+                            {
+                                label: __('Display language', 'loos-hcb'), //言語を表示する
+                                value: '1',
+                            },
+                            {
+                                label: __('Do not display language', 'loos-hcb'), //言語を表示しない
+                                value: '0',
+                            },
+                        ]}
+                        onChange={(val) => {
+                            setAttributes({ isShowLang: val });
+                        }}
+                    />
+                    <TextControl
+                        label={__('File name', 'loos-hcb')} // ファイル名
+                        value={fileName}
+                        onChange={(val) => {
+                            setAttributes({ fileName: val });
+                        }}
+                    />
+                    <TextControl
+                        // ハイライトする行番号
+                        label={
+                            <>
+                                {__('Highlight Number', 'loos-hcb') + ' ( '}
+                                <code className='hcb-code-in-label'>[data-line]</code>
+                                {' )'}
+                            </>
+                        }
+                        value={dataLineNum}
+                        onChange={(val) => {
+                            setAttributes({ dataLineNum: val });
+                        }}
+                    />
+                    <TextControl
+                        type='number'
+                        // 開始行番号
+                        label={
+                            <>
+                                {__('First line number', 'loos-hcb') + ' ( '}
+                                <code className='hcb-code-in-label'>[data-start]</code>
+                                {' )'}
+                            </>
+                        }
+                        value={dataStart || 1}
+                        onChange={(val) => {
+                            setAttributes({ dataStart: parseInt(val || 1) });
+                        }}
+                        style={{ opacity: dataShowLinenum ? 1 : 0.5 }}
+                        disabled={dataShowLinenum ? false : true}
+                    />
+                </PanelBody>
+            </InspectorControls>
+            <div {...blockProps}>
                 <div className='hcb_codewrap'>
+                    <div className='hcb_linenum'></div>
+                    {dataShowLinenum && (
+                        <div className='hcb_linenum'>
+                            <div className='hcb-startNum'>{dataStart}</div>
+                        </div>
+                    )}
+                    {/* <TextareaControl */}
                     <textarea
                         className='hcb_textarea'
                         placeholder='Your Code...'
+                        value={ code }
+                        onChange={ ( e ) => {
+                            setAttributes( { code: e.target.value } );
+                            setHeightCodeBlocks( e.target );
+                        } }
+                        value={code}
+                        onChange={(e) => {
+                            const val = e.target.value;
+                            setAttributes({ code: val });
+                            // setHeightCodeBlocks(e.target);
+                            const newCodeLineNum = getLineNum(val);
+                            if (codeLineNum !== newCodeLineNum) {
+                                setCodeLineNums(newCodeLineNum);
+                            }
+                        }}
                     ></textarea>
+                </div>
+                <div className='hcb_controls'>
+                    <SelectControl
+                        value={ attributes.langType }
+                        options={ langList }
+                        onChange={ ( langKey ) => {
+                            if ( '' === langKey ) {
+                                setAttributes( {
+                                    langType: '',
+                                    langName: '',
+                                } );
+                            } else {
+                                setAttributes( {
+                                    langType: langKey,
+                                    langName: hcbLangs[ langKey ],
+                                } );
+                            }
+                        } }
+                    />
+                    <input
+                        type='text'
+                        className='filename_input'
+                        value={ fileName }
+                        placeholder={ __( 'file name', 'loos-hcb' ) } //ファイル名
+                        onChange={ ( e ) => {
+                            setAttributes( { fileName: e.target.value } );
+                        } }
+                    />
+                    <input
+                        type='text'
+                        className='num_input'
+                        value={ dataLineNum }
+                        placeholder={ __( '"data-line" value', 'loos-hcb' ) } //data-line属性値
+                        onChange={ ( e ) => {
+                            setAttributes( { dataLineNum: e.target.value } );
+                        } }
+                    />
+                    {dataLineNum && (
+                        <div className='hcb-datapreview'>
+                            <div className='hcb-datapreview__items'>{`{${dataLineNum}}`}</div>
+                        </div>
+                    )}
                 </div>
             </div>

highlighting-code-block/tags/2.0.0/src/js/code-block/index.js

-                      r2669723
+                      r2994656
 import save from './save';
 import metadata from './block.json';
 import hcbIcon from './_icon';
+import hcbIcon from './icon';
 import deprecated from './_deprecated';
 …
  * Register Highlighting Code Block
  */
 registerBlockType( metadata.name, {
+registerBlockType(metadata.name, {
     icon: hcbIcon,
     // attributes: metadata.attributes,
 …
+            {
                 type: 'block',
                 blocks: [ 'core/code' ], //整形済みブロック : 'core/preformatted',
                 transform: ( attributes ) => {
                     return createBlock( 'loos-hcb/code-block', {
+                blocks: ['core/code'], //整形済みブロック : 'core/preformatted',
+                transform: (attributes) => {
+                    return createBlock('loos-hcb/code-block', {
                         code: attributes.content,
                     } );
+                    });
                 },
             },
 …
+            {
                 type: 'block',
                 blocks: [ 'core/code' ],
                 transform: ( attributes ) => {
                     return createBlock( 'core/code', {
+                blocks: ['core/code'],
+                transform: (attributes) => {
+                    return createBlock('core/code', {
                         content: attributes.code,
                     } );
+                    });
                 },
             },
 …
     save,
     deprecated,
 } );
+});

highlighting-code-block/tags/2.0.0/src/js/code-block/save.js

-                      r2669723
+                      r2994656
 // save
 export default ( { attributes } ) => {
     const { code, fileName, langName, dataLineNum, isLineShow, isShowLang } = attributes;
+export default ({ attributes }) => {
+    const { code, fileName, langName, dataLineNum, dataStart, isLineShow, isShowLang } = attributes;
     const langType = attributes.langType || 'plain';
     const preClass = classnames( 'prism', `${ isLineShow }-numbers`, `lang-${ langType }` );
+    const preClass = classnames('prism', `${isLineShow}-numbers`, `lang-${langType}`);
     const blockProps = useBlockProps.save( {
+    const blockProps = useBlockProps.save({
         className: 'hcb_wrap',
     } );
+    });
     return (
         <div { ...blockProps }>
+        <div {...blockProps}>
             <pre
+                className={ preClass }
+                data-file={ fileName || null }
+                data-lang={ langName || null }
+                data-line={ dataLineNum || null }
+                data-show-lang={ isShowLang || null }
+                className={preClass}
+                data-file={fileName || null}
+                data-lang={langName || null}
+                data-line={dataLineNum || null}
+                data-start={1 === dataStart ? null : dataStart}
+                data-show-lang={isShowLang || null}
+            >
                 <RichText.Content tagName='code' value={ sanitizeCodeblock( code ) } />
+                <RichText.Content tagName='code' value={sanitizeCodeblock(code)} />
             </pre>
         </div>

highlighting-code-block/tags/2.0.0/src/js/hcb_script.js

-                      r2886197
+                      r2994656
 document.addEventListener( 'DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', function () {
     // if (!window.Prism) return;
 …
     // Token customize
     const keyToken = document.querySelectorAll( '.token.keyword' );
     for ( let i = 0; i < keyToken.length; i++ ) {
         const elem = keyToken[ i ];
+    const keyToken = document.querySelectorAll('.token.keyword');
+    for (let i = 0; i < keyToken.length; i++) {
+        const elem = keyToken[i];
         const defArr = [ 'function', 'def', 'class' ];
         if ( -1 !== defArr.indexOf( elem.textContent ) ) {
             elem.classList.add( 'def' );
         } else if ( 'this' === elem.textContent ) {
             elem.classList.add( 'this' );
+        const defArr = ['function', 'def', 'class'];
+        if (-1 !== defArr.indexOf(elem.textContent)) {
+            elem.classList.add('def');
+        } else if ('this' === elem.textContent) {
+            elem.classList.add('this');
+        }
+    }
     // Line highlighter position.
     const lineHighlighter = document.querySelectorAll( '.line-highlight' );
     for ( let i = 0; i < lineHighlighter.length; i++ ) {
         const elem = lineHighlighter[ i ];
         if ( ! elem.parentNode.classList.contains( 'line-numbers' ) ) {
             const dataStart = elem.getAttribute( 'data-start' );
+    const lineHighlighter = document.querySelectorAll('.line-highlight');
+    for (let i = 0; i < lineHighlighter.length; i++) {
+        const elem = lineHighlighter[i];
+        if (!elem.parentNode.classList.contains('line-numbers')) {
+            const dataStart = elem.getAttribute('data-start');
             const topPosEm = ( dataStart - 1 ) * 1.5; //line-heightの値
+            const topPosEm = (dataStart - 1) * 1.5; //line-heightの値
             // Line highlighterの位置がずれるので桁数に応じて微調節 -> ずれなくなった？
 …
     // clipboard
     ( function () {
         if ( ! window.ClipboardJS ) return;
         if ( ! window.hcbVars?.showCopyBtn ) return;
+    (function () {
+        if (!window.ClipboardJS) return;
+        if (!window.hcbVars?.showCopyBtn) return;
         let clipCt = 1;
         // hcb_wrap
         const hcbWraps = document.querySelectorAll( '.hcb_wrap' );
+        const hcbWraps = document.querySelectorAll('.hcb_wrap');
         // const hcbClips = document.querySelectorAll('.hcb-clipboard');
         for ( let i = 0; i < hcbWraps.length; i++ ) {
             const elem = hcbWraps[ i ];
             const code = elem.querySelector( 'code' );
             if ( null === code ) continue;
+        for (let i = 0; i < hcbWraps.length; i++) {
+            const elem = hcbWraps[i];
+            const code = elem.querySelector('code');
+            if (null === code) continue;
             // ボタン生成
             const button = document.createElement( 'button' );
             button.classList.add( 'hcb-clipboard' );
             button.setAttribute( 'data-clipboard-target', '[data-hcb-clip="' + clipCt + '"]' );
             button.setAttribute( 'data-clipboard-action', 'copy' );
             button.setAttribute( 'aria-label', window.hcbVars?.copyBtnLabel || '' );
+            const button = document.createElement('button');
+            button.classList.add('hcb-clipboard');
+            button.setAttribute('data-clipboard-target', '[data-hcb-clip="' + clipCt + '"]');
+            button.setAttribute('data-clipboard-action', 'copy');
+            button.setAttribute('aria-label', window.hcbVars?.copyBtnLabel || '');
             // button.innerHTML = `コピー`;
             elem.prepend( button );
+            elem.append(button);
             // codeタグにターゲット属性追加
             code.setAttribute( 'data-hcb-clip', clipCt );
+            code.setAttribute('data-hcb-clip', clipCt);
             clipCt++;
+        }
         const clipboard = new ClipboardJS( '.hcb-clipboard' );
         clipboard.on( 'success', function ( e ) {
+        const clipboard = new ClipboardJS('.hcb-clipboard');
+        clipboard.on('success', function (e) {
             const btn = e.trigger;
             btn.classList.add( '-done' );
             setTimeout( () => {
                 btn.classList.remove( '-done' );
             }, 5000 );
         } );
+            btn.classList.add('-done');
+            setTimeout(() => {
+                btn.classList.remove('-done');
+            }, 5000);
+        });
         // clipboard.on('error', function (e) {
         //  alert(e);
         // });
     } )();
 } );
+    })();
+});

highlighting-code-block/tags/2.0.0/src/scss/editor/_base.scss

-                      r2886197
+                      r2994656
+@import "../root";
+@import "./conrtols";
 // 共通
 .mce-content-body .hcb_wrap {
 …
+}
+:root {
+    --hcb--pY: 2em; // 高さセットにも使うので注意
+    --hcb--pX: 1.5em;
+    --hcb--linenumW: 3em;
+}
+// Block: hcb_wrap > hcb_codewrap > hcb_textarea
+// Classic: hcb_wrap > pre
 .hcb_wrap {
+    position: relative;
     &.hcb_wrap {
+    > .hcb_codewrap {
         position: relative;
+        border: solid 1px #f1f1f1;
+        padding-right: 0.75em;
+        color: var(--hcb--c);
+        background: var(--hcb--bgc);
+        border-radius: var(--hcb--radius);
+    }
+}
+        pre,
+        textarea.hcb_textarea {
+            position: static;
+            display: block;
+            box-sizing: border-box;
+            width: 100%;
+            margin: 0 !important;
+            padding: 1.5em;
+            overflow-x: auto;
+            color: var(--hcb-color--text, #1f1e1e);
+            font-size: var(--hcb-font-size, 14px);
+            font-family: var(--hcb-font-family, "Menlo", "Consolas", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif);
+            line-height: 1.8;
+            white-space: pre !important;
+            overflow-wrap: break-word;
+            tab-size: 2;
+            background: var(--hcb-color--bg, #f7f6f6);
+            border: none;
+            border-radius: 0;
+        }
+    }
+.hcb_wrap > pre,
+.hcb_codewrap,
+.hcb_textarea {
+    color: var(--hcb--c) !important;
+    font-size: var(--hcb--fz, 14px) !important;
+    font-family: var(--hcb--ff) !important;
+    line-height: 1.5 !important;
+    background: var(--hcb--bgc) !important;
+}
+    .hcb_codewrap {
+        position: relative;
+        padding-right: 1em;
+        color: var(--hcb-color--text, #1f1e1e);
+        background: var(--hcb-color--bg, #f7f6f6);
+    }
+.hcb_wrap.hcb_wrap > pre,
+.hcb_textarea.hcb_textarea {
+    position: static;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: var(--hcb--pY) var(--hcb--pX);
+    overflow-x: auto;
+    white-space: pre !important;
+    overflow-wrap: break-word;
+    tab-size: 4;
+    border: none;
+    border-radius: 0;
     // スクロールバー
+    pre,
+    textarea.hcb_textarea {
+        &::-webkit-scrollbar {
+            height: 8px;
+            border: none;
+        }
+        &::-webkit-scrollbar-track {
+            background: #f7f7f7;
+            border: none;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+        }
+    &::-webkit-scrollbar {
+        height: 6px;
+        border: none;
+    }
+    textarea.hcb_textarea {
+        outline: none;
+        box-shadow: none;
+        resize: none;
+    &::-webkit-scrollbar-track {
+        background: var(--hcb--scbar-track--bgc);
+        border: none;
+    }
+    pre code {
+        display: block;
+        padding: 0 !important;
+        color: inherit !important;
+        font-family: inherit !important;
+        tab-size: 2;
+        background: inherit !important;
+    }
+    // 設定エリア
+    .hcb_controls {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 8px 8px;
+        &::after {
+            display: block;
+            clear: both;
+            height: 0;
+            visibility: hidden;
+            content: "";
+        }
+        .components-base-control {
+            flex-basis: 50%;
+            max-width: 25rem;
+            select {
+                width: 100%;
+                // margin: 0;
+            }
+        }
+        .filename_input {
+            flex-basis: 20%;
+            // float: right;
+            min-width: 10em;
+            height: 28px;
+            margin-left: auto;
+            padding: 0 8px;
+            line-height: 28px;
+        }
+        .num_input {
+            flex-basis: 20%;
+            // float: right;
+            min-width: 10em;
+            height: 28px;
+            margin-left: 16px;
+            padding: 0 8px;
+            line-height: 28px;
+        }
+    }
+    // エディダーではオン・オフが分かるように縦線だけ表示
+    .hcb_linenum {
+        position: absolute;
+        top: 1em;
+        left: 1em;
+        display: none;
+        width: 0;
+        height: calc(100% - 2em);
+        border-right: solid 1px rgba(150, 150, 150, 0.5);
+    &::-webkit-scrollbar-thumb {
+        background: var(--hcb--scbar-thumb--bgc);
+        border-radius: 3px;
+    }
+}
+.hcb-block[data-show-linenum] {
+.hcb_textarea.hcb_textarea {
+    // `calc(${height}em + ${scbarH}px)`;
+    height: calc(1.5em * var(--hcb--code-linenum, 1) + var(--hcb--pY) * 2 + var(--hcb--scbarH, 0px));
+    outline: none;
+    box-shadow: none;
+    resize: none;
+    .hcb_linenum {
+        display: block;
+    &::placeholder {
+        color: inherit;
+        font-style: italic;
+        opacity: 0.5;
+    }
+    textarea.hcb_textarea {
+        width: calc(100% - 2em);
+        margin-left: 2em !important;
+        padding-left: 0.5em;
+    &::-ms-input-placeholder,
+    &::-moz-placeholder,
+    &::-webkit-input-placeholder {
+        color: inherit;
+        font-style: italic;
+        opacity: 0.5;
+    }
+}
+.hcb_wrap > pre code {
+    display: block;
+    padding: 0 !important;
+    color: inherit !important;
+    font-family: inherit !important;
+    tab-size: 2;
+    background: inherit !important;
+}
+// 行数表示 → エディダーではオン・オフが分かるように縦ボーダーだけ表示
+.hcb_linenum {
+    position: absolute;
+    top: var(--hcb--pY);
+    left: calc(var(--hcb--linenumW) / 2 + 0.5em);
+    width: 0;
+    height: calc(100% - var(--hcb--pY) * 2);
+    color: var(--hcb--line-numbers--c);
+    border-right: solid 1px currentcolor;
+    > .hcb-startNum {
+        position: absolute;
+        top: 0;
+        right: 0.5em;
+        right: calc(0.95em - 1px);
+        font: inherit;
+        font-size: 0.95em;
+        line-height: 1.5;
+        white-space: nowrap;
+        word-wrap: normal;
+        translate: 50%;
+    }
+}
+.hcb-block[data-show-linenum] {
+    .hcb_codewrap {
+        padding-left: calc(var(--hcb--linenumW) / 2 + 1em);
+    }
+    .hcb_textarea {
+        padding-left: calc(var(--hcb--linenumW) / 2 - 1em);
+    }
+}
 // Lang Name
 .hcb_wrap pre::before, // for Classic
+.hcb_wrap > pre::before, // for Classic
 .hcb-block::before {
     position: absolute;
 …
     min-width: 4em;
     padding: 0 10px;
     color: var(--hcb-color--lang--text, #1f1e1e);
     font-size: 12px;
     font-family: Arial, Helvetica, sans-serif;
+    color: var(--hcb--data-label--c);
+    font-size: 0.925em;
+    font-family: inherit;
     line-height: 20px;
     text-align: center;
+    background-color: var(--hcb-color--lang--bg, #dedede);
+    content: attr(data-lang);
+    background-color: var(--hcb--data-label--bgc);
+    border-radius: 0 var(--hcb--radius);
+    content: var(--hcb--data-label);
+}
+.hcb-block[data-show-lang="0"] {
+    --hcb--data-label: none;
+}
+.hcb-block[data-show-lang="1"] {
+    --hcb--data-label: attr(data-lang);
+}
+// [data-file] があれば、lang 非表示でも表示する
 .hcb-block[data-file]::before {
     padding: 0 8px 0 20px;
     background-image: var(--hcb-file-icon);
+    background-image: var(--hcb--file-icon);
     background-repeat: no-repeat;
     background-position: center left 8px;
     background-size: auto 10px;
     content: attr(data-file);
+    content: attr(data-file); // --hcb--data-label: attr(data-file);
+}
 .hcb-block[data-show-lang="0"]:not([data-file])::before {
     content: none;
+}
+// .hcb-block[data-show-lang="0"]:not([data-file])::before {
+//  content: none;
+// }
-// ブロック非選択時
-[data-type="loos-hcb/code-block"]:not(.is-selected) {
-    .hcb_controls {
-        display: none;
+    }
+}
-// デバイスプレビュー
-.wp-embed-responsive.editor-styles-wrapper {
-    .hcb_controls {
-        display: none;
+    }
+}

highlighting-code-block/tags/2.0.0/src/scss/editor/_color--dark.scss

-                      r2886197
+                      r2994656
+body {
+    --hcb-color--text: #f8f8f2;
+    --hcb-color--text-shadow: rg1a1a1ab(136, 132, 132);
+    --hcb-color--bg: #34352e;
+    --hcb-color--lang--text: #fff;
+    --hcb-color--lang--bg: #111;
+    --hcb-file-icon: url(../../assets/img/file-icon-dark.svg);
+:root {
+    --hcb--c: #f8f8f2;
+    --hcb--bgc: #34352e;
+    --hcb--data-label--c: #fff;
+    --hcb--data-label--bgc: #111;
+    --hcb--file-icon: url(../../assets/img/file-icon-dark.svg);
+    --hcb--scbar-track--bgc: rgba(255, 255, 255, 0.1);
+    --hcb--scbar-thumb--bgc: rgba(255, 255, 255, 0.2);
+    // --hcb--placeholder--c: rgba(255, 255, 255, 0.4);
+}
-// Gutenbergでのプレースホルダー
-.hcb_wrap textarea.hcb_textarea {
-    &::placeholder {
-        color: rgba(255, 255, 255, 0.4);
-        font-style: italic;
+    }
-    &::-ms-input-placeholder,
-    &::-moz-placeholder,
-    &::-webkit-input-placeholder {
-        color: rgba(255, 255, 255, 0.4);
-        font-style: italic;
+    }
+}

highlighting-code-block/tags/2.0.0/src/scss/editor/_color--light.scss

-                      r2886197
+                      r2994656
+body {
+    --hcb-color--text: #1f1e1e;
+    --hcb-color--text-shadow: #fff;
+    --hcb-color--bg: #f7f6f6;
+    --hcb-color--lang--text: #1f1e1e;
+    --hcb-color--lang--bg: #dedede;
+    --hcb-file-icon: url(../../assets/img/file-icon-light.svg);
+}
+// :root {}

highlighting-code-block/tags/2.0.0/src/scss/front/_base.scss

-                      r2886197
+                      r2994656
+@import "../root";
+// ベース（テーマに上書きされないよう、クラス２重にして詳細度あげておく）
+.hcb_wrap.hcb_wrap {
+    position: relative;
+    z-index: 0;
+    display: block;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    padding: 0;
+    font-size: var(--hcb--fz, 14px);
+    > pre {
+        position: static;
+        display: block;
+        box-sizing: border-box;
+        margin: 0;
+        padding: var(--hcb--pY) var(--hcb--pX);
+        overflow: auto;
+        font-size: inherit;
+        font-family: var(--hcb--ff);
+        line-height: 1.5;
+        letter-spacing: 0.1px;
+        border-radius: var(--hcb--radius, 0);
+        -webkit-overflow-scrolling: touch;
+    }
+    > pre,
+    > pre > code {
+        color: var(--hcb--c);
+        white-space: pre;
+        text-align: left;
+        text-shadow: var(--hcb--tsh);
+        word-wrap: normal;
+        word-break: normal;
+        word-spacing: normal;
+        tab-size: 4;
+        hyphens: none;
+        background: var(--hcb--bgc);
+        border: none;
+    }
+    :is(code, span) {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0; // 一部の海外テーマでズレが生じるのを防ぐ
+        font-size: inherit;
+        font-family: inherit;
+        line-height: inherit;
+    }
+}
 /*
     カラーリングに関係ない共通設定
  */
+$hcbPaddingY: 1.75em;
+$hcbLineNumPadding: 3.75em;
+  Note: .line-highlight の出現位置は、行数表示があるかどうかで変わる。
+    行数表示がある → pre > .line-highlight
+    行数表示がない → pre > code > .line-highlight
+        また、このとき、.line-highlight は data-start, data-end を持つようになる。
+*/
 .hcb_wrap {
+    // ベース（テーマに上書きされないよう、クラス２重にして詳細度あげておく）
+    &.hcb_wrap {
+        position: relative;
+        z-index: 0;
+        display: block;
+        margin-top: 2em;
+        margin-bottom: 2em;
+        padding: 0;
+        pre {
+            position: static;
+            display: block;
+            box-sizing: border-box;
+            margin: 0;
+            padding: $hcbPaddingY 1.5em;
+            overflow: auto;
+            font-size: var(--hcb-font-size, 14px);
+            font-family: var(--hcb-font-family, "Menlo", "Consolas", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif);
+            line-height: 1;
+            letter-spacing: 0.1px;
+            border-radius: 0;
+            -webkit-overflow-scrolling: touch;
+            @media screen and (max-width: 599px) {
+                font-size: var(--hcb-font-size--mobile, 13px);
+            }
+        }
+        code,
+        pre {
+            color: var(--hcb-color--text, #1f1e1e);
+            white-space: pre;
+            text-align: left;
+            text-shadow: 0 1px var(--hcb-color--text-shadow, #fff);
+            word-wrap: normal;
+            word-break: normal;
+            word-spacing: normal;
+            tab-size: 4;
+            hyphens: none;
+            background: var(--hcb-color--bg, #f7f6f6);
+            border: none;
+        }
+        code,
+        span {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0; // 一部の海外テーマでズレが生じるのを防ぐ
+            font-size: inherit;
+            font-family: inherit;
+            line-height: 1.5;
+        }
+    }
+    // line highlight
+    // .prism[data-line] > .line-highlight
     .line-highlight {
         position: absolute;
         right: 0;
         left: 0;
         margin-top: $hcbPaddingY;
+        margin-top: var(--hcb--pY);
         padding: 0;
         font-size: inherit;
         line-height: inherit;
         white-space: pre;
         background: var(--hcb-color--highlight, rgba(150, 120, 100, 0.1));
+        background: var(--hcb--highlight-color);
         pointer-events: none;
+        &::before,
+        &[data-end]::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            box-sizing: border-box;
+            min-width: 1.5em;
+            padding: 1px 2px;
+            color: var(--hcb-color--highlight-text, #f5f2f0);
+            font-weight: bold;
+            font-size: 12px;
+            line-height: inherit;
+            text-align: center;
+            text-shadow: none;
+            vertical-align: middle;
+            background-color: var(--hcb-color--highlight-bg, #b1aead);
+            border-radius: 0;
+            content: attr(data-start);
+        }
+        &[data-end]::after {
+            top: auto;
+            bottom: 0;
+            content: attr(data-end);
+        }
+    }
+    // 行数表示ある時はハイライトの行表示を消す
+    .line-numbers .line-highlight::before,
+    .line-numbers .line-highlight::after {
+        content: none;
+    }
+    // line numbers
+    pre.line-numbers {
+        position: static; // pre の親の .hcb_wrap に追従
+        padding-left: $hcbLineNumPadding;
+        // 1.8.0 で廃止
+        // &::before,
+        // &::after {
+        //  position: absolute;
+        //  top: 0;
+        //  left: 0;
+        //  box-sizing: border-box;
+        //  min-width: 1.5em;
+        //  padding: 1px 2px;
+        //  color: var(--hcb--highlight-c);
+        //  font-size: 12px;
+        //  line-height: inherit;
+        //  text-align: center;
+        //  text-shadow: none;
+        //  vertical-align: middle;
+        //  background-color: var(--hcb--highlight-bgc);
+        //  border-radius: 0;
+        // }
+        // &[data-start]::before {
+        //  content: attr(data-start);
+        // }
+        // &[data-end]::after {
+        //  top: auto;
+        //  bottom: 0;
+        //  content: attr(data-end);
+        // }
+    }
+    > .prism.line-numbers {
+        position: static; // pre の親の .hcb_wrap に追従させたい
+        padding-left: calc(var(--hcb--pX) + var(--hcb--linenumW)); // .hcb_wrap.hcb_wrap > pre に詳細度勝たないといけない
         counter-reset: linenumber;
 …
+    }
     .line-numbers .line-numbers-rows {
+    .line-numbers-rows {
         position: absolute;
+        top: -2px;
+        left: -$hcbLineNumPadding;
+        width: 3em; // works for line-numbers below 1000 lines
+        font-size: inherit;
+        letter-spacing: -1px;
+        border-right: 1px solid var(--hcb-color--line-numbers, #999);
+        // -webkit-user-select: none;
+        // -moz-user-select: none;
+        // -ms-user-select: none;
+        top: -0.125em;
+        left: calc(-1px - var(--hcb--linenumW) - var(--hcb--pX) / 2);
+        min-width: var(--hcb--linenumW);
+        font-size: inherit;
+        // letter-spacing: -1px;
+        border-right: 1px solid var(--hcb--line-numbers--c);
         user-select: none;
         pointer-events: none;
 …
     .line-numbers-rows > span {
         display: block;
+        letter-spacing: -0.25px;
+        text-align: center;
         counter-increment: linenumber;
         pointer-events: none;
 …
     .line-numbers-rows > span::before {
         display: block;
+        padding-right: 0.8em;
+        color: var(--hcb-color--line-numbers, #999);
+        text-align: right;
+        color: var(--hcb--line-numbers--c);
         content: counter(linenumber);
+    }
+    // Lang Name
+    pre::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        box-sizing: border-box;
+        min-width: 4em;
+        padding: 0 10px;
+        color: var(--hcb-color--lang--text, #1f1e1e);
+        font-size: 12px;
+        font-family: Arial, Helvetica, sans-serif;
+        line-height: 20px;
+        text-align: center;
+        background-color: var(--hcb-color--lang--bg, #dedede);
+        content: attr(data-lang);
+    }
+    // コピーボタンがある時
+    .hcb-clipboard + pre::before {
+        right: 26px;
+    }
+    // ファイル名を表示する時
+    pre[data-file]::before {
+        padding: 0 8px 0 20px;
+        // background-colorを打ち消さないように分けて書く
+        background-image: var(--hcb-file-icon);
+        background-repeat: no-repeat;
+        background-position: center left 8px;
+        background-size: auto 10px;
+        content: attr(data-file);
+    }
+    // 強制オフ時
+    pre[data-show-lang="0"]:not([data-file])::before {
+        content: none;
+    }
+    // コピーボタン
+    .hcb-clipboard {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        box-sizing: border-box;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        text-align: center;
+        background-color: rgba(#fff, 0.8);
+        background-image: url(../../assets/img/clipborad.svg);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 16px auto;
+    // scrollbar
+    > pre::-webkit-scrollbar {
+        height: 6px;
+    }
+    > pre::-webkit-scrollbar-track {
+        background: var(--hcb--scbar-track--bgc);
         border: none;
+        border-radius: 1px;
+        &.-done {
+            background-image: url(../../assets/img/copied.svg);
+            &::before {
+                position: absolute;
+                right: 0;
+                bottom: 100%;
+                font-size: 14px;
+                font-family: Arial, Helvetica, sans-serif;
+                line-height: 1.5;
+                content: "Copied!";
+            }
+        }
+    }
+    // scrollbar
+    pre::-webkit-scrollbar {
+        height: 6px;
+    }
+    pre::-webkit-scrollbar-track {
+        background: var(--hcb-color--scrollbar-track, rgba(150, 150, 150, 0.1));
+        border: none;
+    }
+    pre::-webkit-scrollbar-thumb {
+        background: var(--hcb-color--scrollbar-thumb, rgba(150, 150, 150, 0.25));
+    }
+    > pre::-webkit-scrollbar-thumb {
+        background: var(--hcb--scbar-thumb--bgc);
         border-radius: 3px;
+    }
 …
     border-radius: 0.3em;
+}
+// Lang Name, File Name
+.hcb_wrap > pre::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    min-width: 4em;
+    padding: 0 10px;
+    color: var(--hcb--data-label--c);
+    font-size: 0.925em;
+    font-family: inherit;
+    line-height: 20px;
+    text-align: center;
+    background-color: var(--hcb--data-label--bgc);
+    border-radius: 0 var(--hcb--radius);
+    content: var(--hcb--data-label);
+}
+// 強制オフ時
+.hcb_wrap > pre[data-show-lang="0"] {
+    --hcb--data-label: none;
+}
+// 強制オン時
+.hcb_wrap > pre[data-show-lang="1"] {
+    --hcb--data-label: attr(data-lang);
+}
+// コピーボタンがある時
+// .hcb-clipboard + pre::before {
+//  right: 26px;
+// }
+// ファイル名を表示する時
+.hcb_wrap > pre[data-file]::before {
+    padding: 0 8px 0 20px;
+    // background-colorを打ち消さないように分けて書く
+    background-image: var(--hcb--file-icon);
+    background-repeat: no-repeat;
+    background-position: center left 8px;
+    background-size: auto 10px;
+    content: attr(data-file);
+}
+// data-show-lang
+// コピーボタン
+/* stylelint-disable-next-line no-duplicate-selectors */
+.hcb_wrap {
+    --hcb-clipbtn-opacity: 0;
+}
+.hcb_wrap:hover,
+.hcb-clipboard:focus-visible {
+    --hcb-clipbtn-opacity: 100;
+}
+.hcb-clipboard {
+    position: absolute;
+    top: calc(var(--hcb--btn-offset, 0px) + 8px);
+    right: 8px;
+    z-index: 2;
+    box-sizing: border-box;
+    width: 2.25em;
+    height: 2.25em;
+    padding: 0;
+    color: #000;
+    text-align: center;
+    background: url(../../assets/img/clipboard-to-copy.svg) no-repeat center / 64% auto;
+    background-color: rgba(250, 250, 250, 0.8);
+    border: none;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(#3d3d3d, 0.25);
+    opacity: var(--hcb-clipbtn-opacity);
+    backdrop-filter: blur(2px);
+    transition: opacity 0.25s;
+    [data-show-lang="0"] + & {
+        --hcb--btn-offset: 0px;
+    }
+    [data-show-lang="1"] + & {
+        --hcb--btn-offset: 20px;
+    }
+    &.-done {
+        background-image: url(../../assets/img/clipboard-copied.svg);
+        &::before {
+            position: absolute;
+            top: 50%;
+            right: calc(4px + 100%);
+            display: block;
+            padding: 2px 4px 2px 2px;
+            color: inherit;
+            font-size: 12px;
+            font-family: Arial, Helvetica, sans-serif;
+            line-height: 1;
+            background-color: inherit;
+            border-radius: 8px;
+            content: "✓Copied";
+            translate: 0 -50%;
+        }
+    }
+}

highlighting-code-block/tags/2.0.0/src/scss/front/_color--dark.scss

-                      r2886197
+                      r2994656
   Dark coloring
 */
+body {
+    --hcb-color--text: #f8f8f2;
+    --hcb-color--text-shadow: rg1a1a1ab(136, 132, 132);
+    --hcb-color--bg: #34352e;
+    --hcb-color--lang--text: #fff;
+    --hcb-color--lang--bg: #111;
+    --hcb-color--line-numbers: #999;
+    --hcb-color--highlight: rgba(255, 250, 245, 0.1);
+    --hcb-color--highlight-text: #fcfcfc;
+    --hcb-color--highlight-bg: #afa7a166;
+    --hcb-file-icon: url(../../assets/img/file-icon-dark.svg);
+    --hcb-color--scrollbar-track: rgba(255, 255, 255, 0.1);
+    --hcb-color--scrollbar-thumb: rgba(255, 255, 255, 0.2);
+:root {
+    --hcb--c: #f9f9f6;
+    // --hcb--tsh: none;
+    --hcb--bgc: #2d2e29;
+    --hcb--data-label--c: #fff;
+    --hcb--data-label--bgc: #20211f;
+    --hcb--line-numbers--c: #a3a3a3;
+    --hcb--highlight-color: rgba(255, 250, 245, 0.1);
+    --hcb--file-icon: url(../../assets/img/file-icon-dark.svg);
+    --hcb--scbar-track--bgc: rgba(255, 255, 255, 0.1);
+    --hcb--scbar-thumb--bgc: rgba(255, 255, 255, 0.2);
+}

highlighting-code-block/tags/2.0.0/src/scss/front/_color--light.scss

-                      r2886197
+                      r2994656
   Light coloring
 */
+body {
+    --hcb-color--text: #1f1e1e;
+    --hcb-color--text-shadow: #fff;
+    --hcb-color--bg: #f7f6f6;
+    --hcb-color--lang--text: #1f1e1e;
+    --hcb-color--lang--bg: #dedede;
+    --hcb-color--line-numbers: #999;
+    --hcb-color--highlight: rgba(150, 120, 100, 0.1);
+    --hcb-color--highlight-text: #f5f2f0;
+    --hcb-color--highlight-bg: #b1aead;
+    --hcb-file-icon: url(../../assets/img/file-icon-light.svg);
+    --hcb-color--scrollbar-track: rgba(0, 0, 0, 0.05);
+    --hcb-color--scrollbar-thumb: #0000001a;
+:root {
+    --hcb--tsh: 1px 1px 0px rgb(240, 240, 240);
+}

highlighting-code-block/trunk/build/css/hcb--dark.css

r2886197	r2994656
1		.hcb_wrap.hcb_wrap{display:block;margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap pre{-webkit-overflow-scrolling:touch;border-radius:0;box-sizing:border-box;display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);letter-spacing:.1px;line-height:1;margin:0;overflow:auto;padding:1.75em 1.5em;position:static}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap pre{word-wrap:normal;background:var(--hcb-color--bg,#f7f6f6);border:none;color:var(--hcb-color--text,#1f1e1e);-webkit-hyphens:none;hyphens:none;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px var(--hcb-color--text-shadow,#fff);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap span{box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:1.5;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb-color--highlight,hsla(24,20%,49%,.1));font-size:inherit;left:0;line-height:inherit;margin-top:1.75em;padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap .line-highlight:before,.hcb_wrap .line-highlight[data-end]:after{background-color:var(--hcb-color--highlight-bg,#b1aead);border-radius:0;box-sizing:border-box;color:var(--hcb-color--highlight-text,#f5f2f0);content:attr(data-start);font-size:12px;font-weight:700;left:0;line-height:inherit;min-width:1.5em;padding:1px 2px;position:absolute;text-align:center;text-shadow:none;top:0;vertical-align:middle}.hcb_wrap .line-highlight[data-end]:after{bottom:0;content:attr(data-end);top:auto}.hcb_wrap .line-numbers .line-highlight:after,.hcb_wrap .line-numbers .line-highlight:before{content:none}.hcb_wrap pre.line-numbers{counter-reset:linenumber;padding-left:3.75em;position:static}.hcb_wrap pre.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers .line-numbers-rows{border-right:1px solid var(--hcb-color--line-numbers,#999);font-size:inherit;left:-3.75em;letter-spacing:-1px;pointer-events:none;position:absolute;top:-2px;-webkit-user-select:none;user-select:none;width:3em}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;pointer-events:none}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb-color--line-numbers,#999);content:counter(linenumber);display:block;padding-right:.8em;text-align:right}.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap .hcb-clipboard+pre:before{right:26px}.hcb_wrap pre[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap pre[data-show-lang="0"]:not([data-file]):before{content:none}.hcb_wrap .hcb-clipboard{background-color:hsla(0,0%,100%,.8);background-image:url(../../assets/img/clipborad.svg);background-position:50%;background-repeat:no-repeat;background-size:16px auto;border:none;border-radius:1px;box-sizing:border-box;height:20px;padding:0;position:absolute;right:0;text-align:center;top:0;width:20px;z-index:1}.hcb_wrap .hcb-clipboard.-done{background-image:url(../../assets/img/copied.svg)}.hcb_wrap .hcb-clipboard.-done:before{bottom:100%;content:"Copied!";font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;position:absolute;right:0}.hcb_wrap pre::-webkit-scrollbar{height:6px}.hcb_wrap pre::-webkit-scrollbar-track{background:var(--hcb-color--scrollbar-track,hsla(0,0%,59%,.1));border:none}.hcb_wrap pre::-webkit-scrollbar-thumb{background:var(--hcb-color--scrollbar-thumb,hsla(0,0%,59%,.25));border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}body{--hcb-color--text:#f8f8f2;--hcb-color--text-shadow:rg1a1a1ab(136,132,132);--hcb-color--bg:#34352e;--hcb-color--lang--text:#fff;--hcb-color--lang--bg:#111;--hcb-color--line-numbers:#999;--hcb-color--highlight:rgba(255,250,245,.1);--hcb-color--highlight-text:#fcfcfc;--hcb-color--highlight-bg:#afa7a166;--hcb-file-icon:url(../../assets/img/file-icon-dark.svg);--hcb-color--scrollbar-track:hsla(0,0%,100%,.1);--hcb-color--scrollbar-thumb:hsla(0,0%,100%,.2)}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#a8a897}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:#ff2c78}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector{color:#b4ec43}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.string{color:#f3e880}.token.function,.token.keyword.def{color:#5fe6ff}.token.keyword,.token.operator{color:#f92672}.token.keyword.this,.token.regex{color:#fd971f}.token.delimiter:not(.symbol){color:#5294ff}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.language-css .token.property,.language-json .token.property,.language-scss .token.property{color:#5fe6ff}.language-php .token.important.delimiter{font-weight:400}.language-ruby .token.interpolation{color:#f8f8f2}.language-json .token.operator{color:#f3e880}@media screen and (max-width:599px){.hcb_wrap.hcb_wrap pre{font-size:var(--hcb-font-size--mobile,13px)}}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--pX:1.5em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb_wrap.hcb_wrap{display:block;font-size:var(--hcb--fz,14px);margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap>pre{-webkit-overflow-scrolling:touch;border-radius:var(--hcb--radius,0);box-sizing:border-box;display:block;font-family:var(--hcb--ff);font-size:inherit;letter-spacing:.1px;line-height:1.5;margin:0;overflow:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static}.hcb_wrap.hcb_wrap>pre,.hcb_wrap.hcb_wrap>pre>code{word-wrap:normal;background:var(--hcb--bgc);border:none;color:var(--hcb--c);-webkit-hyphens:none;hyphens:none;tab-size:4;text-align:left;text-shadow:var(--hcb--tsh);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap :is(code,span){box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb--highlight-color);font-size:inherit;left:0;line-height:inherit;margin-top:var(--hcb--pY);padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap>.prism.line-numbers{counter-reset:linenumber;padding-left:calc(var(--hcb--pX) + var(--hcb--linenumW));position:static}.hcb_wrap>.prism.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers-rows{border-right:1px solid var(--hcb--line-numbers--c);font-size:inherit;left:calc(-1px - var(--hcb--linenumW) - var(--hcb--pX)/2);min-width:var(--hcb--linenumW);pointer-events:none;position:absolute;top:-.125em;-webkit-user-select:none;user-select:none}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;letter-spacing:-.25px;pointer-events:none;text-align:center}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb--line-numbers--c);content:counter(linenumber);display:block}.hcb_wrap>pre::-webkit-scrollbar{height:6px}.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap>pre[data-show-lang="0"]{--hcb--data-label:none}.hcb_wrap>pre[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb_wrap>pre[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap{--hcb-clipbtn-opacity:0}.hcb-clipboard:focus-visible,.hcb_wrap:hover{--hcb-clipbtn-opacity:100}.hcb-clipboard{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:url(../../assets/img/clipboard-to-copy.svg) no-repeat 50%/64% auto;background-color:#fafafacc;border:none;border-radius:3px;box-shadow:0 1px 2px #3d3d3d40;box-sizing:border-box;color:#000;height:2.25em;opacity:var(--hcb-clipbtn-opacity);padding:0;position:absolute;right:8px;text-align:center;top:calc(var(--hcb--btn-offset, 0px) + 8px);transition:opacity .25s;width:2.25em;z-index:2}[data-show-lang="0"]+.hcb-clipboard{--hcb--btn-offset:0px}[data-show-lang="1"]+.hcb-clipboard{--hcb--btn-offset:20px}.hcb-clipboard.-done{background-image:url(../../assets/img/clipboard-copied.svg)}.hcb-clipboard.-done:before{background-color:inherit;border-radius:8px;color:inherit;content:"✓Copied";display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;padding:2px 4px 2px 2px;position:absolute;right:calc(4px + 100%);top:50%;translate:0 -50%}:root{--hcb--c:#f9f9f6;--hcb--bgc:#2d2e29;--hcb--data-label--c:#fff;--hcb--data-label--bgc:#20211f;--hcb--line-numbers--c:#a3a3a3;--hcb--highlight-color:#fffaf51a;--hcb--file-icon:url(../../assets/img/file-icon-dark.svg);--hcb--scbar-track--bgc:#ffffff1a;--hcb--scbar-thumb--bgc:#fff3}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#a8a897}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:#ff2c78}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector{color:#b4ec43}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.string{color:#f3e880}.token.function,.token.keyword.def{color:#5fe6ff}.token.keyword,.token.operator{color:#f92672}.token.keyword.this,.token.regex{color:#fd971f}.token.delimiter:not(.symbol){color:#5294ff}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.language-css .token.property,.language-json .token.property,.language-scss .token.property{color:#5fe6ff}.language-php .token.important.delimiter{font-weight:400}.language-ruby .token.interpolation{color:#f8f8f2}.language-json .token.operator{color:#f3e880}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/trunk/build/css/hcb--light.css

r2886197	r2994656
1		.hcb_wrap.hcb_wrap{display:block;margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap pre{-webkit-overflow-scrolling:touch;border-radius:0;box-sizing:border-box;display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);letter-spacing:.1px;line-height:1;margin:0;overflow:auto;padding:1.75em 1.5em;position:static}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap pre{word-wrap:normal;background:var(--hcb-color--bg,#f7f6f6);border:none;color:var(--hcb-color--text,#1f1e1e);-webkit-hyphens:none;hyphens:none;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px var(--hcb-color--text-shadow,#fff);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap span{box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:1.5;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb-color--highlight,hsla(24,20%,49%,.1));font-size:inherit;left:0;line-height:inherit;margin-top:1.75em;padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap .line-highlight:before,.hcb_wrap .line-highlight[data-end]:after{background-color:var(--hcb-color--highlight-bg,#b1aead);border-radius:0;box-sizing:border-box;color:var(--hcb-color--highlight-text,#f5f2f0);content:attr(data-start);font-size:12px;font-weight:700;left:0;line-height:inherit;min-width:1.5em;padding:1px 2px;position:absolute;text-align:center;text-shadow:none;top:0;vertical-align:middle}.hcb_wrap .line-highlight[data-end]:after{bottom:0;content:attr(data-end);top:auto}.hcb_wrap .line-numbers .line-highlight:after,.hcb_wrap .line-numbers .line-highlight:before{content:none}.hcb_wrap pre.line-numbers{counter-reset:linenumber;padding-left:3.75em;position:static}.hcb_wrap pre.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers .line-numbers-rows{border-right:1px solid var(--hcb-color--line-numbers,#999);font-size:inherit;left:-3.75em;letter-spacing:-1px;pointer-events:none;position:absolute;top:-2px;-webkit-user-select:none;user-select:none;width:3em}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;pointer-events:none}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb-color--line-numbers,#999);content:counter(linenumber);display:block;padding-right:.8em;text-align:right}.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap .hcb-clipboard+pre:before{right:26px}.hcb_wrap pre[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap pre[data-show-lang="0"]:not([data-file]):before{content:none}.hcb_wrap .hcb-clipboard{background-color:hsla(0,0%,100%,.8);background-image:url(../../assets/img/clipborad.svg);background-position:50%;background-repeat:no-repeat;background-size:16px auto;border:none;border-radius:1px;box-sizing:border-box;height:20px;padding:0;position:absolute;right:0;text-align:center;top:0;width:20px;z-index:1}.hcb_wrap .hcb-clipboard.-done{background-image:url(../../assets/img/copied.svg)}.hcb_wrap .hcb-clipboard.-done:before{bottom:100%;content:"Copied!";font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;position:absolute;right:0}.hcb_wrap pre::-webkit-scrollbar{height:6px}.hcb_wrap pre::-webkit-scrollbar-track{background:var(--hcb-color--scrollbar-track,hsla(0,0%,59%,.1));border:none}.hcb_wrap pre::-webkit-scrollbar-thumb{background:var(--hcb-color--scrollbar-thumb,hsla(0,0%,59%,.25));border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}body{--hcb-color--text:#1f1e1e;--hcb-color--text-shadow:#fff;--hcb-color--bg:#f7f6f6;--hcb-color--lang--text:#1f1e1e;--hcb-color--lang--bg:#dedede;--hcb-color--line-numbers:#999;--hcb-color--highlight:hsla(24,20%,49%,.1);--hcb-color--highlight-text:#f5f2f0;--hcb-color--highlight-bg:#b1aead;--hcb-file-icon:url(../../assets/img/file-icon-light.svg);--hcb-color--scrollbar-track:rgba(0,0,0,.05);--hcb-color--scrollbar-thumb:#0000001a}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#5f5f5f}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector,.token.string{color:#407b08}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#9a6e3a}.token.atrule,.token.attr-value,.token.function{color:#07a}.token.keyword,.token.operator{color:#c72c4c}.token.important,.token.keyword.this,.token.regex,.token.variable{color:#f18106}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.token.delimiter.important{color:#183d86;font-weight:400}@media screen and (max-width:599px){.hcb_wrap.hcb_wrap pre{font-size:var(--hcb-font-size--mobile,13px)}}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--pX:1.5em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb_wrap.hcb_wrap{display:block;font-size:var(--hcb--fz,14px);margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap>pre{-webkit-overflow-scrolling:touch;border-radius:var(--hcb--radius,0);box-sizing:border-box;display:block;font-family:var(--hcb--ff);font-size:inherit;letter-spacing:.1px;line-height:1.5;margin:0;overflow:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static}.hcb_wrap.hcb_wrap>pre,.hcb_wrap.hcb_wrap>pre>code{word-wrap:normal;background:var(--hcb--bgc);border:none;color:var(--hcb--c);-webkit-hyphens:none;hyphens:none;tab-size:4;text-align:left;text-shadow:var(--hcb--tsh);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap :is(code,span){box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb--highlight-color);font-size:inherit;left:0;line-height:inherit;margin-top:var(--hcb--pY);padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap>.prism.line-numbers{counter-reset:linenumber;padding-left:calc(var(--hcb--pX) + var(--hcb--linenumW));position:static}.hcb_wrap>.prism.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers-rows{border-right:1px solid var(--hcb--line-numbers--c);font-size:inherit;left:calc(-1px - var(--hcb--linenumW) - var(--hcb--pX)/2);min-width:var(--hcb--linenumW);pointer-events:none;position:absolute;top:-.125em;-webkit-user-select:none;user-select:none}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;letter-spacing:-.25px;pointer-events:none;text-align:center}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb--line-numbers--c);content:counter(linenumber);display:block}.hcb_wrap>pre::-webkit-scrollbar{height:6px}.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap>pre[data-show-lang="0"]{--hcb--data-label:none}.hcb_wrap>pre[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb_wrap>pre[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap{--hcb-clipbtn-opacity:0}.hcb-clipboard:focus-visible,.hcb_wrap:hover{--hcb-clipbtn-opacity:100}.hcb-clipboard{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:url(../../assets/img/clipboard-to-copy.svg) no-repeat 50%/64% auto;background-color:#fafafacc;border:none;border-radius:3px;box-shadow:0 1px 2px #3d3d3d40;box-sizing:border-box;color:#000;height:2.25em;opacity:var(--hcb-clipbtn-opacity);padding:0;position:absolute;right:8px;text-align:center;top:calc(var(--hcb--btn-offset, 0px) + 8px);transition:opacity .25s;width:2.25em;z-index:2}[data-show-lang="0"]+.hcb-clipboard{--hcb--btn-offset:0px}[data-show-lang="1"]+.hcb-clipboard{--hcb--btn-offset:20px}.hcb-clipboard.-done{background-image:url(../../assets/img/clipboard-copied.svg)}.hcb-clipboard.-done:before{background-color:inherit;border-radius:8px;color:inherit;content:"✓Copied";display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;padding:2px 4px 2px 2px;position:absolute;right:calc(4px + 100%);top:50%;translate:0 -50%}:root{--hcb--tsh:1px 1px 0px #f0f0f0}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#5f5f5f}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector,.token.string{color:#407b08}.language-css .token.string,.style .token.string,.token.entity,.token.url{color:#9a6e3a}.token.atrule,.token.attr-value,.token.function{color:#07a}.token.keyword,.token.operator{color:#c72c4c}.token.important,.token.keyword.this,.token.regex,.token.variable{color:#f18106}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.token.delimiter.important{color:#183d86;font-weight:400}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/trunk/build/css/hcb-editor--dark.css

r2886197	r2994656
1		.mce-content-body .hcb_wrap{margin:2em 0}.hcb_wrap.hcb_wrap{border:1px solid #f1f1f1;position:relative}.hcb_wrap.hcb_wrap pre,.hcb_wrap.hcb_wrap textarea.hcb_textarea{background:var(--hcb-color--bg,#f7f6f6);border:none;border-radius:0;box-sizing:border-box;color:var(--hcb-color--text,#1f1e1e);display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);line-height:1.8;margin:0!important;overflow-wrap:break-word;overflow-x:auto;padding:1.5em;position:static;-o-tab-size:2;tab-size:2;white-space:pre!important;width:100%}.hcb_wrap .hcb_codewrap{background:var(--hcb-color--bg,#f7f6f6);color:var(--hcb-color--text,#1f1e1e);padding-right:1em;position:relative}.hcb_wrap pre::-webkit-scrollbar,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar{border:none;height:8px}.hcb_wrap pre::-webkit-scrollbar-track,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar-track{background:#f7f7f7;border:none}.hcb_wrap pre::-webkit-scrollbar-thumb,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:4px}.hcb_wrap textarea.hcb_textarea{box-shadow:none;outline:none;resize:none}.hcb_wrap pre code{background:inherit!important;color:inherit!important;display:block;font-family:inherit!important;padding:0!important;-o-tab-size:2;tab-size:2}.hcb_wrap .hcb_controls{display:flex;flex-wrap:wrap;padding:8px}.hcb_wrap .hcb_controls:after{clear:both;content:"";display:block;height:0;visibility:hidden}.hcb_wrap .hcb_controls .components-base-control{flex-basis:50%;max-width:25rem}.hcb_wrap .hcb_controls .components-base-control select{width:100%}.hcb_wrap .hcb_controls .filename_input{flex-basis:20%;height:28px;line-height:28px;margin-left:auto;min-width:10em;padding:0 8px}.hcb_wrap .hcb_controls .num_input{flex-basis:20%;height:28px;line-height:28px;margin-left:16px;min-width:10em;padding:0 8px}.hcb_wrap .hcb_linenum{border-right:1px solid hsla(0,0%,59%,.5);display:none;height:calc(100% - 2em);left:1em;position:absolute;top:1em;width:0}.hcb-block[data-show-linenum] .hcb_linenum{display:block}.hcb-block[data-show-linenum] textarea.hcb_textarea{margin-left:2em!important;padding-left:.5em;width:calc(100% - 2em)}.hcb-block:before,.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb-block[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb-block[data-show-lang="0"]:not([data-file]):before{content:none}.wp-embed-responsive.editor-styles-wrapper .hcb_controls,[data-type="loos-hcb/code-block"]:not(.is-selected) .hcb_controls{display:none}body{--hcb-color--text:#f8f8f2;--hcb-color--text-shadow:rg1a1a1ab(136,132,132);--hcb-color--bg:#34352e;--hcb-color--lang--text:#fff;--hcb-color--lang--bg:#111;--hcb-file-icon:url(../../assets/img/file-icon-dark.svg)}.hcb_wrap textarea.hcb_textarea::placeholder{color:hsla(0,0%,100%,.4);font-style:italic}.hcb_wrap textarea.hcb_textarea::-moz-placeholder,.hcb_wrap textarea.hcb_textarea::-ms-input-placeholder,.hcb_wrap textarea.hcb_textarea::-webkit-input-placeholder{color:hsla(0,0%,100%,.4);font-style:italic}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb-code-in-label{font-size:.95em;padding:2px;text-transform:lowercase}.hcb-datapreview{background-color:inherit;border-radius:var(--hcb--radius);bottom:var(--hcb--scbarH,0);color:inherit;display:flex;flex-wrap:wrap;font-size:12px;gap:4px;line-height:1.25;opacity:.75;padding:2px 4px;position:absolute;right:0}.mce-content-body .hcb_wrap{margin:2em 0}:root{--hcb--pY:2em;--hcb--pX:1.5em;--hcb--linenumW:3em}.hcb_wrap{position:relative}.hcb_wrap>.hcb_codewrap{background:var(--hcb--bgc);border-radius:var(--hcb--radius);color:var(--hcb--c);padding-right:.75em;position:relative}.hcb_codewrap,.hcb_textarea,.hcb_wrap>pre{background:var(--hcb--bgc)!important;color:var(--hcb--c)!important;font-family:var(--hcb--ff)!important;font-size:var(--hcb--fz,14px)!important;line-height:1.5!important}.hcb_textarea.hcb_textarea,.hcb_wrap.hcb_wrap>pre{border:none;border-radius:0;box-sizing:border-box;display:block;margin:0!important;overflow-wrap:break-word;overflow-x:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static;tab-size:4;white-space:pre!important;width:100%}.hcb_textarea.hcb_textarea::-webkit-scrollbar,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar{border:none;height:6px}.hcb_textarea.hcb_textarea::-webkit-scrollbar-track,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_textarea.hcb_textarea::-webkit-scrollbar-thumb,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}.hcb_textarea.hcb_textarea{box-shadow:none;height:calc(1.5emvar(--hcb--code-linenum, 1) + var(--hcb--pY)2 + var(--hcb--scbarH, 0px));outline:none;resize:none}.hcb_textarea.hcb_textarea::placeholder{color:inherit;font-style:italic;opacity:.5}.hcb_textarea.hcb_textarea::-moz-placeholder,.hcb_textarea.hcb_textarea::-ms-input-placeholder,.hcb_textarea.hcb_textarea::-webkit-input-placeholder{color:inherit;font-style:italic;opacity:.5}.hcb_wrap>pre code{background:inherit!important;color:inherit!important;display:block;font-family:inherit!important;padding:0!important;tab-size:2}.hcb_linenum{border-right:1px solid;color:var(--hcb--line-numbers--c);height:calc(100% - var(--hcb--pY)*2);left:calc(var(--hcb--linenumW)/2 + .5em);position:absolute;top:var(--hcb--pY);width:0}.hcb_linenum>.hcb-startNum{word-wrap:normal;font:inherit;font-size:.95em;line-height:1.5;position:absolute;right:.5em;right:calc(.95em - 1px);top:0;translate:50%;white-space:nowrap}.hcb-block[data-show-linenum] .hcb_codewrap{padding-left:calc(var(--hcb--linenumW)/2 + 1em)}.hcb-block[data-show-linenum] .hcb_textarea{padding-left:calc(var(--hcb--linenumW)/2 - 1em)}.hcb-block:before,.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb-block[data-show-lang="0"]{--hcb--data-label:none}.hcb-block[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb-block[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}:root{--hcb--c:#f8f8f2;--hcb--bgc:#34352e;--hcb--data-label--c:#fff;--hcb--data-label--bgc:#111;--hcb--file-icon:url(../../assets/img/file-icon-dark.svg);--hcb--scbar-track--bgc:#ffffff1a;--hcb--scbar-thumb--bgc:#fff3}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/trunk/build/css/hcb-editor--light.css

r2886197	r2994656
1		.mce-content-body .hcb_wrap{margin:2em 0}.hcb_wrap.hcb_wrap{border:1px solid #f1f1f1;position:relative}.hcb_wrap.hcb_wrap pre,.hcb_wrap.hcb_wrap textarea.hcb_textarea{background:var(--hcb-color--bg,#f7f6f6);border:none;border-radius:0;box-sizing:border-box;color:var(--hcb-color--text,#1f1e1e);display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);line-height:1.8;margin:0!important;overflow-wrap:break-word;overflow-x:auto;padding:1.5em;position:static;-o-tab-size:2;tab-size:2;white-space:pre!important;width:100%}.hcb_wrap .hcb_codewrap{background:var(--hcb-color--bg,#f7f6f6);color:var(--hcb-color--text,#1f1e1e);padding-right:1em;position:relative}.hcb_wrap pre::-webkit-scrollbar,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar{border:none;height:8px}.hcb_wrap pre::-webkit-scrollbar-track,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar-track{background:#f7f7f7;border:none}.hcb_wrap pre::-webkit-scrollbar-thumb,.hcb_wrap textarea.hcb_textarea::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:4px}.hcb_wrap textarea.hcb_textarea{box-shadow:none;outline:none;resize:none}.hcb_wrap pre code{background:inherit!important;color:inherit!important;display:block;font-family:inherit!important;padding:0!important;-o-tab-size:2;tab-size:2}.hcb_wrap .hcb_controls{display:flex;flex-wrap:wrap;padding:8px}.hcb_wrap .hcb_controls:after{clear:both;content:"";display:block;height:0;visibility:hidden}.hcb_wrap .hcb_controls .components-base-control{flex-basis:50%;max-width:25rem}.hcb_wrap .hcb_controls .components-base-control select{width:100%}.hcb_wrap .hcb_controls .filename_input{flex-basis:20%;height:28px;line-height:28px;margin-left:auto;min-width:10em;padding:0 8px}.hcb_wrap .hcb_controls .num_input{flex-basis:20%;height:28px;line-height:28px;margin-left:16px;min-width:10em;padding:0 8px}.hcb_wrap .hcb_linenum{border-right:1px solid hsla(0,0%,59%,.5);display:none;height:calc(100% - 2em);left:1em;position:absolute;top:1em;width:0}.hcb-block[data-show-linenum] .hcb_linenum{display:block}.hcb-block[data-show-linenum] textarea.hcb_textarea{margin-left:2em!important;padding-left:.5em;width:calc(100% - 2em)}.hcb-block:before,.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb-block[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb-block[data-show-lang="0"]:not([data-file]):before{content:none}.wp-embed-responsive.editor-styles-wrapper .hcb_controls,[data-type="loos-hcb/code-block"]:not(.is-selected) .hcb_controls{display:none}body{--hcb-color--text:#1f1e1e;--hcb-color--text-shadow:#fff;--hcb-color--bg:#f7f6f6;--hcb-color--lang--text:#1f1e1e;--hcb-color--lang--bg:#dedede;--hcb-file-icon:url(../../assets/img/file-icon-light.svg)}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb-code-in-label{font-size:.95em;padding:2px;text-transform:lowercase}.hcb-datapreview{background-color:inherit;border-radius:var(--hcb--radius);bottom:var(--hcb--scbarH,0);color:inherit;display:flex;flex-wrap:wrap;font-size:12px;gap:4px;line-height:1.25;opacity:.75;padding:2px 4px;position:absolute;right:0}.mce-content-body .hcb_wrap{margin:2em 0}:root{--hcb--pY:2em;--hcb--pX:1.5em;--hcb--linenumW:3em}.hcb_wrap{position:relative}.hcb_wrap>.hcb_codewrap{background:var(--hcb--bgc);border-radius:var(--hcb--radius);color:var(--hcb--c);padding-right:.75em;position:relative}.hcb_codewrap,.hcb_textarea,.hcb_wrap>pre{background:var(--hcb--bgc)!important;color:var(--hcb--c)!important;font-family:var(--hcb--ff)!important;font-size:var(--hcb--fz,14px)!important;line-height:1.5!important}.hcb_textarea.hcb_textarea,.hcb_wrap.hcb_wrap>pre{border:none;border-radius:0;box-sizing:border-box;display:block;margin:0!important;overflow-wrap:break-word;overflow-x:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static;tab-size:4;white-space:pre!important;width:100%}.hcb_textarea.hcb_textarea::-webkit-scrollbar,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar{border:none;height:6px}.hcb_textarea.hcb_textarea::-webkit-scrollbar-track,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_textarea.hcb_textarea::-webkit-scrollbar-thumb,.hcb_wrap.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}.hcb_textarea.hcb_textarea{box-shadow:none;height:calc(1.5emvar(--hcb--code-linenum, 1) + var(--hcb--pY)2 + var(--hcb--scbarH, 0px));outline:none;resize:none}.hcb_textarea.hcb_textarea::placeholder{color:inherit;font-style:italic;opacity:.5}.hcb_textarea.hcb_textarea::-moz-placeholder,.hcb_textarea.hcb_textarea::-ms-input-placeholder,.hcb_textarea.hcb_textarea::-webkit-input-placeholder{color:inherit;font-style:italic;opacity:.5}.hcb_wrap>pre code{background:inherit!important;color:inherit!important;display:block;font-family:inherit!important;padding:0!important;tab-size:2}.hcb_linenum{border-right:1px solid;color:var(--hcb--line-numbers--c);height:calc(100% - var(--hcb--pY)*2);left:calc(var(--hcb--linenumW)/2 + .5em);position:absolute;top:var(--hcb--pY);width:0}.hcb_linenum>.hcb-startNum{word-wrap:normal;font:inherit;font-size:.95em;line-height:1.5;position:absolute;right:.5em;right:calc(.95em - 1px);top:0;translate:50%;white-space:nowrap}.hcb-block[data-show-linenum] .hcb_codewrap{padding-left:calc(var(--hcb--linenumW)/2 + 1em)}.hcb-block[data-show-linenum] .hcb_textarea{padding-left:calc(var(--hcb--linenumW)/2 - 1em)}.hcb-block:before,.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb-block[data-show-lang="0"]{--hcb--data-label:none}.hcb-block[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb-block[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/trunk/build/css/hcb.css

r2886197	r2994656
1		.hcb_wrap.hcb_wrap{display:block;margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap pre{-webkit-overflow-scrolling:touch;border-radius:0;box-sizing:border-box;display:block;font-family:var(--hcb-font-family,"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif);font-size:var(--hcb-font-size,14px);letter-spacing:.1px;line-height:1;margin:0;overflow:auto;padding:1.75em 1.5em;position:static}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap pre{word-wrap:normal;background:var(--hcb-color--bg,#f7f6f6);border:none;color:var(--hcb-color--text,#1f1e1e);-webkit-hyphens:none;hyphens:none;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px var(--hcb-color--text-shadow,#fff);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap code,.hcb_wrap.hcb_wrap span{box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:1.5;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb-color--highlight,hsla(24,20%,49%,.1));font-size:inherit;left:0;line-height:inherit;margin-top:1.75em;padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap .line-highlight:before,.hcb_wrap .line-highlight[data-end]:after{background-color:var(--hcb-color--highlight-bg,#b1aead);border-radius:0;box-sizing:border-box;color:var(--hcb-color--highlight-text,#f5f2f0);content:attr(data-start);font-size:12px;font-weight:700;left:0;line-height:inherit;min-width:1.5em;padding:1px 2px;position:absolute;text-align:center;text-shadow:none;top:0;vertical-align:middle}.hcb_wrap .line-highlight[data-end]:after{bottom:0;content:attr(data-end);top:auto}.hcb_wrap .line-numbers .line-highlight:after,.hcb_wrap .line-numbers .line-highlight:before{content:none}.hcb_wrap pre.line-numbers{counter-reset:linenumber;padding-left:3.75em;position:static}.hcb_wrap pre.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers .line-numbers-rows{border-right:1px solid var(--hcb-color--line-numbers,#999);font-size:inherit;left:-3.75em;letter-spacing:-1px;pointer-events:none;position:absolute;top:-2px;-webkit-user-select:none;user-select:none;width:3em}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;pointer-events:none}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb-color--line-numbers,#999);content:counter(linenumber);display:block;padding-right:.8em;text-align:right}.hcb_wrap pre:before{background-color:var(--hcb-color--lang--bg,#dedede);box-sizing:border-box;color:var(--hcb-color--lang--text,#1f1e1e);content:attr(data-lang);font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap .hcb-clipboard+pre:before{right:26px}.hcb_wrap pre[data-file]:before{background-image:var(--hcb-file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap pre[data-show-lang="0"]:not([data-file]):before{content:none}.hcb_wrap .hcb-clipboard{background-color:hsla(0,0%,100%,.8);background-image:url(../../assets/img/clipborad.svg);background-position:50%;background-repeat:no-repeat;background-size:16px auto;border:none;border-radius:1px;box-sizing:border-box;height:20px;padding:0;position:absolute;right:0;text-align:center;top:0;width:20px;z-index:1}.hcb_wrap .hcb-clipboard.-done{background-image:url(../../assets/img/copied.svg)}.hcb_wrap .hcb-clipboard.-done:before{bottom:100%;content:"Copied!";font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;position:absolute;right:0}.hcb_wrap pre::-webkit-scrollbar{height:6px}.hcb_wrap pre::-webkit-scrollbar-track{background:var(--hcb-color--scrollbar-track,hsla(0,0%,59%,.1));border:none}.hcb_wrap pre::-webkit-scrollbar-thumb{background:var(--hcb-color--scrollbar-thumb,hsla(0,0%,59%,.25));border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}@media screen and (max-width:599px){.hcb_wrap.hcb_wrap pre{font-size:var(--hcb-font-size--mobile,13px)}}
	1	:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75em;--hcb--pX:1.5em;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--c:#1f1e1e;--hcb--tsh:unset;--hcb--bgc:#f8f6f6;--hcb--data-label--c:#1f1e1e;--hcb--data-label--bgc:#e8e8e8;--hcb--line-numbers--c:#999;--hcb--highlight-color:#9678641a;--hcb--file-icon:url(../../assets/img/file-icon-light.svg);--hcb--scbar-track--bgc:#9696961a;--hcb--scbar-thumb--bgc:#96969640}.hcb_wrap.hcb_wrap{display:block;font-size:var(--hcb--fz,14px);margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap>pre{-webkit-overflow-scrolling:touch;border-radius:var(--hcb--radius,0);box-sizing:border-box;display:block;font-family:var(--hcb--ff);font-size:inherit;letter-spacing:.1px;line-height:1.5;margin:0;overflow:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static}.hcb_wrap.hcb_wrap>pre,.hcb_wrap.hcb_wrap>pre>code{word-wrap:normal;background:var(--hcb--bgc);border:none;color:var(--hcb--c);-webkit-hyphens:none;hyphens:none;tab-size:4;text-align:left;text-shadow:var(--hcb--tsh);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap :is(code,span){box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}.hcb_wrap .line-highlight{background:var(--hcb--highlight-color);font-size:inherit;left:0;line-height:inherit;margin-top:var(--hcb--pY);padding:0;pointer-events:none;position:absolute;right:0;white-space:pre}.hcb_wrap>.prism.line-numbers{counter-reset:linenumber;padding-left:calc(var(--hcb--pX) + var(--hcb--linenumW));position:static}.hcb_wrap>.prism.line-numbers>code{position:relative;white-space:inherit}.hcb_wrap .line-numbers-rows{border-right:1px solid var(--hcb--line-numbers--c);font-size:inherit;left:calc(-1px - var(--hcb--linenumW) - var(--hcb--pX)/2);min-width:var(--hcb--linenumW);pointer-events:none;position:absolute;top:-.125em;-webkit-user-select:none;user-select:none}.hcb_wrap .line-numbers-rows>span{counter-increment:linenumber;display:block;letter-spacing:-.25px;pointer-events:none;text-align:center}.hcb_wrap .line-numbers-rows>span:before{color:var(--hcb--line-numbers--c);content:counter(linenumber);display:block}.hcb_wrap>pre::-webkit-scrollbar{height:6px}.hcb_wrap>pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}.hcb_wrap>pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}.hcb_wrap>pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}.hcb_wrap>pre[data-show-lang="0"]{--hcb--data-label:none}.hcb_wrap>pre[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}.hcb_wrap>pre[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap{--hcb-clipbtn-opacity:0}.hcb-clipboard:focus-visible,.hcb_wrap:hover{--hcb-clipbtn-opacity:100}.hcb-clipboard{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:url(../../assets/img/clipboard-to-copy.svg) no-repeat 50%/64% auto;background-color:#fafafacc;border:none;border-radius:3px;box-shadow:0 1px 2px #3d3d3d40;box-sizing:border-box;color:#000;height:2.25em;opacity:var(--hcb-clipbtn-opacity);padding:0;position:absolute;right:8px;text-align:center;top:calc(var(--hcb--btn-offset, 0px) + 8px);transition:opacity .25s;width:2.25em;z-index:2}[data-show-lang="0"]+.hcb-clipboard{--hcb--btn-offset:0px}[data-show-lang="1"]+.hcb-clipboard{--hcb--btn-offset:20px}.hcb-clipboard.-done{background-image:url(../../assets/img/clipboard-copied.svg)}.hcb-clipboard.-done:before{background-color:inherit;border-radius:8px;color:inherit;content:"✓Copied";display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;padding:2px 4px 2px 2px;position:absolute;right:calc(4px + 100%);top:50%;translate:0 -50%}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}

highlighting-code-block/trunk/build/js/code-block/index.asset.php

r2886197	r2994656
1		<?php return array('dependencies' => array('~~wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'f4c02a0a618beab3fcd5f56b8c4dc46b~~');
	1	<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'eee4433c3b38834bd373');

highlighting-code-block/trunk/build/js/code-block/index.js

r2886197	r2994656
1		!function(){var e={643:function(e,t,a){"use strict";var n=window.wp.blocks,l=window.wp.element,o=window.wp.i18n,s=window.wp.blockEditor,r=window.wp.components,c=(0,l.memo)((e=>{let{attributes:t,setAttributes:a}=e;const{isLineShow:n,isShowLang:c}=t;return(0,l.createElement)(s.InspectorControls,null,(0,l.createElement)(r.PanelBody,{title:(0,o.__)("HCB settings","loos-hcb"),initialOpen:!0},(0,l.createElement)(r.RadioControl,{label:(0,o.__)("Settings for displaying the number of lines","loos-hcb"),selected:n,options:[{label:(0,o.__)("Do not set individually","loos-hcb"),value:"undefined"},{label:(0,o.__)("Display row count","loos-hcb"),value:"on"},{label:(0,o.__)("Do not display row count","loos-hcb"),value:"off"}],onChange:e=>{a({isLineShow:e})}}),(0,l.createElement)(r.RadioControl,{label:(0,o.__)("Settings for displaying language name","loos-hcb"),selected:c,options:[{label:(0,o.__)("Do not set individually","loos-hcb"),value:""},{label:(0,o.__)("Display language","loos-hcb"),value:"1"},{label:(0,o.__)("Do not display language","loos-hcb"),value:"0"}],onChange:e=>{a({isShowLang:e})}})))}));function i(e){const t=e.value.match(/\r\n\|\n/g);let a;a=null!==t?t.length+1:1,e.style.height=1.8*a+1.6+2+"em"}function u(e){return e?e.replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):e}var p=a(184),d=a.n(p);let m=window.hcbLangs;"object"!=typeof m&&(m={html:"HTML",css:"CSS",scss:"SCSS",js:"JavaScript",ts:"TypeScript",php:"PHP",ruby:"Ruby",python:"Python",swift:"Swift",c:"C",csharp:"C#",cpp:"C++",objectivec:"Objective-C",sql:"SQL",json:"JSON",bash:"Bash",git:"Git"});const g=[{value:"",label:"- Lang Select -"}];Object.keys(m).forEach((e=>{g.push({value:e,label:m[e]})}));var h=JSON.parse('{"u2":"loos-hcb/code-block"}'),f=(0,l.createElement)("svg",{x:"0px",y:"0px",viewBox:"0 0 512 512"},(0,l.createElement)("path",{d:"M48,346.8h34.6v51h31.2v-51h34.6v135.8h-34.6V428H82.6v54.5H48V346.8z"}),(0,l.createElement)("path",{d:"M268.1,344.3c17.5,0,31.6,8.3,41,17.3l-19,21.6c-6.2-5.6-12.8-9.2-22-9.2c-17.3,0-30.5,15.2-30.5,40.4 c0,26.1,13.2,40.6,32,40.6c9,0,16.4-4.5,22.4-11.1l19,21.1c-11.5,13.4-26.7,19.9-43.4,19.9c-35.3,0-65.4-23.1-65.4-69.4 C202.1,370.3,231.5,344.3,268.1,344.3z"}),(0,l.createElement)("path",{d:"M363,346.8h44.4c28.2,0,50.6,7.1,50.6,33.7c0,11.8-7.1,25.4-22.9,29.5v0.8c19.2,3.6,29,13.7,29,31.8 c0,28-23.1,40-52.6,40H363V346.8z M406.3,400.6c12.6,0,17.7-6,17.7-14.9c0-8.6-5.3-12.2-17.7-12.2h-8.5v27.1H406.3z M408.9,455.8 c14.7,0,21.1-5.5,21.1-16.2c0-10.5-6.4-14.9-21.1-14.9h-11.1v31H408.9z"}),(0,l.createElement)("polygon",{points:"209.8,56.9 184,31 39.3,175.7 39.3,175.7 39.3,175.7 184,320.4 209.8,294.6 91,175.7"}),(0,l.createElement)("polygon",{points:"302.2,56.9 328,31 472.7,175.7 472.7,175.7 472.7,175.7 328,320.4 302.2,294.6 421,175.7"})),b=[{supports:{className:!1},attributes:{code:{type:"string",source:"text",selector:"code"},className:{type:"string",default:""},langType:{type:"string",default:""},langName:{type:"string",default:""},fileName:{type:"string",default:""},dataLineNum:{type:"string",default:""},isLineShow:{type:"string",default:"undefined"},isShowLang:{type:"string",default:""}},save:e=>{let{attributes:t}=e;const{code:a,fileName:n,langName:o,dataLineNum:r,isLineShow:c,isShowLang:i}=t,p=t.langType\|\|"plain";let m=d()("prism",`lang-${p}`);return"undefined"!==c&&(m=d()(m,`${c}-numbers`)),(0,l.createElement)("div",{className:"hcb_wrap"},(0,l.createElement)("pre",{className:m,"data-file":n\|\|null,"data-lang":o\|\|null,"data-line":r\|\|null,"data-show-lang":i\|\|null},(0,l.createElement)(s.RichText.Content,{tagName:"code",value:u(a)})))}},{supports:{className:!1},attributes:{code:{type:"string",source:"text",selector:"code"},className:{type:"string",default:""},langType:{type:"string",default:"plane"},langName:{type:"string",default:""},fileName:{type:"string",default:""},dataLineNum:{type:"string",default:""},isLineShow:{type:"string",default:"undefined"},isShowLang:{type:"string",default:""}},migrate:e=>("plane"===e.langType&&(e.langType=""),e),save:e=>{let{attributes:t}=e;const{code:a,langType:n,fileName:o,langName:r,dataLineNum:c,isLineShow:i,isShowLang:p}=t,d="prism "+i+"-numbers lang-"+n;return(0,l.createElement)("div",{className:"hcb_wrap"},(0,l.createElement)("pre",{className:d,"data-file":o\|\|null,"data-lang":r\|\|null,"data-line":c\|\|null,"data-show-lang":p\|\|null},(0,l.createElement)(s.RichText.Content,{tagName:"code",value:u(a)})))}}];(0,n.registerBlockType)(h.u2,{icon:f,transforms:{from:[{type:"block",blocks:["core/code"],transform:e=>(0,n.createBlock)("loos-hcb/code-block",{code:e.content})}],to:[{type:"block",blocks:["core/code"],transform:e=>(0,n.createBlock)("core/code",{content:e.code})}]},edit:e=>{let{attributes:t,setAttributes:a,clientId:n}=e;const u=(0,l.useRef)(),{code:p,fileName:h,langName:f,dataLineNum:b,isShowLang:v,isLineShow:y}=t,w=d()("hcb_wrap","hcb-block");(0,l.useEffect)((()=>{const e=t.className;if(!e)return;const n=e.split(" "),l=[...new Set(n)];a({className:d()(l)})}),[]),(0,l.useEffect)((()=>{const{ownerDocument:e}=u.current;e&&i(e.querySelector(`#block-${n} .hcb_textarea`))}),[n,p]);const N=window.hcbEditorVars?.showLang,S=window.hcbEditorVars?.showLinenum;let E="0";("1"===v\|\|""===v&&"on"===N)&&(E="1");let _=null;("on"===y\|\|"undefined"===y&&"on"===S)&&(_="1");const L=(0,s.useBlockProps)({ref:u,className:w,"data-file":h\|\|null,"data-lang":f\|\|null,"data-show-lang":E,"data-show-linenum":_});return(0,l.createElement)(l.Fragment,null,(0,l.createElement)(c,{attributes:t,setAttributes:a}),(0,l.createElement)("div",L,(0,l.createElement)("div",{className:"hcb_codewrap"},(0,l.createElement)("div",{className:"hcb_linenum"}),(0,l.createElement)("textarea",{className:"hcb_textarea",placeholder:"Your Code...",value:p,onChange:e=>{a({code:e.target.value}),i(e.target)}})),(0,l.createElement)("div",{className:"hcb_controls"},(0,l.createElement)(r.SelectControl,{value:t.langType,options:g,onChange:e=>{a(""===e?{langType:"",langName:""}:{langType:e,langName:m[e]})}}),(0,l.createElement)("input",{type:"text",className:"filename_input",value:h,placeholder:(0,o.__)("file name","loos-hcb"),onChange:e=>{a({fileName:e.target.value})}}),(0,l.createElement)("input",{type:"text",className:"num_input",value:b,placeholder:(0,o.__)('"data-line" value',"loos-hcb"),onChange:e=>{a({dataLineNum:e.target.value})}}))))},save:e=>{let{attributes:t}=e;const{code:a,fileName:n,langName:o,dataLineNum:r,isLineShow:c,isShowLang:i}=t,p=t.langType\|\|"plain",m=d()("prism",`${c}-numbers`,`lang-${p}`),g=s.useBlockProps.save({className:"hcb_wrap"});return(0,l.createElement)("div",g,(0,l.createElement)("pre",{className:m,"data-file":n\|\|null,"data-lang":o\|\|null,"data-line":r\|\|null,"data-show-lang":i\|\|null},(0,l.createElement)(s.RichText.Content,{tagName:"code",value:u(a)})))},deprecated:b})},184:function(e,t){var a;!function(){"use strict";var n={}.hasOwnProperty;function l(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var o=typeof a;if("string"===o\|\|"number"===o)e.push(a);else if(Array.isArray(a)){if(a.length){var s=l.apply(null,a);s&&e.push(s)}}else if("object"===o)if(a.toString===Object.prototype.toString)for(var r in a)n.call(a,r)&&a[r]&&e.push(r);else e.push(a.toString())}}return e.join(" ")}e.exports?(l.default=l,e.exports=l):void 0===(a=function(){return l}.apply(t,[]))\|\|(e.exports=a)}()}},t={};function a(n){var l=t[n];if(void 0!==l)return l.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,a),o.exports}a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a(643)}();
	1	(()=>{var e={184:(e,t)=>{var a;!function(){"use strict";var l={}.hasOwnProperty;function n(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var o=typeof a;if("string"===o\|\|"number"===o)e.push(a);else if(Array.isArray(a)){if(a.length){var r=n.apply(null,a);r&&e.push(r)}}else if("object"===o){if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]")){e.push(a.toString());continue}for(var c in a)l.call(a,c)&&a[c]&&e.push(c)}}}return e.join(" ")}e.exports?(n.default=n,e.exports=n):void 0===(a=function(){return n}.apply(t,[]))\|\|(e.exports=a)}()}},t={};function a(l){var n=t[l];if(void 0!==n)return n.exports;var o=t[l]={exports:{}};return e[l](o,o.exports,a),o.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";const e=window.wp.blocks,t=window.React,l=window.wp.i18n,n=window.wp.blockEditor,o=window.wp.components,r=window.wp.element;var c=a(184),s=a.n(c);const i=window.hcbVars?.showLang,u=window.hcbVars?.showLinenum;let d=window?.hcbLangs\|\|null;const p=[["plain","Plain"],...Object.entries(d)],m=[{value:"",label:"Plain"},...Object.entries(d).map((([e,t])=>({value:e,label:t})))],g=(e="")=>{const t=e.match(/\r\n\|\n/g);return null!==t?t.length+1:1};function h(e){return e?e.replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):e}const b=JSON.parse('{"u2":"loos-hcb/code-block"}'),f=(0,t.createElement)("svg",{x:"0px",y:"0px",viewBox:"0 0 512 512"},(0,t.createElement)("g",null,(0,t.createElement)("path",{d:"M54.4,348.2H89v51h31.2v-51h34.6V484h-34.6v-54.6H89v54.5H54.4V348.2z"}),(0,t.createElement)("path",{d:"M267.5,345.7c17.5,0,31.6,8.3,41,17.3l-19,21.6c-6.2-5.6-12.8-9.2-22-9.2c-17.3,0-30.5,15.2-30.5,40.4 c0,26.1,13.2,40.6,32,40.6c9,0,16.4-4.5,22.4-11.1l19,21.1c-11.5,13.4-26.7,19.9-43.4,19.9c-35.3,0-65.4-23.1-65.4-69.4 C201.6,371.7,230.9,345.7,267.5,345.7z"}),(0,t.createElement)("path",{d:"M356.5,348.2h44.4c28.2,0,50.6,7.1,50.6,33.7c0,11.8-7.1,25.4-22.9,29.5v0.8c19.2,3.6,29,13.7,29,31.8 c0,28-23.1,40-52.6,40h-48.5V348.2z M399.8,402c12.6,0,17.7-6,17.7-14.9c0-8.6-5.3-12.2-17.7-12.2h-8.5V402H399.8z M402.3,457.2 c14.7,0,21.1-5.5,21.1-16.2c0-10.5-6.4-14.9-21.1-14.9h-11.1v31h11.1V457.2z"})),(0,t.createElement)("polygon",{points:"172,311.6 195,288.6 76.2,165.7 195,42.9 172,19.8 30.1,165.7 "}),(0,t.createElement)("polygon",{points:"340,19.8 317,42.9 435.8,165.7 317,288.6 340,311.6 481.9,165.7 "})),y=[{supports:{className:!1},attributes:{code:{type:"string",source:"text",selector:"code"},className:{type:"string",default:""},langType:{type:"string",default:""},langName:{type:"string",default:""},fileName:{type:"string",default:""},dataLineNum:{type:"string",default:""},isLineShow:{type:"string",default:"undefined"},isShowLang:{type:"string",default:""}},save:({attributes:e})=>{const{code:a,fileName:l,langName:o,dataLineNum:r,isLineShow:c,isShowLang:i}=e,u=e.langType\|\|"plain";let d=s()("prism",`lang-${u}`);return"undefined"!==c&&(d=s()(d,`${c}-numbers`)),(0,t.createElement)("div",{className:"hcb_wrap"},(0,t.createElement)("pre",{className:d,"data-file":l\|\|null,"data-lang":o\|\|null,"data-line":r\|\|null,"data-show-lang":i\|\|null},(0,t.createElement)(n.RichText.Content,{tagName:"code",value:h(a)})))}},{supports:{className:!1},attributes:{code:{type:"string",source:"text",selector:"code"},className:{type:"string",default:""},langType:{type:"string",default:"plane"},langName:{type:"string",default:""},fileName:{type:"string",default:""},dataLineNum:{type:"string",default:""},isLineShow:{type:"string",default:"undefined"},isShowLang:{type:"string",default:""}},migrate:e=>("plane"===e.langType&&(e.langType=""),e),save:({attributes:e})=>{const{code:a,langType:l,fileName:o,langName:r,dataLineNum:c,isLineShow:s,isShowLang:i}=e,u="prism "+s+"-numbers lang-"+l;return(0,t.createElement)("div",{className:"hcb_wrap"},(0,t.createElement)("pre",{className:u,"data-file":o\|\|null,"data-lang":r\|\|null,"data-line":c\|\|null,"data-show-lang":i\|\|null},(0,t.createElement)(n.RichText.Content,{tagName:"code",value:h(a)})))}}];(0,e.registerBlockType)(b.u2,{icon:f,transforms:{from:[{type:"block",blocks:["core/code"],transform:t=>(0,e.createBlock)("loos-hcb/code-block",{code:t.content})}],to:[{type:"block",blocks:["core/code"],transform:t=>(0,e.createBlock)("core/code",{content:t.code})}]},edit:({attributes:e,setAttributes:a,clientId:c})=>{const h=(0,r.useRef)(),{className:b,code:f="",langType:y,fileName:v,langName:w,dataLineNum:N,dataStart:E,isShowLang:_,isLineShow:S}=e,[L,x]=(0,r.useState)(g(f)),C=s()("hcb-block","hcb_wrap");(0,r.useEffect)((()=>{const e=b\|\|"";if(!e)return;const t=e.split(" "),l=[...new Set(t)];a({className:s()(l)})}),[b,a]),(0,r.useEffect)((()=>{const{ownerDocument:e}=h.current;if(e){const t=e.querySelector(`#block-${c}`),a=t.querySelector(".hcb_textarea");if(t.style.setProperty("--hcb--code-linenum",L),a.scrollWidth>a.offsetWidth){const e=a.offsetHeight-a.clientHeight;t.style.setProperty("--hcb--scbarH",e+"px")}}}),[c,L]);let T="0";("1"===_\|\|""===_&&"on"===i)&&(T="1");let k=null;("on"===S\|\|"undefined"===S&&"on"===u)&&(k="1");const P=(0,n.useBlockProps)({ref:h,className:C,"data-file":v\|\|null,"data-lang":w\|\|null,"data-show-lang":T,"data-show-linenum":k}),B=[...p];return y\|\|B.shift(),(0,t.createElement)(t.Fragment,null,(0,t.createElement)(n.BlockControls,null,(0,t.createElement)(o.ToolbarGroup,{isCollapsed:!0,icon:(0,t.createElement)(t.Fragment,null,w\|\|(0,l.__)("Language","loos-hcb")),title:"Lnaguage",controls:B.map((([e,t])=>({key:e,isActive:e===y,title:t,onClick:()=>{a("plain"===e?{langType:"",langName:""}:{langType:e,langName:t})}})))})),(0,t.createElement)(n.InspectorControls,null,(0,t.createElement)(o.PanelBody,{title:(0,l.__)("HCB settings","loos-hcb"),initialOpen:!0},(0,t.createElement)(o.SelectControl,{label:(0,l.__)("Language","loos-hcb"),value:e.langType,options:m,onChange:e=>{a(""===e?{langType:"",langName:""}:{langType:e,langName:d[e]})}}),(0,t.createElement)(o.SelectControl,{label:(0,l.__)("Display number of rows","loos-hcb"),value:S,options:[{label:(0,l.__)("Do not set individually","loos-hcb"),value:"undefined"},{label:(0,l.__)("Display row count","loos-hcb"),value:"on"},{label:(0,l.__)("Do not display row count","loos-hcb"),value:"off"}],onChange:e=>{a({isLineShow:e})}}),(0,t.createElement)(o.SelectControl,{label:(0,l.__)("Display language name","loos-hcb"),value:_,options:[{label:(0,l.__)("Do not set individually","loos-hcb"),value:""},{label:(0,l.__)("Display language","loos-hcb"),value:"1"},{label:(0,l.__)("Do not display language","loos-hcb"),value:"0"}],onChange:e=>{a({isShowLang:e})}}),(0,t.createElement)(o.TextControl,{label:(0,l.__)("File name","loos-hcb"),value:v,onChange:e=>{a({fileName:e})}}),(0,t.createElement)(o.TextControl,{label:(0,t.createElement)(t.Fragment,null,(0,l.__)("Highlight Number","loos-hcb")+" ( ",(0,t.createElement)("code",{className:"hcb-code-in-label"},"[data-line]")," )"),value:N,onChange:e=>{a({dataLineNum:e})}}),(0,t.createElement)(o.TextControl,{type:"number",label:(0,t.createElement)(t.Fragment,null,(0,l.__)("First line number","loos-hcb")+" ( ",(0,t.createElement)("code",{className:"hcb-code-in-label"},"[data-start]")," )"),value:E\|\|1,onChange:e=>{a({dataStart:parseInt(e\|\|1)})},style:{opacity:k?1:.5},disabled:!k}))),(0,t.createElement)("div",{...P},(0,t.createElement)("div",{className:"hcb_codewrap"},k&&(0,t.createElement)("div",{className:"hcb_linenum"},(0,t.createElement)("div",{className:"hcb-startNum"},E)),(0,t.createElement)("textarea",{className:"hcb_textarea",placeholder:"Your Code...",value:f,onChange:e=>{const t=e.target.value;a({code:t});const l=g(t);L!==l&&x(l)}}),N&&(0,t.createElement)("div",{className:"hcb-datapreview"},(0,t.createElement)("div",{className:"hcb-datapreview__items"},`{${N}}`)))))},save:({attributes:e})=>{const{code:a,fileName:l,langName:o,dataLineNum:r,dataStart:c,isLineShow:i,isShowLang:u}=e,d=e.langType\|\|"plain",p=s()("prism",`${i}-numbers`,`lang-${d}`),m=n.useBlockProps.save({className:"hcb_wrap"});return(0,t.createElement)("div",{...m},(0,t.createElement)("pre",{className:p,"data-file":l\|\|null,"data-lang":o\|\|null,"data-line":r\|\|null,"data-start":1===c?null:c,"data-show-lang":u\|\|null},(0,t.createElement)(n.RichText.Content,{tagName:"code",value:h(a)})))},deprecated:y})})()})();

highlighting-code-block/trunk/build/js/hcb_script.asset.php

r2886197	r2994656
1		<?php return array('dependencies' => array(), 'version' => '~~a41ce2112184d183ef84f00096e88ad5~~');
	1	<?php return array('dependencies' => array(), 'version' => 'ba4f9f2286907745024d');

highlighting-code-block/trunk/build/js/hcb_script.js

r2886197	r2994656
1		document.addEventListener("DOMContentLoaded",(function(){const t=document.querySelectorAll(".token.keyword");for(let e=0;e<t.length;e++){const n=t[e];-1!==["function","def","class"].indexOf(n.textContent)?n.classList.add("def"):"this"===n.textContent&&n.classList.add("this")}const e=document.querySelectorAll(".line-highlight");for(let t=0;t<e.length;t++){const n=e[t];if(!n.parentNode.classList.contains("line-numbers")){const t=1.5*(n.getAttribute("data-start")-1);n.style.top=t+"em"}}!function(){if(!window.ClipboardJS)return;if(!window.hcbVars?.showCopyBtn)return;let t=1;const e=document.querySelectorAll(".hcb_wrap");for(let n=0;n<e.length;n++){const o=e[n],c=o.querySelector("code");if(null===c)continue;const s=document.createElement("button");s.classList.add("hcb-clipboard"),s.setAttribute("data-clipboard-target",'[data-hcb-clip="'+t+'"]'),s.setAttribute("data-clipboard-action","copy"),s.setAttribute("aria-label",window.hcbVars?.copyBtnLabel\|\|""),o.~~pre~~pend(s),c.setAttribute("data-hcb-clip",t),t++}new ClipboardJS(".hcb-clipboard").on("success",(function(t){const e=t.trigger;e.classList.add("-done"),setTimeout((()=>{e.classList.remove("-done")}),5e3)}))}()}));
	1	document.addEventListener("DOMContentLoaded",(function(){const t=document.querySelectorAll(".token.keyword");for(let e=0;e<t.length;e++){const n=t[e];-1!==["function","def","class"].indexOf(n.textContent)?n.classList.add("def"):"this"===n.textContent&&n.classList.add("this")}const e=document.querySelectorAll(".line-highlight");for(let t=0;t<e.length;t++){const n=e[t];if(!n.parentNode.classList.contains("line-numbers")){const t=1.5*(n.getAttribute("data-start")-1);n.style.top=t+"em"}}!function(){if(!window.ClipboardJS)return;if(!window.hcbVars?.showCopyBtn)return;let t=1;const e=document.querySelectorAll(".hcb_wrap");for(let n=0;n<e.length;n++){const o=e[n],c=o.querySelector("code");if(null===c)continue;const s=document.createElement("button");s.classList.add("hcb-clipboard"),s.setAttribute("data-clipboard-target",'[data-hcb-clip="'+t+'"]'),s.setAttribute("data-clipboard-action","copy"),s.setAttribute("aria-label",window.hcbVars?.copyBtnLabel\|\|""),o.append(s),c.setAttribute("data-hcb-clip",t),t++}new ClipboardJS(".hcb-clipboard").on("success",(function(t){const e=t.trigger;e.classList.add("-done"),setTimeout((()=>{e.classList.remove("-done")}),5e3)}))}()}));

highlighting-code-block/trunk/class/loos_hcb.php

-                      r2886197
+                      r2994656
         // Font size
         $inline_css .= ':root{--hcb-font-size: ' . $HCB['fontsize_pc'] . '}';
         $inline_css .= ':root{--hcb-font-size--mobile: ' . $HCB['fontsize_sp'] . '}';
+        $inline_css .= ':root{--hcb--fz--base: ' . $HCB['fontsize_pc'] . '}';
+        $inline_css .= ':root{--hcb--fz--mobile: ' . $HCB['fontsize_sp'] . '}';
         // Font family
         if ( $HCB['font_family'] ) {
             $inline_css .= ':root{--hcb-font-family:' . $HCB['font_family'] . '}';
+            $inline_css .= ':root{--hcb--ff:' . $HCB['font_family'] . '}';
+        }
         // Code Lang
+        // Code Lang (Default)
         if ( 'off' === $HCB['show_lang'] ) {
             $inline_css .= '.hcb_wrap pre:not([data-file]):not([data-show-lang])::before{content: none;}';
+            $inline_css .= '.hcb_wrap{--hcb--data-label: none;--hcb--btn-offset: 0px;}';
+        }

highlighting-code-block/trunk/class/loos_hcb_scripts.php

-                      r2886197
+                      r2994656
     public static function register_hcb_block() {
         // ブロックのスクリプト登録 ( memo: wp_add_inline_script() で紐付けるために wp_register_script 必要 )
+        // ブロックのスクリプト登録 ( memo: wp_add_inline_script() でグローバル変数を紐付けるために wp_register_script() で登録している )
         $asset = include LOOS_HCB_PATH . '/build/js/code-block/index.asset.php';
         wp_register_script(
 …
         // ブロックの登録
+        register_block_type_from_metadata( LOOS_HCB_PATH . '/src/js/code-block' );
+        register_block_type_from_metadata( LOOS_HCB_PATH . '/build/js/code-block' );
+        // エディタに渡すグローバル変数
+        wp_add_inline_script(
+            'hcb-code-block',
+            'var hcbLangs = ' . self::get_lang_obj_str() . ';',
+            'before'
+        );
+        wp_localize_script( 'hcb-code-block', 'hcbVars', [
+            'showLang'    => LOOS_HCB::$settings['show_lang'],
+            'showLinenum' => LOOS_HCB::$settings['show_linenum'],
+        ] );
+    }
 …
         // 翻訳jsonファイルの読み込み
         wp_set_script_translations( 'hcb-blocks', 'loos-hcb', LOOS_HCB_PATH . '/languages' );
-        // 管理画面側に渡すグローバル変数
-        wp_localize_script( 'hcb-blocks', 'hcbEditorVars', [
-            'showLang'    => LOOS_HCB::$settings['show_lang'],
-            'showLinenum' => LOOS_HCB::$settings['show_linenum'],
-        ] );
+    }
 …
      * TinyMCEでも必要なので admin_head にフックさせている。
      */
+    public static function hook_admin_head() {
+    public static function get_lang_obj_str() {
+        $langs = LOOS_HCB::$settings['support_langs'];
+        $langs = LOOS_HCB::$settings['support_langs'];
+        $langs = mb_convert_kana( $langs, 'as' ); //全角の文字やスペースがあれば半角に直す
+        // Replace full-width characters and spaces with half-width equivalents
+        $langs = str_replace(
+            ['　', '＂', '＇', '：', '；', '，' ],
+            [' ', '"', "'", ':', ';', ',' ],
+            $langs
+        );
         $langs = str_replace( ["\r\n", "\r", "\n" ], '', $langs );
         $langs = trim( $langs, ',' );
+        $code = 'var hcbLangs = {' . trim( $langs ) . '};';
+        return '{' . trim( $langs ) . '}';
+    }
         // for tinyMCE
         echo '<script id="hcb-langs">' . wp_kses( $code, [] ) . '</script>' . PHP_EOL;
         // for Gutenberg
         wp_add_inline_script( 'hcb-code-block', $code, 'before' );
+    /**
+     * Add code to Admin Head. (for TinyMCE)
+     */
+    public static function hook_admin_head() {
+        echo '<script id="hcb-langs">var hcbLangs = ' . wp_kses( self::get_lang_obj_str(), [] ) . ';</script>' . PHP_EOL;
+    }
+}

highlighting-code-block/trunk/highlighting-code-block.php

r2886197	r2994656
4	4	* Plugin URI: https://wordpress.org/plugins/highlighting-code-block/
5	5	* Description: Add code block with syntax highlighting using prism.js. (Available for Gutenberg and Classic Editor)
6		* Version: ~~1.7~~.0
	6	* Version: 2.0.0
7	7	* Requires at least: 5.6
8	8	* Author: LOOS, Inc.

highlighting-code-block/trunk/languages/loos-hcb-ja-hcb-blocks.json

r2359718	r2994656
1		{"domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural_forms":"nplurals=1; plural=0;","lang":"ja_JP"},"HCB settings":["HCB設定"],"Settings for displaying the number of lines":["行数の表示に関する設定"],"Do not set individually":["個別で設定はしない"],"Display row count":["行数を表示する"],"Do not display row count":["行数を表示しない"],"Settings for displaying language name":["言語名の表示に関する設定"],"Display language":["言語を表示する"],"Do not display language":["言語を表示しない"],"\"data-line\" value":["data-line属性値"],"file name":["ファイル名"],"[HCB] Settings":["[HCB] 設定"],"Highlighting Code Block settings":["Highlighting Code Block 設定"],"Basic settings":["基本設定"],"Display language name":["言語の表示"],"Display language name in code block":["コードブロックに言語名を表示する"],"If checked, the language type is displayed in the code on the site display side.":["チェックすると、サイト表示側のコードに言語の種類が表示されます。"],"Display settings for the number of rows":["行数の表示設定"],"Show line count in code block":["コードブロックに行数を表示する"],"If checked, the number of lines will be displayed on the left end of the code on the site display side.":["チェックすると、サイト表示側のコードの左端に行数が表示されます。"],"Font smoothing":["フォントスムージング"],"Turn on font smoothing":["フォントスムージングをオンにする"],"Add %s and %s to the code block.":["コードブロックに %s と %s が追加されます。"],"Cord coloring (front side)":["コードカラーリング（フロント側）"],"Code coloring (editor side)":["コードカラーリング（エディター側）"],"Font Size":["フォントサイズ"],"\"Font-family\" in code":["コードの “font-family”"],"Default":["デフォルト"],"Advanced settings":["高度な設定"],"Language set to use":["使用する言語セット"],"Write in the format of %s, separated by \",\" (comma).":["%s の形式で、”,”（カンマ）区切りで記述してください。"],"class-key:\"language-name\"":["クラスキー:”言語名”"],"\"class-key\" is the class name used in prism.js (the part corresponding to \"◯◯\" in \"lang- ◯◯\")":["「クラスキー」は、prism.jsで使用されるクラス名（「lang-◯◯」の「◯◯」に該当する部分)です。"],"* If you use a language that is not supported by default, please use it together with \"Original prism.js\" setting.":["※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」設定と併用してください。"],"Original coloring file":["独自カラーリングファイル"],"Load your own CSS file for code coloring.":["あなたが用意したコードカラーリング用のCSSファイルを読み込みます。"],"Original prism.js":["独自prism.js"],"You can use the prism.js file corresponding to your own language set.":["自分専用の言語セットに対応したprism.jsファイルを使用できます。"],"help":["ヘルプ"],"When you use each original file, please upload it in the theme folder.":["各独自ファイルを使用する場合は、テーマフォルダの中にアップロードしてください。"],"If you set the path to your own file, the default coloring file and prism.js file will not be loaded..":["独自ファイルへのパスを設定すると、デフォルトのカラーリングファイルやprism.jsファイルは読み込まれなくなります。"],"* The currently loaded prism.js file can be downloaded at %s.":["※ 現在読み込んでいるprism.jsファイルは、 %s でダウンロードできます。"],"Here":["こちら"],"Highlighting Code Block":["Highlighting Code Block"],"https://wordpress.org/plugins/highlighting-code-block/":["https://wordpress.org/plugins/highlighting-code-block/"],"Add code block with syntax highlighting using prism.js. (Available for Gutenberg and Classic Editor)":["prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。（Gutenbergとクラシックエディター共に利用可能）"],"LOOS WEB STUDIO":["LOOS WEB STUDIO"],"https://loos-web-studio.com/":["https://loos-web-studio.com/"]}}}
	1	{"domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural_forms":"nplurals=1; plural=0;","lang":"ja_JP"},"HCB settings":["HCB設定"],"Language":["言語"],"Display number of rows":["行数の表示"],"Do not set individually":["個別で設定はしない"],"Display row count":["行数を表示する"],"Do not display row count":["行数を表示しない"],"Display language name":["言語の表示"],"Display language":["言語を表示する"],"Do not display language":["言語を表示しない"],"File name":["ファイル名"],"Highlight Number":["ハイライトする行番号"],"First line number":["開始行番号"],"[HCB] Settings":["[HCB] 設定"],"Basic settings":["基本設定"],"Display language name in code block":["コードブロックに言語名を表示する"],"If checked, the language type is displayed in the code on the site display side.":["チェックすると、サイト表示側のコードに言語の種類が表示されます。"],"Display settings for the number of rows":["行数の表示設定"],"Show line count in code block":["コードブロックに行数を表示する"],"If checked, the number of lines will be displayed on the left end of the code on the site display side.":["チェックすると、サイト表示側のコードの左端に行数が表示されます。"],"Copy button":["コピーボタン"],"Show copy button in code block":["コードブロックにコピーボタンを表示する"],"Font smoothing":["フォントスムージング"],"Turn on font smoothing":["フォントスムージングをオンにする"],"Add %s and %s to the code block.":["コードブロックに %s と %s が追加されます。"],"Cord coloring (front side)":["コードカラーリング（フロント側）"],"Code coloring (editor side)":["コードカラーリング（エディター側）"],"Font Size":["フォントサイズ"],"\"Font-family\" in code":["コードの “font-family”"],"Advanced settings":["高度な設定"],"When you use each original file, please upload it in the theme folder.":["各独自ファイルを使用する場合は、テーマフォルダの中にアップロードしてください。"],"If you set the path to your own file, the default coloring file and prism.js file will not be loaded..":["独自ファイルへのパスを設定すると、デフォルトのカラーリングファイルやprism.jsファイルは読み込まれなくなります。"],"* The currently loaded prism.js file can be downloaded at %s.":["※ 現在読み込んでいるprism.jsファイルは、 %s でダウンロードできます。"],"Here":["こちら"],"Language set to use":["使用する言語セット"],"Write in the format of %s, separated by \",\" (comma).":["%s の形式で、”,”（カンマ）区切りで記述してください。"],"class-key:\"language-name\"":["クラスキー:”言語名”"],"\"class-key\" is the class name used in prism.js (the part corresponding to \"◯◯\" in \"lang- ◯◯\")":["「クラスキー」は、prism.jsで使用されるクラス名（「lang-◯◯」の「◯◯」に該当する部分)です。"],"* If you use a language that is not supported by default, please use it together with \"Original prism.js\" setting.":["※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」設定と併用してください。"],"Original coloring file":["独自カラーリングファイル"],"Load your own CSS file for code coloring.":["あなたが用意したコードカラーリング用のCSSファイルを読み込みます。"],"Original prism.js":["独自prism.js"],"You can use the prism.js file corresponding to your own language set.":["自分専用の言語セットに対応したprism.jsファイルを使用できます。"],"help":["ヘルプ"],"Highlighting Code Block settings":["Highlighting Code Block 設定"],"Copy code to clipboard":["コードをクリップボードにコピーする"],"Highlighting Code Block":["Highlighting Code Block"],"https://wordpress.org/plugins/highlighting-code-block/":["https://wordpress.org/plugins/highlighting-code-block/"],"Add code block with syntax highlighting using prism.js. (Available for Gutenberg and Classic Editor)":["prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。（Gutenbergとクラシックエディター共に利用可能）"],"LOOS, Inc.":["LOOS, Inc."],"https://loos-web-studio.com/":["https://loos-web-studio.com/"]}}}

highlighting-code-block/trunk/languages/loos-hcb-ja.po

-                      r2886197
+                      r2994656
 msgstr ""
 "Project-Id-Version: Highlighting Code Block\n"
 "POT-Creation-Date: 2023-03-24 15:35+0900\n"
 "PO-Revision-Date: 2023-03-24 15:35+0900\n"
+"POT-Creation-Date: 2023-11-10 00:11+0900\n"
+"PO-Revision-Date: 2023-11-10 00:12+0900\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 …
 "X-Poedit-SearchPathExcluded-4: vendor\n"
 #: src/js/code-block/_sidebar.js:14
+#: src/js/code-block/edit.js:172
 msgid "HCB settings"
 msgstr "HCB設定"
+#: src/js/code-block/_sidebar.js:16
+msgid "Settings for displaying the number of lines"
+msgstr "行数の表示に関する設定"
+#: src/js/code-block/_sidebar.js:20 src/js/code-block/_sidebar.js:42
+#: src/js/code-block/edit.js:174
+msgid "Language"
+msgstr "言語"
+#: src/js/code-block/edit.js:186
+msgid "Display number of rows"
+msgstr "行数の表示"
+#: src/js/code-block/edit.js:190 src/js/code-block/edit.js:211
 msgid "Do not set individually"
 msgstr "個別で設定はしない"
 #: src/js/code-block/_sidebar.js:24
+#: src/js/code-block/edit.js:194
 msgid "Display row count"
 msgstr "行数を表示する"
 #: src/js/code-block/_sidebar.js:28
+#: src/js/code-block/edit.js:198
 msgid "Do not display row count"
 msgstr "行数を表示しない"
 #: src/js/code-block/_sidebar.js:38
 msgid "Settings for displaying language name"
 msgstr "言語名の表示に関する設定"
 #: src/js/code-block/_sidebar.js:46
+#: src/js/code-block/edit.js:207 class/loos_hcb_menu.php:35
+msgid "Display language name"
+msgstr "言語の表示"
+#: src/js/code-block/edit.js:215
 msgid "Display language"
 msgstr "言語を表示する"
 #: src/js/code-block/_sidebar.js:50
+#: src/js/code-block/edit.js:219
 msgid "Do not display language"
 msgstr "言語を表示しない"
 #: src/js/code-block/edit.js:165
 msgid "file name"
+#: src/js/code-block/edit.js:228
+msgid "File name"
 msgstr "ファイル名"
+#: src/js/code-block/edit.js:174
+msgid "\"data-line\" value"
+msgstr "data-line属性値"
+#: src/js/code-block/edit.js:238
+msgid "Highlight Number"
+msgstr "ハイライトする行番号"
+#: src/js/code-block/edit.js:254
+msgid "First line number"
+msgstr "開始行番号"
 #: class/loos_hcb_menu.php:8
 …
 msgid "Basic settings"
 msgstr "基本設定"
-#: class/loos_hcb_menu.php:35
-msgid "Display language name"
-msgstr "言語の表示"
 #: class/loos_hcb_menu.php:38
 …
 msgstr "Highlighting Code Block 設定"
 #: class/loos_hcb_scripts.php:62
+#: class/loos_hcb_scripts.php:82
 msgid "Copy code to clipboard"
 msgstr "コードをクリップボードにコピーする"
 …
 #. Author of the plugin/theme
 msgid "LOOS, Inc."
 msgstr ""
+msgstr "LOOS, Inc."
 #. Author URI of the plugin/theme
 …
 msgstr "https://loos-web-studio.com/"
+#~ msgid "\"data-line\" value"
+#~ msgstr "data-line属性値"
+#, fuzzy
+#~| msgid "\"data-line\" value"
+#~ msgid "\"data-start\" value"
+#~ msgstr "data-line属性値"
+#~ msgid "Settings for displaying the number of lines"
+#~ msgstr "行数の表示に関する設定"
+#~ msgid "Settings for displaying language name"
+#~ msgstr "言語名の表示に関する設定"
 #~ msgid "Default"
 #~ msgstr "デフォルト"

highlighting-code-block/trunk/readme.txt

-                      r2886197
+                      r2994656
 Tags: block, editor, guternberg, code, syntax, highlight, code highlighting, syntax highlight
 Requires at least: 5.6
 Tested up to: 6.2
 Stable tag: 1.7.0
+Tested up to: 6.4
+Stable tag: 2.0.0
 Requires PHP: 5.6
 License: GPLv2 or later
 …
 (However, we recommend using it in the "Block Editor".)
+Please see [this page](https://wemo.tech/2122/) for a detailed description of this plugin.(Japanese article)
+= How to use （For Block Editor） =
+Please see the following page for a detailed explanation of this plugin.
+URL: [https://loos.co.jp/en/documents/highlighting-code-block/](https://loos.co.jp/en/documents/highlighting-code-block/)
+### Source code
+The source code of this plugin is available on Github.
+URL: [https://github.com/ddryo/Highlighting-Code-Block](https://github.com/ddryo/Highlighting-Code-Block)
+### How to use
+#### How to use （For Block Editor）
 - Open the "Formatting" category of the Block Inserter.
 - There is a custom block named "Highlighing Code Block".
 …
 - Select the language of the code and enter any code.
+= How to use （For Classic Editor） =
+#### How to use （For Classic Editor）
 - You should see a select box labeled "Code Block" on the toolbar (2nd row by default).
 - When you select a language from the select box, a code block (pre tag) is inserted.
+= If it doesn't work =
+#### If it doesn't work
 This plugin works only with PHP version 5.6 or later, WordPress 5.6 or later.
 …
+= About settings =
+#### About settings
 The menu "[HCB] Settings" should be added to "Settings" in the left menu of the management screen.
 …
 == Changelog ==
+= 2.0.0 =
+- Support for WordPress 6.4.
+- Support for PHP 8.2.
+- The CSS and Block UI have been significantly adjusted.
+- CSS custom properties have also been renamed and cleaned up overall.
+- Added `data-start` attribute settings to blocks.
 = 1.7.0 =
 - Support for WordPress 6.2.

highlighting-code-block/trunk/sass-builder.js

-                      r2886197
+                      r2994656
 // console.log('start sass-builder.js ...');
+const path = require( 'path' );
+const fs = require( 'fs' );
+const path = require('path');
+const fs = require('fs');
+const glob = require('glob');
 // node-sass
 const sass = require( 'node-sass' );
 const nodeSassGlobbing = require( 'node-sass-globbing' );
+const sass = require('node-sass');
+const globImporter = require('node-sass-glob-importer');
 // postcss
 const postcss = require( 'postcss' );
 const autoprefixer = require( 'autoprefixer' );
 const cssnano = require( 'cssnano' );
 const mqpacker = require( 'css-mqpacker' );
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const mqpacker = require('css-mqpacker');
 // consoleの色付け
 …
 const green = '\u001b[32m';
 const writeCSS = ( filePath, css ) => {
     const dir = path.dirname( filePath );
+const writeCSS = (filePath, css) => {
+    const dir = path.dirname(filePath);
     // ディレクトリがなければ作成
     if ( ! fs.existsSync( dir ) ) {
         fs.mkdirSync( dir, { recursive: true } );
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
     // css書き出し
     fs.writeFileSync( filePath, css );
+    fs.writeFileSync(filePath, css);
 };
+// パス
 // パス
 const src = 'src/scss';
 const dist = 'build/css';
+const files = [
+    'hcb',
+    'hcb--light',
+    'hcb--dark',
+    'hcb-editor--light',
+    'hcb-editor--dark',
+    'hcb-admin',
+];
+// const files = [
+//  'hcb',
+//  'hcb--light',
+//  'hcb--dark',
+//  'hcb-editor--light',
+//  'hcb-editor--dark',
+//  'hcb-admin',
+// ];
+const ignore = ['**/_*.scss'];
+const files = glob.sync(src + '/**/*.scss', { ignore });
+// console.log('files', files);
+files.forEach( ( fileName ) => {
+files.forEach((filePath) => {
+    const fileName = filePath.replace(src + '/', '');
+    const srcPath = path.resolve(__dirname, src, fileName);
+    const distPath = path.resolve(__dirname, dist, fileName).replace('.scss', '.css');
+    // console.log(filePath, srcPath, distPath);
     // renderSyncだとimporter使えない
     sass.render(
+        {
             file: path.resolve( __dirname, src, `${ fileName }.scss` ),
+            file: srcPath,
             outputStyle: 'compressed',
             importer: nodeSassGlobbing,
+            importer: globImporter(),
         },
         function ( err, sassResult ) {
             if ( err ) {
                 console.error( red + err );
+        function (err, sassResult) {
+            if (err) {
+                console.error(red + err);
             } else {
                 const css = sassResult.css.toString();
-                const filePath = path.resolve( __dirname, dist, `${ fileName }.css` );
                 // postcss実行
                 postcss( [ autoprefixer, mqpacker, cssnano ] )
                     .process( css, { from: undefined } )
                     .then( ( postcssResult ) => {
                         console.log( green + 'Wrote CSS to ' + filePath );
                         writeCSS( filePath, postcssResult.css );
+                postcss([autoprefixer, mqpacker, cssnano])
+                    .process(css, { from: undefined })
+                    .then((postcssResult) => {
+                        console.log(green + 'Wrote CSS to ' + distPath);
+                        writeCSS(distPath, postcssResult.css);
                         // if (postcssResult.map) {fs.writeFile('dest/app.css.map', postcssResult.map.toString(), () => true);}
                     } );
+                    });
+            }
+        }
     );
 } );
+});

highlighting-code-block/trunk/src/js/code-block/_utils.js

-                      r2359718
+                      r2994656
  * Function for setting code block height
  */
 export function setHeightCodeBlocks(elem) {
+export function setHeightCodeBlocks(block, elem) {
     const num = elem.value.match(/\r\n|\n/g);
     let line;
+    // let line;
     if (null !== num) {
+        line = num.length + 1;
+        // line = num.length + 1;
+        elem.style.setProperty('--hcb--code-linenum', num.length + 1);
+    }
+    //  else {
+    //  line = 1;
+    // }
+    // let height = line * 1.5; // 1.5 = line-height
+    // height += 2 * 2; // py
+    // offsetXXX: padding + border + scrollbar
+    // scrollXXX: padding. スクロール可能なとき、見えていない部分のサイズも含む。
+    // clientXXX: padding. スクロール可能なとき、見えている部分のサイズ。
+    const isScrollableX = elem.scrollWidth > elem.offsetWidth;
+    if (isScrollableX) {
+        const scbarH = elem.offsetHeight - elem.clientHeight;
+        elem.style.setProperty('--hcb--scbarH', scbarH + 'px');
+        // elem.style.height = `calc(${height}em + ${scbarH}px)`;
     } else {
         line = 1;
+        // elem.style.height = height + 'em';
+    }
-    elem.style.height = line * 1.8 + 1.6 + 2 + 'em';
+}

highlighting-code-block/trunk/src/js/code-block/block.json

-                      r2669723
+                      r2994656
             "default": ""
         },
+        "dataStart": {
+            "type": "number",
+            "default": 1
+        },
         "isLineShow": {
             "type": "string",

highlighting-code-block/trunk/src/js/code-block/edit.js

-                      r2886197
+                      r2994656
  */
 import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+import { SelectControl } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+import { useBlockProps, InspectorControls, BlockControls } from '@wordpress/block-editor';
+import {
+    SelectControl,
+    TextControl,
+    // RadioControl,
+    PanelBody,
+    ToolbarGroup,
+} from '@wordpress/components';
+import { useState, useEffect, useRef } from '@wordpress/element';
 /**
  * @Inner dependencies
  */
+import HcbSidebar from './_sidebar';
+import { setHeightCodeBlocks } from './_utils';
+// import { setHeightCodeBlocks } from './_utils';
 /**
 …
 /**
  * 言語情報をグローバル変数から受け取る。
+ * 設定情報をグローバル変数から受け取る。
  */
+let hcbLangs = window.hcbLangs;
+if ( 'object' !== typeof hcbLangs ) {
+    hcbLangs = {
+const hcbShowLang = window.hcbVars?.showLang;
+const hcbShowLinenum = window.hcbVars?.showLinenum;
+let HCB_LANGS = window?.hcbLangs || null;
+if (null) {
+    HCB_LANGS = {
         html: 'HTML',
         css: 'CSS',
 …
+}
+const langList = [
+// HCB_LANGS を配列化する
+// const HCB_LANG_ARRAY = Object.entries(HCB_LANGS);
+const HCB_LANG_ARRAY = [['plain', 'Plain'], ...Object.entries(HCB_LANGS)];
+const LANG_SELECT_OPTIONS = [
+    {
         value: '',
         label: '- Lang Select -',
+        label: 'Plain',
     },
+    ...Object.entries(HCB_LANGS).map(([key, value]) => ({
+        value: key,
+        label: value,
+    })),
 ];
+Object.keys( hcbLangs ).forEach( ( key ) => {
+    langList.push( {
+        value: key,
+        label: hcbLangs[ key ],
+    } );
+} );
+const getLineNum = (code = '') => {
+    const lineNums = code.match(/\r\n|\n/g);
+    if (null !== lineNums) {
+        return lineNums.length + 1;
+    }
+    return 1;
+};
 // edit
 export default ( { attributes, setAttributes, clientId } ) => {
+export default ({ attributes, setAttributes, clientId }) => {
     const ref = useRef();
     const {
+        code,
+        // langType,
+        className,
+        code = '',
+        langType,
         fileName,
         langName,
         dataLineNum,
+        dataStart,
         isShowLang,
         isLineShow,
     } = attributes;
+    const blockClass = classnames( 'hcb_wrap', 'hcb-block' );
+    // コード行数
+    const [codeLineNum, setCodeLineNums] = useState(getLineNum(code));
+    const blockClass = classnames('hcb-block', 'hcb_wrap');
     // クラスの重複バグの修正
     useEffect( () => {
         const nowClass = attributes.className;
         if ( ! nowClass ) return;
         const nowClasses = nowClass.split( ' ' );
         const newClasses = [ ...new Set( nowClasses ) ]; // 重複削除
         setAttributes( { className: classnames( newClasses ) } );
     }, [] );
+    useEffect(() => {
+        const nowClass = className || '';
+        if (!nowClass) return;
+        const nowClasses = nowClass.split(' ');
+        const newClasses = [...new Set(nowClasses)]; // 重複削除
+        setAttributes({ className: classnames(newClasses) });
+    }, [className, setAttributes]);
     // コードの textarea 高さセット
     useEffect( () => {
+    useEffect(() => {
         const { ownerDocument } = ref.current;
+        if ( ownerDocument ) {
+            const hcbTextarea = ownerDocument.querySelector( `#block-${ clientId } .hcb_textarea` );
+            setHeightCodeBlocks( hcbTextarea );
+        if (ownerDocument) {
+            const hcbBlock = ownerDocument.querySelector(`#block-${clientId}`);
+            const hcbTextarea = hcbBlock.querySelector(`.hcb_textarea`);
+            hcbBlock.style.setProperty('--hcb--code-linenum', codeLineNum);
+            // offsetXXX: padding + border + scrollbar
+            // scrollXXX: padding. スクロール可能なとき、見えていない部分のサイズも含む。
+            // clientXXX: padding. スクロール可能なとき、見えている部分のサイズ。
+            const isScrollableX = hcbTextarea.scrollWidth > hcbTextarea.offsetWidth;
+            if (isScrollableX) {
+                const scbarH = hcbTextarea.offsetHeight - hcbTextarea.clientHeight;
+                hcbBlock.style.setProperty('--hcb--scbarH', scbarH + 'px');
+            }
+        }
     }, [ clientId, code ] );
+    }, [clientId, codeLineNum]);
     // preタグにつけるクラス名を生成して保存
 …
     // setAttributes({ preClass: preClass });
-    const hcbShowLang = window.hcbEditorVars?.showLang;
-    const hcbShowLinenum = window.hcbEditorVars?.showLinenum;
     let dataShowLang = '0';
     if ( '1' === isShowLang ) {
+    if ('1' === isShowLang) {
         dataShowLang = '1';
     } else if ( '' === isShowLang && 'on' === hcbShowLang ) {
+    } else if ('' === isShowLang && 'on' === hcbShowLang) {
         dataShowLang = '1';
+    }
     let dataShowLinenum = null;
     if ( 'on' === isLineShow ) {
+    if ('on' === isLineShow) {
         dataShowLinenum = '1';
     } else if ( 'undefined' === isLineShow && 'on' === hcbShowLinenum ) {
+    } else if ('undefined' === isLineShow && 'on' === hcbShowLinenum) {
         dataShowLinenum = '1';
+    }
     const blockProps = useBlockProps( {
+    const blockProps = useBlockProps({
         ref,
         className: blockClass,
 …
         'data-show-lang': dataShowLang,
         'data-show-linenum': dataShowLinenum,
+        // 'data-line': dataLineNum || null,
+    } );
+        // 'data-line': dataLineNum || null, // edit側にはつけない
+    });
+    // 新規配列を作成
+    const langArray = [...HCB_LANG_ARRAY];
+    // lang未設定の時に 'Plain' は表示しない
+    if (!langType) {
+        langArray.shift();
+    }
     return (
         <>
+            <HcbSidebar { ...{ attributes, setAttributes } } />
+            <div { ...blockProps }>
+            <BlockControls>
+                <ToolbarGroup
+                    isCollapsed={true}
+                    icon={<>{langName || __('Language', 'loos-hcb')}</>}
+                    title='Lnaguage'
+                    controls={langArray.map(([_langKey, _langName]) => {
+                        return {
+                            key: _langKey,
+                            isActive: _langKey === langType,
+                            title: _langName,
+                            // icon: null,
+                            onClick: () => {
+                                if (_langKey === 'plain') {
+                                    setAttributes({ langType: '', langName: '' });
+                                } else {
+                                    setAttributes({ langType: _langKey, langName: _langName });
+                                }
+                            },
+                        };
+                    })}
+                />
+            </BlockControls>
+            <InspectorControls>
+                <PanelBody title={__('HCB settings', 'loos-hcb')} initialOpen={true}>
+                    <SelectControl
+                        label={__('Language', 'loos-hcb')}
+                        value={attributes.langType}
+                        options={LANG_SELECT_OPTIONS}
+                        onChange={(langKey) => {
+                            if ('' === langKey) {
+                                setAttributes({ langType: '', langName: '' });
+                            } else {
+                                setAttributes({ langType: langKey, langName: HCB_LANGS[langKey] });
+                            }
+                        }}
+                    />
+                    <SelectControl
+                        label={__('Display number of rows', 'loos-hcb')} // 行数の表示
+                        value={isLineShow}
+                        options={[
+                            {
+                                label: __('Do not set individually', 'loos-hcb'), //個別で設定はしない
+                                value: 'undefined',
+                            },
+                            {
+                                label: __('Display row count', 'loos-hcb'), //行数を表示する
+                                value: 'on',
+                            },
+                            {
+                                label: __('Do not display row count', 'loos-hcb'), //行数を表示しない
+                                value: 'off',
+                            },
+                        ]}
+                        onChange={(val) => {
+                            setAttributes({ isLineShow: val });
+                        }}
+                    />
+                    <SelectControl
+                        label={__('Display language name', 'loos-hcb')} // 言語名の表示に関する設定
+                        value={isShowLang}
+                        options={[
+                            {
+                                label: __('Do not set individually', 'loos-hcb'), //個別で設定はしない
+                                value: '',
+                            },
+                            {
+                                label: __('Display language', 'loos-hcb'), //言語を表示する
+                                value: '1',
+                            },
+                            {
+                                label: __('Do not display language', 'loos-hcb'), //言語を表示しない
+                                value: '0',
+                            },
+                        ]}
+                        onChange={(val) => {
+                            setAttributes({ isShowLang: val });
+                        }}
+                    />
+                    <TextControl
+                        label={__('File name', 'loos-hcb')} // ファイル名
+                        value={fileName}
+                        onChange={(val) => {
+                            setAttributes({ fileName: val });
+                        }}
+                    />
+                    <TextControl
+                        // ハイライトする行番号
+                        label={
+                            <>
+                                {__('Highlight Number', 'loos-hcb') + ' ( '}
+                                <code className='hcb-code-in-label'>[data-line]</code>
+                                {' )'}
+                            </>
+                        }
+                        value={dataLineNum}
+                        onChange={(val) => {
+                            setAttributes({ dataLineNum: val });
+                        }}
+                    />
+                    <TextControl
+                        type='number'
+                        // 開始行番号
+                        label={
+                            <>
+                                {__('First line number', 'loos-hcb') + ' ( '}
+                                <code className='hcb-code-in-label'>[data-start]</code>
+                                {' )'}
+                            </>
+                        }
+                        value={dataStart || 1}
+                        onChange={(val) => {
+                            setAttributes({ dataStart: parseInt(val || 1) });
+                        }}
+                        style={{ opacity: dataShowLinenum ? 1 : 0.5 }}
+                        disabled={dataShowLinenum ? false : true}
+                    />
+                </PanelBody>
+            </InspectorControls>
+            <div {...blockProps}>
                 <div className='hcb_codewrap'>
+                    <div className='hcb_linenum'></div>
+                    {dataShowLinenum && (
+                        <div className='hcb_linenum'>
+                            <div className='hcb-startNum'>{dataStart}</div>
+                        </div>
+                    )}
+                    {/* <TextareaControl */}
                     <textarea
                         className='hcb_textarea'
                         placeholder='Your Code...'
+                        value={ code }
+                        onChange={ ( e ) => {
+                            setAttributes( { code: e.target.value } );
+                            setHeightCodeBlocks( e.target );
+                        } }
+                        value={code}
+                        onChange={(e) => {
+                            const val = e.target.value;
+                            setAttributes({ code: val });
+                            // setHeightCodeBlocks(e.target);
+                            const newCodeLineNum = getLineNum(val);
+                            if (codeLineNum !== newCodeLineNum) {
+                                setCodeLineNums(newCodeLineNum);
+                            }
+                        }}
                     ></textarea>
+                </div>
+                <div className='hcb_controls'>
+                    <SelectControl
+                        value={ attributes.langType }
+                        options={ langList }
+                        onChange={ ( langKey ) => {
+                            if ( '' === langKey ) {
+                                setAttributes( {
+                                    langType: '',
+                                    langName: '',
+                                } );
+                            } else {
+                                setAttributes( {
+                                    langType: langKey,
+                                    langName: hcbLangs[ langKey ],
+                                } );
+                            }
+                        } }
+                    />
+                    <input
+                        type='text'
+                        className='filename_input'
+                        value={ fileName }
+                        placeholder={ __( 'file name', 'loos-hcb' ) } //ファイル名
+                        onChange={ ( e ) => {
+                            setAttributes( { fileName: e.target.value } );
+                        } }
+                    />
+                    <input
+                        type='text'
+                        className='num_input'
+                        value={ dataLineNum }
+                        placeholder={ __( '"data-line" value', 'loos-hcb' ) } //data-line属性値
+                        onChange={ ( e ) => {
+                            setAttributes( { dataLineNum: e.target.value } );
+                        } }
+                    />
+                    {dataLineNum && (
+                        <div className='hcb-datapreview'>
+                            <div className='hcb-datapreview__items'>{`{${dataLineNum}}`}</div>
+                        </div>
+                    )}
                 </div>
             </div>

highlighting-code-block/trunk/src/js/code-block/index.js

-                      r2669723
+                      r2994656
 import save from './save';
 import metadata from './block.json';
 import hcbIcon from './_icon';
+import hcbIcon from './icon';
 import deprecated from './_deprecated';
 …
  * Register Highlighting Code Block
  */
 registerBlockType( metadata.name, {
+registerBlockType(metadata.name, {
     icon: hcbIcon,
     // attributes: metadata.attributes,
 …
+            {
                 type: 'block',
                 blocks: [ 'core/code' ], //整形済みブロック : 'core/preformatted',
                 transform: ( attributes ) => {
                     return createBlock( 'loos-hcb/code-block', {
+                blocks: ['core/code'], //整形済みブロック : 'core/preformatted',
+                transform: (attributes) => {
+                    return createBlock('loos-hcb/code-block', {
                         code: attributes.content,
                     } );
+                    });
                 },
             },
 …
+            {
                 type: 'block',
                 blocks: [ 'core/code' ],
                 transform: ( attributes ) => {
                     return createBlock( 'core/code', {
+                blocks: ['core/code'],
+                transform: (attributes) => {
+                    return createBlock('core/code', {
                         content: attributes.code,
                     } );
+                    });
                 },
             },
 …
     save,
     deprecated,
 } );
+});

highlighting-code-block/trunk/src/js/code-block/save.js

-                      r2669723
+                      r2994656
 // save
 export default ( { attributes } ) => {
     const { code, fileName, langName, dataLineNum, isLineShow, isShowLang } = attributes;
+export default ({ attributes }) => {
+    const { code, fileName, langName, dataLineNum, dataStart, isLineShow, isShowLang } = attributes;
     const langType = attributes.langType || 'plain';
     const preClass = classnames( 'prism', `${ isLineShow }-numbers`, `lang-${ langType }` );
+    const preClass = classnames('prism', `${isLineShow}-numbers`, `lang-${langType}`);
     const blockProps = useBlockProps.save( {
+    const blockProps = useBlockProps.save({
         className: 'hcb_wrap',
     } );
+    });
     return (
         <div { ...blockProps }>
+        <div {...blockProps}>
             <pre
+                className={ preClass }
+                data-file={ fileName || null }
+                data-lang={ langName || null }
+                data-line={ dataLineNum || null }
+                data-show-lang={ isShowLang || null }
+                className={preClass}
+                data-file={fileName || null}
+                data-lang={langName || null}
+                data-line={dataLineNum || null}
+                data-start={1 === dataStart ? null : dataStart}
+                data-show-lang={isShowLang || null}
+            >
                 <RichText.Content tagName='code' value={ sanitizeCodeblock( code ) } />
+                <RichText.Content tagName='code' value={sanitizeCodeblock(code)} />
             </pre>
         </div>

highlighting-code-block/trunk/src/js/hcb_script.js

-                      r2886197
+                      r2994656
 document.addEventListener( 'DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', function () {
     // if (!window.Prism) return;
 …
     // Token customize
     const keyToken = document.querySelectorAll( '.token.keyword' );
     for ( let i = 0; i < keyToken.length; i++ ) {
         const elem = keyToken[ i ];
+    const keyToken = document.querySelectorAll('.token.keyword');
+    for (let i = 0; i < keyToken.length; i++) {
+        const elem = keyToken[i];
         const defArr = [ 'function', 'def', 'class' ];
         if ( -1 !== defArr.indexOf( elem.textContent ) ) {
             elem.classList.add( 'def' );
         } else if ( 'this' === elem.textContent ) {
             elem.classList.add( 'this' );
+        const defArr = ['function', 'def', 'class'];
+        if (-1 !== defArr.indexOf(elem.textContent)) {
+            elem.classList.add('def');
+        } else if ('this' === elem.textContent) {
+            elem.classList.add('this');
+        }
+    }
     // Line highlighter position.
     const lineHighlighter = document.querySelectorAll( '.line-highlight' );
     for ( let i = 0; i < lineHighlighter.length; i++ ) {
         const elem = lineHighlighter[ i ];
         if ( ! elem.parentNode.classList.contains( 'line-numbers' ) ) {
             const dataStart = elem.getAttribute( 'data-start' );
+    const lineHighlighter = document.querySelectorAll('.line-highlight');
+    for (let i = 0; i < lineHighlighter.length; i++) {
+        const elem = lineHighlighter[i];
+        if (!elem.parentNode.classList.contains('line-numbers')) {
+            const dataStart = elem.getAttribute('data-start');
             const topPosEm = ( dataStart - 1 ) * 1.5; //line-heightの値
+            const topPosEm = (dataStart - 1) * 1.5; //line-heightの値
             // Line highlighterの位置がずれるので桁数に応じて微調節 -> ずれなくなった？
 …
     // clipboard
     ( function () {
         if ( ! window.ClipboardJS ) return;
         if ( ! window.hcbVars?.showCopyBtn ) return;
+    (function () {
+        if (!window.ClipboardJS) return;
+        if (!window.hcbVars?.showCopyBtn) return;
         let clipCt = 1;
         // hcb_wrap
         const hcbWraps = document.querySelectorAll( '.hcb_wrap' );
+        const hcbWraps = document.querySelectorAll('.hcb_wrap');
         // const hcbClips = document.querySelectorAll('.hcb-clipboard');
         for ( let i = 0; i < hcbWraps.length; i++ ) {
             const elem = hcbWraps[ i ];
             const code = elem.querySelector( 'code' );
             if ( null === code ) continue;
+        for (let i = 0; i < hcbWraps.length; i++) {
+            const elem = hcbWraps[i];
+            const code = elem.querySelector('code');
+            if (null === code) continue;
             // ボタン生成
             const button = document.createElement( 'button' );
             button.classList.add( 'hcb-clipboard' );
             button.setAttribute( 'data-clipboard-target', '[data-hcb-clip="' + clipCt + '"]' );
             button.setAttribute( 'data-clipboard-action', 'copy' );
             button.setAttribute( 'aria-label', window.hcbVars?.copyBtnLabel || '' );
+            const button = document.createElement('button');
+            button.classList.add('hcb-clipboard');
+            button.setAttribute('data-clipboard-target', '[data-hcb-clip="' + clipCt + '"]');
+            button.setAttribute('data-clipboard-action', 'copy');
+            button.setAttribute('aria-label', window.hcbVars?.copyBtnLabel || '');
             // button.innerHTML = `コピー`;
             elem.prepend( button );
+            elem.append(button);
             // codeタグにターゲット属性追加
             code.setAttribute( 'data-hcb-clip', clipCt );
+            code.setAttribute('data-hcb-clip', clipCt);
             clipCt++;
+        }
         const clipboard = new ClipboardJS( '.hcb-clipboard' );
         clipboard.on( 'success', function ( e ) {
+        const clipboard = new ClipboardJS('.hcb-clipboard');
+        clipboard.on('success', function (e) {
             const btn = e.trigger;
             btn.classList.add( '-done' );
             setTimeout( () => {
                 btn.classList.remove( '-done' );
             }, 5000 );
         } );
+            btn.classList.add('-done');
+            setTimeout(() => {
+                btn.classList.remove('-done');
+            }, 5000);
+        });
         // clipboard.on('error', function (e) {
         //  alert(e);
         // });
     } )();
 } );
+    })();
+});

highlighting-code-block/trunk/src/scss/editor/_base.scss

-                      r2886197
+                      r2994656
+@import "../root";
+@import "./conrtols";
 // 共通
 .mce-content-body .hcb_wrap {
 …
+}
+:root {
+    --hcb--pY: 2em; // 高さセットにも使うので注意
+    --hcb--pX: 1.5em;
+    --hcb--linenumW: 3em;
+}
+// Block: hcb_wrap > hcb_codewrap > hcb_textarea
+// Classic: hcb_wrap > pre
 .hcb_wrap {
+    position: relative;
     &.hcb_wrap {
+    > .hcb_codewrap {
         position: relative;
+        border: solid 1px #f1f1f1;
+        padding-right: 0.75em;
+        color: var(--hcb--c);
+        background: var(--hcb--bgc);
+        border-radius: var(--hcb--radius);
+    }
+}
+        pre,
+        textarea.hcb_textarea {
+            position: static;
+            display: block;
+            box-sizing: border-box;
+            width: 100%;
+            margin: 0 !important;
+            padding: 1.5em;
+            overflow-x: auto;
+            color: var(--hcb-color--text, #1f1e1e);
+            font-size: var(--hcb-font-size, 14px);
+            font-family: var(--hcb-font-family, "Menlo", "Consolas", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif);
+            line-height: 1.8;
+            white-space: pre !important;
+            overflow-wrap: break-word;
+            tab-size: 2;
+            background: var(--hcb-color--bg, #f7f6f6);
+            border: none;
+            border-radius: 0;
+        }
+    }
+.hcb_wrap > pre,
+.hcb_codewrap,
+.hcb_textarea {
+    color: var(--hcb--c) !important;
+    font-size: var(--hcb--fz, 14px) !important;
+    font-family: var(--hcb--ff) !important;
+    line-height: 1.5 !important;
+    background: var(--hcb--bgc) !important;
+}
+    .hcb_codewrap {
+        position: relative;
+        padding-right: 1em;
+        color: var(--hcb-color--text, #1f1e1e);
+        background: var(--hcb-color--bg, #f7f6f6);
+    }
+.hcb_wrap.hcb_wrap > pre,
+.hcb_textarea.hcb_textarea {
+    position: static;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: var(--hcb--pY) var(--hcb--pX);
+    overflow-x: auto;
+    white-space: pre !important;
+    overflow-wrap: break-word;
+    tab-size: 4;
+    border: none;
+    border-radius: 0;
     // スクロールバー
+    pre,
+    textarea.hcb_textarea {
+        &::-webkit-scrollbar {
+            height: 8px;
+            border: none;
+        }
+        &::-webkit-scrollbar-track {
+            background: #f7f7f7;
+            border: none;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+        }
+    &::-webkit-scrollbar {
+        height: 6px;
+        border: none;
+    }
+    textarea.hcb_textarea {
+        outline: none;
+        box-shadow: none;
+        resize: none;
+    &::-webkit-scrollbar-track {
+        background: var(--hcb--scbar-track--bgc);
+        border: none;
+    }
+    pre code {
+        display: block;
+        padding: 0 !important;
+        color: inherit !important;
+        font-family: inherit !important;
+        tab-size: 2;
+        background: inherit !important;
+    }
+    // 設定エリア
+    .hcb_controls {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 8px 8px;
+        &::after {
+            display: block;
+            clear: both;
+            height: 0;
+            visibility: hidden;
+            content: "";
+        }
+        .components-base-control {
+            flex-basis: 50%;
+            max-width: 25rem;
+            select {
+                width: 100%;
+                // margin: 0;
+            }
+        }
+        .filename_input {
+            flex-basis: 20%;
+            // float: right;
+            min-width: 10em;
+            height: 28px;
+            margin-left: auto;
+            padding: 0 8px;
+            line-height: 28px;
+        }
+        .num_input {
+            flex-basis: 20%;
+            // float: right;
+            min-width: 10em;
+            height: 28px;
+            margin-left: 16px;
+            padding: 0 8px;
+            line-height: 28px;
+        }
+    }
+    // エディダーではオン・オフが分かるように縦線だけ表示
+    .hcb_linenum {
+        position: absolute;
+        top: 1em;
+        left: 1em;
+        display: none;
+        width: 0;
+        height: calc(100% - 2em);
+        border-right: solid 1px rgba(150, 150, 150, 0.5);
+    &::-webkit-scrollbar-thumb {
+        background: var(--hcb--scbar-thumb--bgc);
+        border-radius: 3px;
+    }
+}
+.hcb-block[data-show-linenum] {
+.hcb_textarea.hcb_textarea {
+    // `calc(${height}em + ${scbarH}px)`;
+    height: calc(1.5em * var(--hcb--code-linenum, 1) + var(--hcb--pY) * 2 + var(--hcb--scbarH, 0px));
+    outline: none;
+    box-shadow: none;
+    resize: none;
+    .hcb_linenum {
+        display: block;
+    &::placeholder {
+        color: inherit;
+        font-style: italic;
+        opacity: 0.5;
+    }
+    textarea.hcb_textarea {
+        width: calc(100% - 2em);
+        margin-left: 2em !important;
+        padding-left: 0.5em;
+    &::-ms-input-placeholder,
+    &::-moz-placeholder,
+    &::-webkit-input-placeholder {
+        color: inherit;
+        font-style: italic;
+        opacity: 0.5;
+    }
+}
+.hcb_wrap > pre code {
+    display: block;
+    padding: 0 !important;
+    color: inherit !important;
+    font-family: inherit !important;
+    tab-size: 2;
+    background: inherit !important;
+}
+// 行数表示 → エディダーではオン・オフが分かるように縦ボーダーだけ表示
+.hcb_linenum {
+    position: absolute;
+    top: var(--hcb--pY);
+    left: calc(var(--hcb--linenumW) / 2 + 0.5em);
+    width: 0;
+    height: calc(100% - var(--hcb--pY) * 2);
+    color: var(--hcb--line-numbers--c);
+    border-right: solid 1px currentcolor;
+    > .hcb-startNum {
+        position: absolute;
+        top: 0;
+        right: 0.5em;
+        right: calc(0.95em - 1px);
+        font: inherit;
+        font-size: 0.95em;
+        line-height: 1.5;
+        white-space: nowrap;
+        word-wrap: normal;
+        translate: 50%;
+    }
+}
+.hcb-block[data-show-linenum] {
+    .hcb_codewrap {
+        padding-left: calc(var(--hcb--linenumW) / 2 + 1em);
+    }
+    .hcb_textarea {
+        padding-left: calc(var(--hcb--linenumW) / 2 - 1em);
+    }
+}
 // Lang Name
 .hcb_wrap pre::before, // for Classic
+.hcb_wrap > pre::before, // for Classic
 .hcb-block::before {
     position: absolute;
 …
     min-width: 4em;
     padding: 0 10px;
     color: var(--hcb-color--lang--text, #1f1e1e);
     font-size: 12px;
     font-family: Arial, Helvetica, sans-serif;
+    color: var(--hcb--data-label--c);
+    font-size: 0.925em;
+    font-family: inherit;
     line-height: 20px;
     text-align: center;
+    background-color: var(--hcb-color--lang--bg, #dedede);
+    content: attr(data-lang);
+    background-color: var(--hcb--data-label--bgc);
+    border-radius: 0 var(--hcb--radius);
+    content: var(--hcb--data-label);
+}
+.hcb-block[data-show-lang="0"] {
+    --hcb--data-label: none;
+}
+.hcb-block[data-show-lang="1"] {
+    --hcb--data-label: attr(data-lang);
+}
+// [data-file] があれば、lang 非表示でも表示する
 .hcb-block[data-file]::before {
     padding: 0 8px 0 20px;
     background-image: var(--hcb-file-icon);
+    background-image: var(--hcb--file-icon);
     background-repeat: no-repeat;
     background-position: center left 8px;
     background-size: auto 10px;
     content: attr(data-file);
+    content: attr(data-file); // --hcb--data-label: attr(data-file);
+}
 .hcb-block[data-show-lang="0"]:not([data-file])::before {
     content: none;
+}
+// .hcb-block[data-show-lang="0"]:not([data-file])::before {
+//  content: none;
+// }
-// ブロック非選択時
-[data-type="loos-hcb/code-block"]:not(.is-selected) {
-    .hcb_controls {
-        display: none;
+    }
+}
-// デバイスプレビュー
-.wp-embed-responsive.editor-styles-wrapper {
-    .hcb_controls {
-        display: none;
+    }
+}

highlighting-code-block/trunk/src/scss/editor/_color--dark.scss

-                      r2886197
+                      r2994656
+body {
+    --hcb-color--text: #f8f8f2;
+    --hcb-color--text-shadow: rg1a1a1ab(136, 132, 132);
+    --hcb-color--bg: #34352e;
+    --hcb-color--lang--text: #fff;
+    --hcb-color--lang--bg: #111;
+    --hcb-file-icon: url(../../assets/img/file-icon-dark.svg);
+:root {
+    --hcb--c: #f8f8f2;
+    --hcb--bgc: #34352e;
+    --hcb--data-label--c: #fff;
+    --hcb--data-label--bgc: #111;
+    --hcb--file-icon: url(../../assets/img/file-icon-dark.svg);
+    --hcb--scbar-track--bgc: rgba(255, 255, 255, 0.1);
+    --hcb--scbar-thumb--bgc: rgba(255, 255, 255, 0.2);
+    // --hcb--placeholder--c: rgba(255, 255, 255, 0.4);
+}
-// Gutenbergでのプレースホルダー
-.hcb_wrap textarea.hcb_textarea {
-    &::placeholder {
-        color: rgba(255, 255, 255, 0.4);
-        font-style: italic;
+    }
-    &::-ms-input-placeholder,
-    &::-moz-placeholder,
-    &::-webkit-input-placeholder {
-        color: rgba(255, 255, 255, 0.4);
-        font-style: italic;
+    }
+}

highlighting-code-block/trunk/src/scss/editor/_color--light.scss

-                      r2886197
+                      r2994656
+body {
+    --hcb-color--text: #1f1e1e;
+    --hcb-color--text-shadow: #fff;
+    --hcb-color--bg: #f7f6f6;
+    --hcb-color--lang--text: #1f1e1e;
+    --hcb-color--lang--bg: #dedede;
+    --hcb-file-icon: url(../../assets/img/file-icon-light.svg);
+}
+// :root {}

highlighting-code-block/trunk/src/scss/front/_base.scss

-                      r2886197
+                      r2994656
+@import "../root";
+// ベース（テーマに上書きされないよう、クラス２重にして詳細度あげておく）
+.hcb_wrap.hcb_wrap {
+    position: relative;
+    z-index: 0;
+    display: block;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    padding: 0;
+    font-size: var(--hcb--fz, 14px);
+    > pre {
+        position: static;
+        display: block;
+        box-sizing: border-box;
+        margin: 0;
+        padding: var(--hcb--pY) var(--hcb--pX);
+        overflow: auto;
+        font-size: inherit;
+        font-family: var(--hcb--ff);
+        line-height: 1.5;
+        letter-spacing: 0.1px;
+        border-radius: var(--hcb--radius, 0);
+        -webkit-overflow-scrolling: touch;
+    }
+    > pre,
+    > pre > code {
+        color: var(--hcb--c);
+        white-space: pre;
+        text-align: left;
+        text-shadow: var(--hcb--tsh);
+        word-wrap: normal;
+        word-break: normal;
+        word-spacing: normal;
+        tab-size: 4;
+        hyphens: none;
+        background: var(--hcb--bgc);
+        border: none;
+    }
+    :is(code, span) {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0; // 一部の海外テーマでズレが生じるのを防ぐ
+        font-size: inherit;
+        font-family: inherit;
+        line-height: inherit;
+    }
+}
 /*
     カラーリングに関係ない共通設定
  */
+$hcbPaddingY: 1.75em;
+$hcbLineNumPadding: 3.75em;
+  Note: .line-highlight の出現位置は、行数表示があるかどうかで変わる。
+    行数表示がある → pre > .line-highlight
+    行数表示がない → pre > code > .line-highlight
+        また、このとき、.line-highlight は data-start, data-end を持つようになる。
+*/
 .hcb_wrap {
+    // ベース（テーマに上書きされないよう、クラス２重にして詳細度あげておく）
+    &.hcb_wrap {
+        position: relative;
+        z-index: 0;
+        display: block;
+        margin-top: 2em;
+        margin-bottom: 2em;
+        padding: 0;
+        pre {
+            position: static;
+            display: block;
+            box-sizing: border-box;
+            margin: 0;
+            padding: $hcbPaddingY 1.5em;
+            overflow: auto;
+            font-size: var(--hcb-font-size, 14px);
+            font-family: var(--hcb-font-family, "Menlo", "Consolas", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif);
+            line-height: 1;
+            letter-spacing: 0.1px;
+            border-radius: 0;
+            -webkit-overflow-scrolling: touch;
+            @media screen and (max-width: 599px) {
+                font-size: var(--hcb-font-size--mobile, 13px);
+            }
+        }
+        code,
+        pre {
+            color: var(--hcb-color--text, #1f1e1e);
+            white-space: pre;
+            text-align: left;
+            text-shadow: 0 1px var(--hcb-color--text-shadow, #fff);
+            word-wrap: normal;
+            word-break: normal;
+            word-spacing: normal;
+            tab-size: 4;
+            hyphens: none;
+            background: var(--hcb-color--bg, #f7f6f6);
+            border: none;
+        }
+        code,
+        span {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0; // 一部の海外テーマでズレが生じるのを防ぐ
+            font-size: inherit;
+            font-family: inherit;
+            line-height: 1.5;
+        }
+    }
+    // line highlight
+    // .prism[data-line] > .line-highlight
     .line-highlight {
         position: absolute;
         right: 0;
         left: 0;
         margin-top: $hcbPaddingY;
+        margin-top: var(--hcb--pY);
         padding: 0;
         font-size: inherit;
         line-height: inherit;
         white-space: pre;
         background: var(--hcb-color--highlight, rgba(150, 120, 100, 0.1));
+        background: var(--hcb--highlight-color);
         pointer-events: none;
+        &::before,
+        &[data-end]::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            box-sizing: border-box;
+            min-width: 1.5em;
+            padding: 1px 2px;
+            color: var(--hcb-color--highlight-text, #f5f2f0);
+            font-weight: bold;
+            font-size: 12px;
+            line-height: inherit;
+            text-align: center;
+            text-shadow: none;
+            vertical-align: middle;
+            background-color: var(--hcb-color--highlight-bg, #b1aead);
+            border-radius: 0;
+            content: attr(data-start);
+        }
+        &[data-end]::after {
+            top: auto;
+            bottom: 0;
+            content: attr(data-end);
+        }
+    }
+    // 行数表示ある時はハイライトの行表示を消す
+    .line-numbers .line-highlight::before,
+    .line-numbers .line-highlight::after {
+        content: none;
+    }
+    // line numbers
+    pre.line-numbers {
+        position: static; // pre の親の .hcb_wrap に追従
+        padding-left: $hcbLineNumPadding;
+        // 1.8.0 で廃止
+        // &::before,
+        // &::after {
+        //  position: absolute;
+        //  top: 0;
+        //  left: 0;
+        //  box-sizing: border-box;
+        //  min-width: 1.5em;
+        //  padding: 1px 2px;
+        //  color: var(--hcb--highlight-c);
+        //  font-size: 12px;
+        //  line-height: inherit;
+        //  text-align: center;
+        //  text-shadow: none;
+        //  vertical-align: middle;
+        //  background-color: var(--hcb--highlight-bgc);
+        //  border-radius: 0;
+        // }
+        // &[data-start]::before {
+        //  content: attr(data-start);
+        // }
+        // &[data-end]::after {
+        //  top: auto;
+        //  bottom: 0;
+        //  content: attr(data-end);
+        // }
+    }
+    > .prism.line-numbers {
+        position: static; // pre の親の .hcb_wrap に追従させたい
+        padding-left: calc(var(--hcb--pX) + var(--hcb--linenumW)); // .hcb_wrap.hcb_wrap > pre に詳細度勝たないといけない
         counter-reset: linenumber;
 …
+    }
     .line-numbers .line-numbers-rows {
+    .line-numbers-rows {
         position: absolute;
+        top: -2px;
+        left: -$hcbLineNumPadding;
+        width: 3em; // works for line-numbers below 1000 lines
+        font-size: inherit;
+        letter-spacing: -1px;
+        border-right: 1px solid var(--hcb-color--line-numbers, #999);
+        // -webkit-user-select: none;
+        // -moz-user-select: none;
+        // -ms-user-select: none;
+        top: -0.125em;
+        left: calc(-1px - var(--hcb--linenumW) - var(--hcb--pX) / 2);
+        min-width: var(--hcb--linenumW);
+        font-size: inherit;
+        // letter-spacing: -1px;
+        border-right: 1px solid var(--hcb--line-numbers--c);
         user-select: none;
         pointer-events: none;
 …
     .line-numbers-rows > span {
         display: block;
+        letter-spacing: -0.25px;
+        text-align: center;
         counter-increment: linenumber;
         pointer-events: none;
 …
     .line-numbers-rows > span::before {
         display: block;
+        padding-right: 0.8em;
+        color: var(--hcb-color--line-numbers, #999);
+        text-align: right;
+        color: var(--hcb--line-numbers--c);
         content: counter(linenumber);
+    }
+    // Lang Name
+    pre::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        box-sizing: border-box;
+        min-width: 4em;
+        padding: 0 10px;
+        color: var(--hcb-color--lang--text, #1f1e1e);
+        font-size: 12px;
+        font-family: Arial, Helvetica, sans-serif;
+        line-height: 20px;
+        text-align: center;
+        background-color: var(--hcb-color--lang--bg, #dedede);
+        content: attr(data-lang);
+    }
+    // コピーボタンがある時
+    .hcb-clipboard + pre::before {
+        right: 26px;
+    }
+    // ファイル名を表示する時
+    pre[data-file]::before {
+        padding: 0 8px 0 20px;
+        // background-colorを打ち消さないように分けて書く
+        background-image: var(--hcb-file-icon);
+        background-repeat: no-repeat;
+        background-position: center left 8px;
+        background-size: auto 10px;
+        content: attr(data-file);
+    }
+    // 強制オフ時
+    pre[data-show-lang="0"]:not([data-file])::before {
+        content: none;
+    }
+    // コピーボタン
+    .hcb-clipboard {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        box-sizing: border-box;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        text-align: center;
+        background-color: rgba(#fff, 0.8);
+        background-image: url(../../assets/img/clipborad.svg);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 16px auto;
+    // scrollbar
+    > pre::-webkit-scrollbar {
+        height: 6px;
+    }
+    > pre::-webkit-scrollbar-track {
+        background: var(--hcb--scbar-track--bgc);
         border: none;
+        border-radius: 1px;
+        &.-done {
+            background-image: url(../../assets/img/copied.svg);
+            &::before {
+                position: absolute;
+                right: 0;
+                bottom: 100%;
+                font-size: 14px;
+                font-family: Arial, Helvetica, sans-serif;
+                line-height: 1.5;
+                content: "Copied!";
+            }
+        }
+    }
+    // scrollbar
+    pre::-webkit-scrollbar {
+        height: 6px;
+    }
+    pre::-webkit-scrollbar-track {
+        background: var(--hcb-color--scrollbar-track, rgba(150, 150, 150, 0.1));
+        border: none;
+    }
+    pre::-webkit-scrollbar-thumb {
+        background: var(--hcb-color--scrollbar-thumb, rgba(150, 150, 150, 0.25));
+    }
+    > pre::-webkit-scrollbar-thumb {
+        background: var(--hcb--scbar-thumb--bgc);
         border-radius: 3px;
+    }
 …
     border-radius: 0.3em;
+}
+// Lang Name, File Name
+.hcb_wrap > pre::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    min-width: 4em;
+    padding: 0 10px;
+    color: var(--hcb--data-label--c);
+    font-size: 0.925em;
+    font-family: inherit;
+    line-height: 20px;
+    text-align: center;
+    background-color: var(--hcb--data-label--bgc);
+    border-radius: 0 var(--hcb--radius);
+    content: var(--hcb--data-label);
+}
+// 強制オフ時
+.hcb_wrap > pre[data-show-lang="0"] {
+    --hcb--data-label: none;
+}
+// 強制オン時
+.hcb_wrap > pre[data-show-lang="1"] {
+    --hcb--data-label: attr(data-lang);
+}
+// コピーボタンがある時
+// .hcb-clipboard + pre::before {
+//  right: 26px;
+// }
+// ファイル名を表示する時
+.hcb_wrap > pre[data-file]::before {
+    padding: 0 8px 0 20px;
+    // background-colorを打ち消さないように分けて書く
+    background-image: var(--hcb--file-icon);
+    background-repeat: no-repeat;
+    background-position: center left 8px;
+    background-size: auto 10px;
+    content: attr(data-file);
+}
+// data-show-lang
+// コピーボタン
+/* stylelint-disable-next-line no-duplicate-selectors */
+.hcb_wrap {
+    --hcb-clipbtn-opacity: 0;
+}
+.hcb_wrap:hover,
+.hcb-clipboard:focus-visible {
+    --hcb-clipbtn-opacity: 100;
+}
+.hcb-clipboard {
+    position: absolute;
+    top: calc(var(--hcb--btn-offset, 0px) + 8px);
+    right: 8px;
+    z-index: 2;
+    box-sizing: border-box;
+    width: 2.25em;
+    height: 2.25em;
+    padding: 0;
+    color: #000;
+    text-align: center;
+    background: url(../../assets/img/clipboard-to-copy.svg) no-repeat center / 64% auto;
+    background-color: rgba(250, 250, 250, 0.8);
+    border: none;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(#3d3d3d, 0.25);
+    opacity: var(--hcb-clipbtn-opacity);
+    backdrop-filter: blur(2px);
+    transition: opacity 0.25s;
+    [data-show-lang="0"] + & {
+        --hcb--btn-offset: 0px;
+    }
+    [data-show-lang="1"] + & {
+        --hcb--btn-offset: 20px;
+    }
+    &.-done {
+        background-image: url(../../assets/img/clipboard-copied.svg);
+        &::before {
+            position: absolute;
+            top: 50%;
+            right: calc(4px + 100%);
+            display: block;
+            padding: 2px 4px 2px 2px;
+            color: inherit;
+            font-size: 12px;
+            font-family: Arial, Helvetica, sans-serif;
+            line-height: 1;
+            background-color: inherit;
+            border-radius: 8px;
+            content: "✓Copied";
+            translate: 0 -50%;
+        }
+    }
+}

highlighting-code-block/trunk/src/scss/front/_color--dark.scss

-                      r2886197
+                      r2994656
   Dark coloring
 */
+body {
+    --hcb-color--text: #f8f8f2;
+    --hcb-color--text-shadow: rg1a1a1ab(136, 132, 132);
+    --hcb-color--bg: #34352e;
+    --hcb-color--lang--text: #fff;
+    --hcb-color--lang--bg: #111;
+    --hcb-color--line-numbers: #999;
+    --hcb-color--highlight: rgba(255, 250, 245, 0.1);
+    --hcb-color--highlight-text: #fcfcfc;
+    --hcb-color--highlight-bg: #afa7a166;
+    --hcb-file-icon: url(../../assets/img/file-icon-dark.svg);
+    --hcb-color--scrollbar-track: rgba(255, 255, 255, 0.1);
+    --hcb-color--scrollbar-thumb: rgba(255, 255, 255, 0.2);
+:root {
+    --hcb--c: #f9f9f6;
+    // --hcb--tsh: none;
+    --hcb--bgc: #2d2e29;
+    --hcb--data-label--c: #fff;
+    --hcb--data-label--bgc: #20211f;
+    --hcb--line-numbers--c: #a3a3a3;
+    --hcb--highlight-color: rgba(255, 250, 245, 0.1);
+    --hcb--file-icon: url(../../assets/img/file-icon-dark.svg);
+    --hcb--scbar-track--bgc: rgba(255, 255, 255, 0.1);
+    --hcb--scbar-thumb--bgc: rgba(255, 255, 255, 0.2);
+}

highlighting-code-block/trunk/src/scss/front/_color--light.scss

-                      r2886197
+                      r2994656
   Light coloring
 */
+body {
+    --hcb-color--text: #1f1e1e;
+    --hcb-color--text-shadow: #fff;
+    --hcb-color--bg: #f7f6f6;
+    --hcb-color--lang--text: #1f1e1e;
+    --hcb-color--lang--bg: #dedede;
+    --hcb-color--line-numbers: #999;
+    --hcb-color--highlight: rgba(150, 120, 100, 0.1);
+    --hcb-color--highlight-text: #f5f2f0;
+    --hcb-color--highlight-bg: #b1aead;
+    --hcb-file-icon: url(../../assets/img/file-icon-light.svg);
+    --hcb-color--scrollbar-track: rgba(0, 0, 0, 0.05);
+    --hcb-color--scrollbar-thumb: #0000001a;
+:root {
+    --hcb--tsh: 1px 1px 0px rgb(240, 240, 240);
+}

Context Navigation

Legend:

Download in other formats: