Added optional rendering of code block titles (#148)
This commit is contained in:
parent
3912c98dad
commit
c67ffb76ef
13
assets/js/code-title.js
Normal file
13
assets/js/code-title.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
function addTitleToCodeBlocks() {
|
||||||
|
var els = document.getElementsByClassName("highlight");
|
||||||
|
for (var i = 0; i < els.length; i++) {
|
||||||
|
if (els[i].title.length) {
|
||||||
|
let div = document.createElement("div");
|
||||||
|
if (els[i].getElementsByClassName("code-title").length) continue;
|
||||||
|
div.textContent=els[i].title;
|
||||||
|
div.classList.add("code-title")
|
||||||
|
els[i].insertBefore(div, els[i].firstChild);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
@ -1,18 +1,26 @@
|
|||||||
const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
|
const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
|
||||||
const currentTheme = localStorage.getItem('theme') ?? userPref
|
const currentTheme = localStorage.getItem('theme') ?? userPref
|
||||||
|
const syntaxTheme = document.querySelector("#theme-link");
|
||||||
|
|
||||||
|
|
||||||
|
{{ $darkSyntax := resources.Get "styles/_dark_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify }}
|
||||||
|
{{ $lightSyntax := resources.Get "styles/_light_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify }}
|
||||||
|
|
||||||
if (currentTheme) {
|
if (currentTheme) {
|
||||||
document.documentElement.setAttribute('saved-theme', currentTheme);
|
document.documentElement.setAttribute('saved-theme', currentTheme);
|
||||||
|
(currentTheme === 'dark') ? syntaxTheme.href = '{{ $darkSyntax.Permalink }}' : syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
|
||||||
}
|
}
|
||||||
|
|
||||||
const switchTheme = (e) => {
|
const switchTheme = (e) => {
|
||||||
if (e.target.checked) {
|
if (e.target.checked) {
|
||||||
document.documentElement.setAttribute('saved-theme', 'dark')
|
document.documentElement.setAttribute('saved-theme', 'dark');
|
||||||
localStorage.setItem('theme', 'dark')
|
localStorage.setItem('theme', 'dark');
|
||||||
|
syntaxTheme.href = '{{ $darkSyntax.Permalink }}';
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
document.documentElement.setAttribute('saved-theme', 'light')
|
document.documentElement.setAttribute('saved-theme', 'light')
|
||||||
localStorage.setItem('theme', 'light')
|
localStorage.setItem('theme', 'light')
|
||||||
|
syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
85
assets/styles/_dark_syntax.scss
Normal file
85
assets/styles/_dark_syntax.scss
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
/* Background */ .bg { color: #f8f8f2; background-color: #282a36; }
|
||||||
|
/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #282a36; }
|
||||||
|
/* Other */ .chroma .x { }
|
||||||
|
/* Error */ .chroma .err { }
|
||||||
|
/* CodeLine */ .chroma .cl { }
|
||||||
|
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||||
|
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||||
|
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
|
||||||
|
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||||
|
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||||
|
/* Line */ .chroma .line { display: flex; }
|
||||||
|
/* Keyword */ .chroma .k { color: #ff79c6 }
|
||||||
|
/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
|
||||||
|
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
|
||||||
|
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
|
||||||
|
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
|
||||||
|
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
|
||||||
|
/* KeywordType */ .chroma .kt { color: #8be9fd }
|
||||||
|
/* Name */ .chroma .n { }
|
||||||
|
/* NameAttribute */ .chroma .na { color: #50fa7b }
|
||||||
|
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
|
||||||
|
/* NameBuiltinPseudo */ .chroma .bp { }
|
||||||
|
/* NameClass */ .chroma .nc { color: #50fa7b }
|
||||||
|
/* NameConstant */ .chroma .no { }
|
||||||
|
/* NameDecorator */ .chroma .nd { }
|
||||||
|
/* NameEntity */ .chroma .ni { }
|
||||||
|
/* NameException */ .chroma .ne { }
|
||||||
|
/* NameFunction */ .chroma .nf { color: #50fa7b }
|
||||||
|
/* NameFunctionMagic */ .chroma .fm { }
|
||||||
|
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
|
||||||
|
/* NameNamespace */ .chroma .nn { }
|
||||||
|
/* NameOther */ .chroma .nx { }
|
||||||
|
/* NameProperty */ .chroma .py { }
|
||||||
|
/* NameTag */ .chroma .nt { color: #ff79c6 }
|
||||||
|
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
|
||||||
|
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
|
||||||
|
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
|
||||||
|
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
|
||||||
|
/* NameVariableMagic */ .chroma .vm { }
|
||||||
|
/* Literal */ .chroma .l { }
|
||||||
|
/* LiteralDate */ .chroma .ld { }
|
||||||
|
/* LiteralString */ .chroma .s { color: #f1fa8c }
|
||||||
|
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
|
||||||
|
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
|
||||||
|
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
|
||||||
|
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
|
||||||
|
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
|
||||||
|
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
|
||||||
|
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
|
||||||
|
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
|
||||||
|
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
|
||||||
|
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
|
||||||
|
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
|
||||||
|
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
|
||||||
|
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
|
||||||
|
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
|
||||||
|
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
|
||||||
|
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
|
||||||
|
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
|
||||||
|
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
|
||||||
|
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
|
||||||
|
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
|
||||||
|
/* Operator */ .chroma .o { color: #ff79c6 }
|
||||||
|
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
|
||||||
|
/* Punctuation */ .chroma .p { }
|
||||||
|
/* Comment */ .chroma .c { color: #6272a4 }
|
||||||
|
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
|
||||||
|
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
|
||||||
|
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
|
||||||
|
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
|
||||||
|
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
|
||||||
|
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
|
||||||
|
/* Generic */ .chroma .g { }
|
||||||
|
/* GenericDeleted */ .chroma .gd { color: #ff5555 }
|
||||||
|
/* GenericEmph */ .chroma .ge { text-decoration: underline }
|
||||||
|
/* GenericError */ .chroma .gr { }
|
||||||
|
/* GenericHeading */ .chroma .gh { font-weight: bold }
|
||||||
|
/* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold }
|
||||||
|
/* GenericOutput */ .chroma .go { color: #44475a }
|
||||||
|
/* GenericPrompt */ .chroma .gp { }
|
||||||
|
/* GenericStrong */ .chroma .gs { }
|
||||||
|
/* GenericSubheading */ .chroma .gu { font-weight: bold }
|
||||||
|
/* GenericTraceback */ .chroma .gt { }
|
||||||
|
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
|
||||||
|
/* TextWhitespace */ .chroma .w { }
|
85
assets/styles/_light_syntax.scss
Normal file
85
assets/styles/_light_syntax.scss
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
/* Background */ .bg { color: #272822; background-color: #fafafa; }
|
||||||
|
/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
|
||||||
|
/* Other */ .chroma .x { }
|
||||||
|
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||||
|
/* CodeLine */ .chroma .cl { }
|
||||||
|
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||||
|
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||||
|
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
|
||||||
|
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||||
|
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||||
|
/* Line */ .chroma .line { display: flex; }
|
||||||
|
/* Keyword */ .chroma .k { color: #00a8c8 }
|
||||||
|
/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
|
||||||
|
/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
|
||||||
|
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
|
||||||
|
/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
|
||||||
|
/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
|
||||||
|
/* KeywordType */ .chroma .kt { color: #00a8c8 }
|
||||||
|
/* Name */ .chroma .n { color: #111111 }
|
||||||
|
/* NameAttribute */ .chroma .na { color: #75af00 }
|
||||||
|
/* NameBuiltin */ .chroma .nb { color: #111111 }
|
||||||
|
/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
|
||||||
|
/* NameClass */ .chroma .nc { color: #75af00 }
|
||||||
|
/* NameConstant */ .chroma .no { color: #00a8c8 }
|
||||||
|
/* NameDecorator */ .chroma .nd { color: #75af00 }
|
||||||
|
/* NameEntity */ .chroma .ni { color: #111111 }
|
||||||
|
/* NameException */ .chroma .ne { color: #75af00 }
|
||||||
|
/* NameFunction */ .chroma .nf { color: #75af00 }
|
||||||
|
/* NameFunctionMagic */ .chroma .fm { color: #111111 }
|
||||||
|
/* NameLabel */ .chroma .nl { color: #111111 }
|
||||||
|
/* NameNamespace */ .chroma .nn { color: #111111 }
|
||||||
|
/* NameOther */ .chroma .nx { color: #75af00 }
|
||||||
|
/* NameProperty */ .chroma .py { color: #111111 }
|
||||||
|
/* NameTag */ .chroma .nt { color: #f92672 }
|
||||||
|
/* NameVariable */ .chroma .nv { color: #111111 }
|
||||||
|
/* NameVariableClass */ .chroma .vc { color: #111111 }
|
||||||
|
/* NameVariableGlobal */ .chroma .vg { color: #111111 }
|
||||||
|
/* NameVariableInstance */ .chroma .vi { color: #111111 }
|
||||||
|
/* NameVariableMagic */ .chroma .vm { color: #111111 }
|
||||||
|
/* Literal */ .chroma .l { color: #ae81ff }
|
||||||
|
/* LiteralDate */ .chroma .ld { color: #d88200 }
|
||||||
|
/* LiteralString */ .chroma .s { color: #d88200 }
|
||||||
|
/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
|
||||||
|
/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
|
||||||
|
/* LiteralStringChar */ .chroma .sc { color: #d88200 }
|
||||||
|
/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
|
||||||
|
/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
|
||||||
|
/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
|
||||||
|
/* LiteralStringEscape */ .chroma .se { color: #8045ff }
|
||||||
|
/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
|
||||||
|
/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
|
||||||
|
/* LiteralStringOther */ .chroma .sx { color: #d88200 }
|
||||||
|
/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
|
||||||
|
/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
|
||||||
|
/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
|
||||||
|
/* LiteralNumber */ .chroma .m { color: #ae81ff }
|
||||||
|
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
|
||||||
|
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
|
||||||
|
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
|
||||||
|
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
|
||||||
|
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
|
||||||
|
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
|
||||||
|
/* Operator */ .chroma .o { color: #f92672 }
|
||||||
|
/* OperatorWord */ .chroma .ow { color: #f92672 }
|
||||||
|
/* Punctuation */ .chroma .p { color: #111111 }
|
||||||
|
/* Comment */ .chroma .c { color: #75715e }
|
||||||
|
/* CommentHashbang */ .chroma .ch { color: #75715e }
|
||||||
|
/* CommentMultiline */ .chroma .cm { color: #75715e }
|
||||||
|
/* CommentSingle */ .chroma .c1 { color: #75715e }
|
||||||
|
/* CommentSpecial */ .chroma .cs { color: #75715e }
|
||||||
|
/* CommentPreproc */ .chroma .cp { color: #75715e }
|
||||||
|
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
|
||||||
|
/* Generic */ .chroma .g { }
|
||||||
|
/* GenericDeleted */ .chroma .gd { }
|
||||||
|
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||||
|
/* GenericError */ .chroma .gr { }
|
||||||
|
/* GenericHeading */ .chroma .gh { }
|
||||||
|
/* GenericInserted */ .chroma .gi { }
|
||||||
|
/* GenericOutput */ .chroma .go { }
|
||||||
|
/* GenericPrompt */ .chroma .gp { }
|
||||||
|
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||||
|
/* GenericSubheading */ .chroma .gu { }
|
||||||
|
/* GenericTraceback */ .chroma .gt { }
|
||||||
|
/* GenericUnderline */ .chroma .gl { }
|
||||||
|
/* TextWhitespace */ .chroma .w { }
|
20
assets/styles/code-title.scss
Normal file
20
assets/styles/code-title.scss
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
.code-title {
|
||||||
|
color: var(--primary) ;
|
||||||
|
font-family: monospace;
|
||||||
|
width: max-content;
|
||||||
|
overflow-x: auto;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1em;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.5em 0.6em 0.6em; // + 1.2 em
|
||||||
|
max-width: calc(100% - 1.2em); // (-1.2 em) fits article width exactly
|
||||||
|
margin-bottom: -0.2em;
|
||||||
|
z-index: -1;
|
||||||
|
border-top-left-radius: 0.3em;
|
||||||
|
border-top-right-radius: 0.3em;
|
||||||
|
font-size: 0.9em;
|
||||||
|
background-color: var(--lightgray);
|
||||||
|
filter: hue-rotate(-30deg) contrast(1.0) opacity(0.8);
|
||||||
|
}
|
@ -1,99 +1,58 @@
|
|||||||
/* Background */ .chroma { color: #f8f8f2; background-color: #282a36; overflow: hidden }
|
// Overrides
|
||||||
/* Other */ .chroma .x { }
|
/* Background */
|
||||||
/* Error */ .chroma .err { }
|
.chroma {
|
||||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
overflow: hidden !important;
|
||||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
background-color: var(--lightgray) !important;
|
||||||
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
|
}
|
||||||
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
|
||||||
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
/* LineTable */
|
||||||
/* Keyword */ .chroma .k { color: #ff79c6 }
|
.chroma .lntable {
|
||||||
/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
|
width: auto !important;
|
||||||
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
|
overflow: auto !important;
|
||||||
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
|
display: block !important;
|
||||||
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
|
}
|
||||||
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
|
|
||||||
/* KeywordType */ .chroma .kt { color: #8be9fd }
|
/* LineHighlight */
|
||||||
/* Name */ .chroma .n { }
|
.chroma .hl {
|
||||||
/* NameAttribute */ .chroma .na { color: #50fa7b }
|
display: block !important;
|
||||||
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
|
width: 100% !important;
|
||||||
/* NameBuiltinPseudo */ .chroma .bp { }
|
}
|
||||||
/* NameClass */ .chroma .nc { color: #50fa7b }
|
|
||||||
/* NameConstant */ .chroma .no { }
|
/* LineNumbersTable */
|
||||||
/* NameDecorator */ .chroma .nd { }
|
.chroma .lnt {
|
||||||
/* NameEntity */ .chroma .ni { }
|
margin-right: 0.0em !important;
|
||||||
/* NameException */ .chroma .ne { }
|
padding: 0 0.0em 0 0.0em !important;
|
||||||
/* NameFunction */ .chroma .nf { color: #50fa7b }
|
}
|
||||||
/* NameFunctionMagic */ .chroma .fm { }
|
|
||||||
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
|
/* LineNumbers */
|
||||||
/* NameNamespace */ .chroma .nn { }
|
.chroma .ln {
|
||||||
/* NameOther */ .chroma .nx { }
|
margin-right: 0.0em !important;
|
||||||
/* NameProperty */ .chroma .py { }
|
padding: 0 0.0em 0 0.0em !important;
|
||||||
/* NameTag */ .chroma .nt { color: #ff79c6 }
|
}
|
||||||
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
|
|
||||||
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
|
/* GenericDeleted */
|
||||||
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
|
.chroma .gd {
|
||||||
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
|
color: #8b080b !important;
|
||||||
/* NameVariableMagic */ .chroma .vm { }
|
}
|
||||||
/* Literal */ .chroma .l { }
|
|
||||||
/* LiteralDate */ .chroma .ld { }
|
/* GenericInserted */
|
||||||
/* LiteralString */ .chroma .s { color: #f1fa8c }
|
.chroma .gi {
|
||||||
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
|
font-weight: bold !important;
|
||||||
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
|
}
|
||||||
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
|
|
||||||
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
|
|
||||||
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
|
|
||||||
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
|
|
||||||
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
|
|
||||||
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
|
|
||||||
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
|
|
||||||
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
|
|
||||||
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
|
|
||||||
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
|
|
||||||
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
|
|
||||||
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
|
|
||||||
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
|
|
||||||
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
|
|
||||||
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
|
|
||||||
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
|
|
||||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
|
|
||||||
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
|
|
||||||
/* Operator */ .chroma .o { color: #ff79c6 }
|
|
||||||
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
|
|
||||||
/* Punctuation */ .chroma .p { }
|
|
||||||
/* Comment */ .chroma .c { color: #6272a4 }
|
|
||||||
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
|
|
||||||
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
|
|
||||||
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
|
|
||||||
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
|
|
||||||
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
|
|
||||||
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
|
|
||||||
/* Generic */ .chroma .g { }
|
|
||||||
/* GenericDeleted */ .chroma .gd { color: #8b080b }
|
|
||||||
/* GenericEmph */ .chroma .ge { text-decoration: underline }
|
|
||||||
/* GenericError */ .chroma .gr { }
|
|
||||||
/* GenericHeading */ .chroma .gh { font-weight: bold }
|
|
||||||
/* GenericInserted */ .chroma .gi { font-weight: bold }
|
|
||||||
/* GenericOutput */ .chroma .go { color: #44475a }
|
|
||||||
/* GenericPrompt */ .chroma .gp { }
|
|
||||||
/* GenericStrong */ .chroma .gs { }
|
|
||||||
/* GenericSubheading */ .chroma .gu { font-weight: bold }
|
|
||||||
/* GenericTraceback */ .chroma .gt { }
|
|
||||||
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
|
|
||||||
/* TextWhitespace */ .chroma .w { }
|
|
||||||
|
|
||||||
.lntd:first-of-type > .chroma {
|
.lntd:first-of-type > .chroma {
|
||||||
padding-right: 0;
|
padding-right: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chroma code {
|
.chroma code {
|
||||||
font-family: 'Fira Code' !important;
|
font-family: 'Fira Code' !important;
|
||||||
font-size: 0.85em;
|
font-size: 0.85em !important;
|
||||||
line-height: 1em;
|
line-height: 2em !important;
|
||||||
background: none;
|
background: none !important;
|
||||||
padding: 0;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chroma {
|
.chroma {
|
||||||
border-radius: 3px;
|
border-radius: 3px !important;
|
||||||
margin: 0;
|
margin: 0 !important;
|
||||||
}
|
}
|
@ -8,9 +8,9 @@ weight: 0
|
|||||||
## Configuration
|
## Configuration
|
||||||
Quartz is designed to be extremely configurable. You can find the bulk of the configuration scattered throughout the repository depending on how in-depth you'd like to get.
|
Quartz is designed to be extremely configurable. You can find the bulk of the configuration scattered throughout the repository depending on how in-depth you'd like to get.
|
||||||
|
|
||||||
The majority of configuration can be be found under `data/config.yaml`. An annotated example configuration is shown below.
|
The majority of configuration can be found under `data/config.yaml`. An annotated example configuration is shown below.
|
||||||
|
|
||||||
```yaml
|
```yaml {title="data/config.yaml"}
|
||||||
# The name to display in the footer
|
# The name to display in the footer
|
||||||
name: Jacky Zhao
|
name: Jacky Zhao
|
||||||
|
|
||||||
@ -25,6 +25,9 @@ openToc: false
|
|||||||
# whether to display on-hover link preview cards
|
# whether to display on-hover link preview cards
|
||||||
enableLinkPreview: true
|
enableLinkPreview: true
|
||||||
|
|
||||||
|
# whether to render titles for code blocks
|
||||||
|
enableCodeBlockTitle: true
|
||||||
|
|
||||||
# whether to try to process Latex
|
# whether to try to process Latex
|
||||||
enableLatex: true
|
enableLatex: true
|
||||||
|
|
||||||
@ -60,12 +63,34 @@ links:
|
|||||||
link: https://github.com/jackyzha0
|
link: https://github.com/jackyzha0
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Code Block Titles
|
||||||
|
|
||||||
|
To add code block titles with Quartz:
|
||||||
|
|
||||||
|
1. Ensure that code block titles are enabled in Quartz's configuration:
|
||||||
|
|
||||||
|
```yaml {title="data/config.yaml", linenos=false}
|
||||||
|
enableCodeBlockTitle: true
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Add the `title` attribute to the desired [code block
|
||||||
|
fence](https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences):
|
||||||
|
|
||||||
|
```markdown {linenos=false}
|
||||||
|
```yaml {title="data/config.yaml"}
|
||||||
|
enableCodeBlockTitle: true # example from step 1
|
||||||
|
```
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note** that if `{title=<my-title>}` is included, and code block titles are not
|
||||||
|
enabled, no errors will occur and the title attribute will be ignored.
|
||||||
|
|
||||||
### HTML Favicons
|
### HTML Favicons
|
||||||
If you would like to customize the favicons of your quartz-based website, you
|
If you would like to customize the favicons of your quartz-based website, you
|
||||||
can add them to the `data/config.yaml` file. The **default** without any set
|
can add them to the `data/config.yaml` file. The **default** without any set
|
||||||
`favicon` key is:
|
`favicon` key is:
|
||||||
|
|
||||||
```html
|
```html {title="layouts/partials/head.html", linenostart=15}
|
||||||
<link rel="shortcut icon" href="icon.png" type="image/png">
|
<link rel="shortcut icon" href="icon.png" type="image/png">
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -73,7 +98,7 @@ The default can be overridden by defining a value to the `favicon` key in your
|
|||||||
`data/config.yaml` file. Here is a `List[Dictionary]` example format, which is
|
`data/config.yaml` file. Here is a `List[Dictionary]` example format, which is
|
||||||
equivalent to the default:
|
equivalent to the default:
|
||||||
|
|
||||||
```yaml
|
```yaml {title="data/config.yaml", linenos=false}
|
||||||
favicon:
|
favicon:
|
||||||
- { rel: "shortcut icon", href: "icon.png", type: "image/png" }
|
- { rel: "shortcut icon", href: "icon.png", type: "image/png" }
|
||||||
# - { ... } # Repeat for each additional favicon you want to add
|
# - { ... } # Repeat for each additional favicon you want to add
|
||||||
@ -85,7 +110,7 @@ If you plan to add multiple favicons generated by a website (see list below), it
|
|||||||
may be easier to define it as HTML. Here is an example which appends the
|
may be easier to define it as HTML. Here is an example which appends the
|
||||||
**Apple touch icon** to quartz's default favicon:
|
**Apple touch icon** to quartz's default favicon:
|
||||||
|
|
||||||
```yaml
|
```yaml {title="data/config.yaml", linenos=false}
|
||||||
favicon: |
|
favicon: |
|
||||||
<link rel="shortcut icon" href="icon.png" type="image/png">
|
<link rel="shortcut icon" href="icon.png" type="image/png">
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
@ -102,7 +127,8 @@ attribute, are relative to the `static/` directory.
|
|||||||
### Graph View
|
### Graph View
|
||||||
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`.
|
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`.
|
||||||
|
|
||||||
```yaml
|
|
||||||
|
```yaml {title="data/graphConfig.yaml"}
|
||||||
# if true, a Global Graph will be shown on home page with full width, no backlink.
|
# if true, a Global Graph will be shown on home page with full width, no backlink.
|
||||||
# A different set of Local Graphs will be shown on sub pages.
|
# A different set of Local Graphs will be shown on sub pages.
|
||||||
# if false, Local Graph will be default on every page as usual
|
# if false, Local Graph will be default on every page as usual
|
||||||
|
@ -3,6 +3,7 @@ enableToc: true
|
|||||||
openToc: false
|
openToc: false
|
||||||
enableLinkPreview: true
|
enableLinkPreview: true
|
||||||
enableLatex: true
|
enableLatex: true
|
||||||
|
enableCodeBlockTitle: true
|
||||||
enableSPA: true
|
enableSPA: true
|
||||||
enableFooter: true
|
enableFooter: true
|
||||||
enableContextualBacklinks: true
|
enableContextualBacklinks: true
|
||||||
|
@ -36,7 +36,11 @@
|
|||||||
{{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify }}
|
{{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify }}
|
||||||
<link href="{{$finalCss.Permalink}}" rel="stylesheet" />
|
<link href="{{$finalCss.Permalink}}" rel="stylesheet" />
|
||||||
|
|
||||||
{{ $darkMode := resources.Get "js/darkmode.js" | resources.Fingerprint "md5" | resources.Minify }}
|
{{$lightSyntax := resources.Get "styles/_light_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify }}
|
||||||
|
<link href="{{$lightSyntax.Permalink}}" rel="stylesheet" id="theme-link">
|
||||||
|
|
||||||
|
<!-- Base scripts -->
|
||||||
|
{{ $darkMode := resources.Get "js/darkmode.js" | resources.ExecuteAsTemplate "js/darkmode.js" . | resources.Fingerprint "md5" | resources.Minify }}
|
||||||
<script src="{{$darkMode.Permalink}}"></script>
|
<script src="{{$darkMode.Permalink}}"></script>
|
||||||
{{partial "katex.html" .}}
|
{{partial "katex.html" .}}
|
||||||
|
|
||||||
@ -44,6 +48,12 @@
|
|||||||
resources.Minify }}
|
resources.Minify }}
|
||||||
<script src="{{$popover.Permalink}}"></script>
|
<script src="{{$popover.Permalink}}"></script>
|
||||||
|
|
||||||
|
<!-- Optional scripts -->
|
||||||
|
{{ if $.Site.Data.config.enableCodeBlockTitle }}
|
||||||
|
{{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }}
|
||||||
|
<script src="{{$codeTitle.Permalink}}"></script>
|
||||||
|
{{end}}
|
||||||
|
|
||||||
<!-- Preload page vars -->
|
<!-- Preload page vars -->
|
||||||
{{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
|
{{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
|
||||||
"md5" | resources.Minify | }} {{$contentIndex := resources.Get
|
"md5" | resources.Minify | }} {{$contentIndex := resources.Get
|
||||||
@ -75,6 +85,10 @@
|
|||||||
const pathWindow = window.location.pathname;
|
const pathWindow = window.location.pathname;
|
||||||
const isHome = pathBase == pathWindow;
|
const isHome = pathBase == pathWindow;
|
||||||
|
|
||||||
|
{{if $.Site.Data.config.enableSPA -}}
|
||||||
|
addTitleToCodeBlocks();
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{if $.Site.Data.config.enableFooter}}
|
{{if $.Site.Data.config.enableFooter}}
|
||||||
const container = document.getElementById("graph-container")
|
const container = document.getElementById("graph-container")
|
||||||
// retry if the graph is not ready
|
// retry if the graph is not ready
|
||||||
@ -92,6 +106,7 @@
|
|||||||
|
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
|
|
||||||
{{if $.Site.Data.config.enableLinkPreview}}
|
{{if $.Site.Data.config.enableLinkPreview}}
|
||||||
initPopover(
|
initPopover(
|
||||||
{{strings.TrimRight "/" .Site.BaseURL }},
|
{{strings.TrimRight "/" .Site.BaseURL }},
|
||||||
@ -103,6 +118,13 @@
|
|||||||
|
|
||||||
const init = (doc = document) => {
|
const init = (doc = document) => {
|
||||||
// NOTE: everything within this callback will be executed for initial page navigation. This is a good place to put JavaScript that only replaces DOM nodes.
|
// NOTE: everything within this callback will be executed for initial page navigation. This is a good place to put JavaScript that only replaces DOM nodes.
|
||||||
|
{{if $.Site.Data.config.enableCodeBlockTitle -}}
|
||||||
|
{{if $.Site.Data.config.enableSPA -}}
|
||||||
|
addTitleToCodeBlocks();
|
||||||
|
{{ else }}
|
||||||
|
window.addEventListener("DOMContentLoaded", addTitleToCodeBlocks);
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
{{if $.Site.Data.config.enableLatex}}
|
{{if $.Site.Data.config.enableLatex}}
|
||||||
renderMathInElement(doc.body, {
|
renderMathInElement(doc.body, {
|
||||||
delimiters: [
|
delimiters: [
|
||||||
|
Loading…
Reference in New Issue
Block a user