forked from mirrors/hugo-theme-terminal
revamp code highlighting
This commit is contained in:
panr
@ -100,11 +100,7 @@ a.read-more:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.code-toolbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.code-toolbar .toolbar-item a {
|
||||
.copy-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -115,8 +111,7 @@ a.read-more:active {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
@ -1,80 +1,30 @@
|
||||
pre {
|
||||
code {
|
||||
color: var(--accent);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent)
|
||||
}
|
||||
|
||||
pre:not(.chroma),
|
||||
.highlight {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.code-toolbar {
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
pre.chroma {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.code-toolbar + .code-toolbar,
|
||||
.code-toolbar + .highlight,
|
||||
.code-toolbar + .highlight .code-toolbar {
|
||||
border-top: 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.code-toolbar pre, .code-toolbar code {
|
||||
pre code {
|
||||
color: var(--foreground);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.code-toolbar code {
|
||||
display: block;
|
||||
color: color-mix(in srgb, var(--accent) 50%, var(--foreground));
|
||||
}
|
||||
|
||||
.code-toolbar > .toolbar button {
|
||||
font-size: 0.8em !important;
|
||||
font-weight: bold !important;
|
||||
background: var(--accent) !important;
|
||||
color: var(--background) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid var(--background) !important;
|
||||
margin: 6px !important;
|
||||
padding: 10px !important;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.collapsable-code {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.collapsable-code input[type=checkbox] {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.collapsable-code input[type=checkbox]:checked ~ pre,
|
||||
.collapsable-code input[type=checkbox]:checked ~ .code-toolbar pre {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsable-code input[type=checkbox]:checked ~ .code-toolbar {
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.collapsable-code input[type=checkbox]:checked ~ .code-toolbar .toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsable-code input[type=checkbox]:checked ~ label .collapsable-code__toggle::after {
|
||||
content: attr(data-label-expand);
|
||||
}
|
||||
|
||||
.collapsable-code label {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid var(--accent);
|
||||
cursor: pointer;
|
||||
.highlight {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsable-code__title {
|
||||
@ -94,16 +44,27 @@ pre {
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
.collapsable-code__toggle {
|
||||
.collapsable-code summary {
|
||||
border-bottom: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
font-size: 16px;
|
||||
padding: 3px 10px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapsable-code__toggle::after {
|
||||
content: attr(data-label-collapse);
|
||||
.collapsable-code summary:hover {
|
||||
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
}
|
||||
|
||||
.collapsable-code summary::marker {
|
||||
content: "+";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collapsable-code[open] summary::marker {
|
||||
content: "-";
|
||||
}
|
||||
|
||||
|
||||
.collapsable-code pre {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -112,6 +73,20 @@ pre {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.collapsable-code .code-toolbar {
|
||||
margin: 0;
|
||||
.chroma .copy-button {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: .5em;
|
||||
z-index: 1;
|
||||
background: color-mix(in srgb, var(--foreground) 5%, var(--background));
|
||||
}
|
||||
|
||||
.chroma:hover .copy-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.chroma .copy-button:hover {
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--background));
|
||||
}
|
||||
|
||||
@ -1,322 +0,0 @@
|
||||
/* PrismJS 1.24.1
|
||||
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+bash+c+csharp+cpp+cmake+coffeescript+csp+css-extras+diff+django+docker+elixir+elm+erlang+fsharp+flow+git+go+graphql+haml+handlebars+haskell+http+java+json+kotlin+latex+less+llvm+makefile+markdown+markup-templating+nasm+objectivec+ocaml+perl+php+php-extras+powershell+processing+pug+python+r+jsx+tsx+reason+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+textile+toml+twig+typescript+vim+visual-basic+wasm+yaml&plugins=line-highlight+line-numbers+jsonp-highlight+highlight-keywords+command-line+toolbar+copy-to-clipboard */
|
||||
|
||||
/**
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
code[class*=language-],
|
||||
pre[class*=language-] {
|
||||
color: #ccc;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
tab-size: 4;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*=language-] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*=language-],
|
||||
pre[class*=language-] {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*=language-] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
|
||||
pre[data-line] {
|
||||
position: relative;
|
||||
padding: 1em 0 1em 3em;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: inherit 0;
|
||||
margin-top: 1em;
|
||||
|
||||
/* Same as .prism’s padding-top */
|
||||
background: hsla(24deg, 20%, 50%, 8%);
|
||||
background: linear-gradient(to right, hsla(24deg, 20%, 50%, 10%) 70%, hsla(24deg, 20%, 50%, 0%));
|
||||
pointer-events: none;
|
||||
line-height: inherit;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.line-highlight {
|
||||
/*
|
||||
* This will prevent browsers from replacing the background color with white.
|
||||
* It's necessary because the element is layered on top of the displayed code.
|
||||
*/
|
||||
-webkit-print-color-adjust: exact;
|
||||
color-adjust: exact;
|
||||
}
|
||||
}
|
||||
|
||||
.line-highlight::before,
|
||||
.line-highlight[data-end]::after {
|
||||
content: attr(data-start);
|
||||
position: absolute;
|
||||
top: 0.4em;
|
||||
left: 0.6em;
|
||||
min-width: 1em;
|
||||
padding: 0 0.5em;
|
||||
background-color: hsla(24deg, 20%, 50%, 40%);
|
||||
color: hsl(24deg, 20%, 95%);
|
||||
font: bold 65%/1.5 sans-serif;
|
||||
text-align: center;
|
||||
vertical-align: 0.3em;
|
||||
border-radius: 999px;
|
||||
text-shadow: none;
|
||||
box-shadow: 0 1px white;
|
||||
}
|
||||
|
||||
.line-highlight[data-end]::after {
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
bottom: 0.4em;
|
||||
}
|
||||
|
||||
.line-numbers .line-highlight::before,
|
||||
.line-numbers .line-highlight::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
pre[id].linkable-line-numbers span.line-numbers-rows {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
pre[id].linkable-line-numbers span.line-numbers-rows > span::before {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
pre[id].linkable-line-numbers span.line-numbers-rows > span:hover::before {
|
||||
background-color: rgba(128, 128, 128, 20%);
|
||||
}
|
||||
|
||||
pre[class*=language-].line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre[class*=language-].line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -3.8em;
|
||||
width: 3em;
|
||||
|
||||
/* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span::before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.command-line-prompt {
|
||||
border-right: 1px solid #999;
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 100%;
|
||||
letter-spacing: -1px;
|
||||
margin-right: 1em;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.command-line-prompt > span::before {
|
||||
color: #999;
|
||||
content: " ";
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
}
|
||||
|
||||
.command-line-prompt > span[data-user]::before {
|
||||
content: "["attr(data-user) "@"attr(data-host) "] $";
|
||||
}
|
||||
|
||||
.command-line-prompt > span[data-user=root]::before {
|
||||
content: "["attr(data-user) "@"attr(data-host) "] #";
|
||||
}
|
||||
|
||||
.command-line-prompt > span[data-prompt]::before {
|
||||
content: attr(data-prompt);
|
||||
}
|
||||
|
||||
div.code-toolbar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar {
|
||||
position: absolute;
|
||||
top: 0.3em;
|
||||
right: 0.2em;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
div.code-toolbar:hover > .toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Separate line b/c rules are thrown out if selector is invalid.
|
||||
IE11 and old Edge versions don't support :focus-within. */
|
||||
div.code-toolbar:focus-within > .toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item > button {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
|
||||
/* for button */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > button,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > span {
|
||||
color: #bbb;
|
||||
font-size: 0.8em;
|
||||
padding: 0 0.5em;
|
||||
background: #f5f2f0;
|
||||
background: rgba(224, 224, 224, 20%);
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 20%);
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -1,115 +1,98 @@
|
||||
code.language-css,
|
||||
code.language-scss,
|
||||
.token.boolean,
|
||||
.token.string,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.language-scss .token.string,
|
||||
.style .token.string,
|
||||
.token.attr-value,
|
||||
.token.keyword,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.statement,
|
||||
.token.regex,
|
||||
.token.atrule,
|
||||
.token.number,
|
||||
.token.inserted,
|
||||
.token.important {
|
||||
color: var(--accent) !important;
|
||||
:root {
|
||||
--first-tone: var(--accent);
|
||||
--second-tone: color-mix(in srgb, var(--accent) 70%, transparent);
|
||||
--comment: color-mix(in srgb, var(--foreground) 50%, transparent);
|
||||
}
|
||||
|
||||
.token.tag-id,
|
||||
.token.atrule-id,
|
||||
.token.operator,
|
||||
.token.unit,
|
||||
.token.placeholder,
|
||||
.token.variable,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted,
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: color-mix(in srgb, var(--accent) 70%, transparent) !important;
|
||||
}
|
||||
/* Background */ .bg { }
|
||||
/* PreWrapper */ pre.chroma { position: relative; padding:15px 0; }
|
||||
/* Custom:CodeInfo */ .chroma code[data-lang]:before { content: attr(data-lang);position:absolute;top:0;right:0;color:var(--comment);text-transform:uppercase;font-size:.8em;padding:.5em;line-height:1;}
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { }
|
||||
/* CodeLine */ .chroma .cl { }
|
||||
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
|
||||
/* Custom */ .chroma .lntd:first-child { width:auto;vertical-align:top;padding:0;margin:0;border:0; }
|
||||
/* LineTableTD */ .chroma .lntd { width:100%;vertical-align:top;padding:0;margin:0;border:0; }
|
||||
/* Custom */ .chroma .lntd code { display:grid; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
|
||||
/* LineHighlight */ .chroma .hl { background-color:color-mix(in srgb, var(--foreground) 5%, transparent) !important}
|
||||
/* LineNumbersTable */ .chroma .lnt { color:var(--comment);white-space:pre;-webkit-user-select:none;user-select:none;padding:0 15px; }
|
||||
/* LineNumbers */ .chroma .ln { color:var(--comment);white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.8em;padding:0 0.4em 0 0; }
|
||||
/* Line */ .chroma .line { display:flex;padding:0 15px; }
|
||||
/* Keyword */ .chroma .k { color:var(--second-tone) }
|
||||
/* KeywordConstant */ .chroma .kc { color:var(--second-tone) }
|
||||
/* KeywordDeclaration */ .chroma .kd { color:var(--second-tone) }
|
||||
/* KeywordNamespace */ .chroma .kn { color:var(--second-tone) }
|
||||
/* KeywordPseudo */ .chroma .kp { color:var(--second-tone) }
|
||||
/* KeywordReserved */ .chroma .kr { color:var(--second-tone) }
|
||||
/* KeywordType */ .chroma .kt { color:var(--second-tone) }
|
||||
/* Name */ .chroma .n { color:var(--first-tone) }
|
||||
/* NameAttribute */ .chroma .na { color:var(--second-tone) }
|
||||
/* NameBuiltin */ .chroma .nb { color:var(--first-tone) }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { color:var(--first-tone) }
|
||||
/* NameClass */ .chroma .nc { color:var(--foreground) }
|
||||
/* NameConstant */ .chroma .no { color:var(--first-tone) }
|
||||
/* NameDecorator */ .chroma .nd { color:var(--first-tone) }
|
||||
/* NameEntity */ .chroma .ni { color:var(--first-tone) }
|
||||
/* NameException */ .chroma .ne { color:var(--first-tone) }
|
||||
/* NameFunction */ .chroma .nf { color:var(--first-tone); }
|
||||
/* NameFunctionMagic */ .chroma .fm { color:var(--first-tone); }
|
||||
/* NameLabel */ .chroma .nl { color:var(--first-tone) }
|
||||
/* NameNamespace */ .chroma .nn { color:var(--first-tone) }
|
||||
/* NameOther */ .chroma .nx { color:var(--first-tone) }
|
||||
/* NameProperty */ .chroma .py { color:var(--first-tone) }
|
||||
/* NameTag */ .chroma .nt { color:var(--first-tone) }
|
||||
/* NameVariable */ .chroma .nv { color:var(--first-tone) }
|
||||
/* NameVariableClass */ .chroma .vc { color:var(--first-tone) }
|
||||
/* NameVariableGlobal */ .chroma .vg { color:var(--first-tone) }
|
||||
/* NameVariableInstance */ .chroma .vi { color:var(--first-tone) }
|
||||
/* NameVariableMagic */ .chroma .vm { color:var(--first-tone) }
|
||||
/* Literal */ .chroma .l { }
|
||||
/* LiteralDate */ .chroma .ld { }
|
||||
/* LiteralString */ .chroma .s { color:var(--foreground) }
|
||||
/* LiteralStringAffix */ .chroma .sa { color:var(--foreground) }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color:var(--foreground) }
|
||||
/* LiteralStringChar */ .chroma .sc { color:var(--foreground) }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color:var(--foreground) }
|
||||
/* LiteralStringDoc */ .chroma .sd { color:var(--foreground) }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color:var(--foreground) }
|
||||
/* LiteralStringEscape */ .chroma .se { color:var(--foreground) }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color:var(--foreground) }
|
||||
/* LiteralStringInterpol */ .chroma .si { color:var(--foreground) }
|
||||
/* LiteralStringOther */ .chroma .sx { color:var(--foreground) }
|
||||
/* LiteralStringRegex */ .chroma .sr { color:var(--foreground) }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color:var(--foreground) }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color:var(--foreground) }
|
||||
/* LiteralNumber */ .chroma .m { color:var(--first-tone) }
|
||||
/* LiteralNumberBin */ .chroma .mb { color:var(--first-tone) }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color:var(--first-tone) }
|
||||
/* LiteralNumberHex */ .chroma .mh { color:var(--first-tone) }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color:var(--first-tone) }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color:var(--first-tone) }
|
||||
/* LiteralNumberOct */ .chroma .mo { color:var(--first-tone) }
|
||||
/* Operator */ .chroma .o { color:var(--foreground) }
|
||||
/* OperatorWord */ .chroma .ow { color:var(--foreground) }
|
||||
/* Punctuation */ .chroma .p { color:var(--foreground) }
|
||||
/* Comment */ .chroma .c { color:var(--comment) }
|
||||
/* CommentHashbang */ .chroma .ch { color:var(--comment) }
|
||||
/* CommentMultiline */ .chroma .cm { color:var(--comment) }
|
||||
/* CommentSingle */ .chroma .c1 { color:var(--comment) }
|
||||
/* CommentSpecial */ .chroma .cs { color:var(--comment) }
|
||||
/* CommentPreproc */ .chroma .cp { color:var(--comment) }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color:var(--comment) }
|
||||
/* Generic */ .chroma .g { }
|
||||
/* GenericDeleted */ .chroma .gd { color:var(--first-tone) }
|
||||
/* GenericEmph */ .chroma .ge { }
|
||||
/* GenericError */ .chroma .gr { }
|
||||
/* GenericHeading */ .chroma .gh { }
|
||||
/* GenericInserted */ .chroma .gi { color:var(--second-tone); }
|
||||
/* GenericOutput */ .chroma .go { }
|
||||
/* GenericPrompt */ .chroma .gp { }
|
||||
/* GenericStrong */ .chroma .gs { }
|
||||
/* GenericSubheading */ .chroma .gu { }
|
||||
/* GenericTraceback */ .chroma .gt { }
|
||||
/* GenericUnderline */ .chroma .gl { }
|
||||
/* TextWhitespace */ .chroma .w { }
|
||||
|
||||
.token.property,
|
||||
.token.function,
|
||||
.token.function-name,
|
||||
.token.deleted,
|
||||
code.language-javascript,
|
||||
code.language-html,
|
||||
.command-line-prompt > span::before {
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.tag,
|
||||
.token.punctuation {
|
||||
color: color-mix(in srgb, var(--accent) 50%, var(--foreground)) !important;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: color-mix(in srgb, var(--foreground) 30%, transparent) !important;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
pre[data-line] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre[class*=language-] {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
pointer-events: none;
|
||||
line-height: inherit;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.line-highlight::before,
|
||||
.line-highlight[data-end]::after {
|
||||
content: attr(data-start);
|
||||
position: absolute;
|
||||
|
||||
/* top: .4em; */
|
||||
left: 0.6em;
|
||||
min-width: 1em;
|
||||
padding: 0 0.5em;
|
||||
background-color: color-mix(in srgb, var(--foreground) 40%, transparent);
|
||||
color: var(--foreground);
|
||||
font: bold 65%/1.5 sans-serif;
|
||||
text-align: center;
|
||||
vertical-align: 0.3em;
|
||||
border-radius: 999px;
|
||||
text-shadow: none;
|
||||
box-shadow: 0 1px var(--foreground);
|
||||
}
|
||||
|
||||
.line-highlight[data-end]::after {
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
bottom: 0.4em;
|
||||
}
|
||||
|
||||
.line-numbers .line-highlight::before,
|
||||
.line-numbers .line-highlight::after {
|
||||
content: none;
|
||||
}
|
||||
/* LANGUAGE FIXES */
|
||||
/* PHP CommentPreproc */ .chroma .language-php .cp { color:var(--foreground) }
|
||||
|
||||
@ -47,7 +47,6 @@ body {
|
||||
h1,
|
||||
h2 {
|
||||
font-size: calc(var(--font-size) * 1.1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
@ -262,7 +261,6 @@ kbd {
|
||||
monospace !important;
|
||||
font-feature-settings: normal;
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
color: var(--accent);
|
||||
padding: 1px 6px;
|
||||
margin: 0 2px;
|
||||
font-size: 0.95rem;
|
||||
|
||||
20
assets/js/copy-to-clipboard.js
Normal file
20
assets/js/copy-to-clipboard.js
Normal file
@ -0,0 +1,20 @@
|
||||
const blockcodes = document.querySelectorAll(".chroma code[data-lang]");
|
||||
|
||||
for (const bc of blockcodes) {
|
||||
const parent = bc.parentElement;
|
||||
const content = bc.innerText.split("\n").filter(Boolean).join("\n");
|
||||
const cpbutton = document.createElement("button");
|
||||
cpbutton.classList.add("copy-button");
|
||||
cpbutton.innerText = "Copy";
|
||||
|
||||
cpbutton.addEventListener("click", () => {
|
||||
cpbutton.innerText = "Copied";
|
||||
setTimeout(() => {
|
||||
cpbutton.innerText = "Copy";
|
||||
}, 1000);
|
||||
|
||||
navigator.clipboard.writeText(content);
|
||||
});
|
||||
|
||||
parent.prepend(cpbutton);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -13,9 +13,9 @@
|
||||
</footer>
|
||||
|
||||
{{ $menu := resources.Get "js/menu.js" | js.Build }}
|
||||
{{ $prism := resources.Get "js/prism.js" | js.Build }}
|
||||
{{ $cp := resources.Get "js/copy-to-clipboard.js" | js.Build }}
|
||||
|
||||
{{ $bundle := slice $menu $prism | resources.Concat "bundle.js" | resources.Minify }}
|
||||
{{ $bundle := slice $menu $cp | resources.Concat "bundle.js" | resources.Minify }}
|
||||
|
||||
<script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
|
||||
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
<div class="pagination">
|
||||
<div class="pagination__buttons">
|
||||
{{ if .Paginator.HasPrev }}
|
||||
<a href="{{ .Paginator.Prev.URL }}" class="button prev">
|
||||
<span class="button__icon">←</span>
|
||||
<a href="{{ .Paginator.Prev.URL }}" class="button inline prev">
|
||||
<span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ if .Paginator.HasNext }}
|
||||
<a href="{{ .Paginator.Next.URL }}" class="button next">
|
||||
<a href="{{ .Paginator.Next.URL }}" class="button inline next">
|
||||
<span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>
|
||||
<span class="button__icon">→</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
{{ $id := delimit (shuffle (seq 1 9)) "" }}
|
||||
{{ $open := .Get "open" }}
|
||||
{{ $lang := .Get "language" }}
|
||||
|
||||
{{ if .Get "language" }}
|
||||
<div class="collapsable-code">
|
||||
<input id="{{ .Get "id" | default $id }}" type="checkbox" {{ if ( eq ( .Get "isCollapsed" ) "true" ) -}} checked {{- end }} />
|
||||
<label for="{{ .Get "id" | default $id }}">
|
||||
<span class="collapsable-code__language">{{ .Get "language" }}</span>
|
||||
{{ if .Get "title" }}<span class="collapsable-code__title">{{ .Get "title" | markdownify }}</span>{{ end }}
|
||||
<span class="collapsable-code__toggle" data-label-expand="{{ .Get "expand" | default "△" }}" data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
|
||||
</label>
|
||||
<pre {{ if .Get "language" }}class="language-{{ .Get "language" }}" {{ end }}><code>{{ .Inner | string }}</code></pre>
|
||||
</div>
|
||||
{{- if $lang -}}
|
||||
<details class="collapsable-code" title="Click to interact" {{ if eq $open "true" -}} open {{- end }}>
|
||||
<summary>
|
||||
<span class="collapsable-code__language">{{ $lang }}</span>
|
||||
{{- if .Get "title" }}<span class="collapsable-code__title">{{ .Get "title" | markdownify }}</span>{{ end -}}
|
||||
</summary>
|
||||
{{ $trInner := trim .Inner "\n" }}
|
||||
{{- transform.Highlight $trInner ($lang) -}}
|
||||
</details>
|
||||
{{ else }}
|
||||
{{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}
|
||||
{{ end }}
|
||||
{{- end -}}
|
||||
|
||||
Reference in New Issue
Block a user