mirror of
https://github.com/falsycat/ar.falsy.cat.git
synced 2025-10-31 05:38:20 +00:00
Added optional rendering of code block titles (#148)
This commit is contained in:
Geoffrey Garrett
GitHub
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 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) {
|
||||
document.documentElement.setAttribute('saved-theme', currentTheme);
|
||||
(currentTheme === 'dark') ? syntaxTheme.href = '{{ $darkSyntax.Permalink }}' : syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
|
||||
}
|
||||
|
||||
const switchTheme = (e) => {
|
||||
if (e.target.checked) {
|
||||
document.documentElement.setAttribute('saved-theme', 'dark')
|
||||
localStorage.setItem('theme', 'dark')
|
||||
document.documentElement.setAttribute('saved-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
syntaxTheme.href = '{{ $darkSyntax.Permalink }}';
|
||||
}
|
||||
else {
|
||||
document.documentElement.setAttribute('saved-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 }
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
||||
/* 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 }
|
||||
/* 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: #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 { }
|
||||
// Overrides
|
||||
/* Background */
|
||||
.chroma {
|
||||
overflow: hidden !important;
|
||||
background-color: var(--lightgray) !important;
|
||||
}
|
||||
|
||||
/* LineTable */
|
||||
.chroma .lntable {
|
||||
width: auto !important;
|
||||
overflow: auto !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* LineHighlight */
|
||||
.chroma .hl {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* LineNumbersTable */
|
||||
.chroma .lnt {
|
||||
margin-right: 0.0em !important;
|
||||
padding: 0 0.0em 0 0.0em !important;
|
||||
}
|
||||
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
margin-right: 0.0em !important;
|
||||
padding: 0 0.0em 0 0.0em !important;
|
||||
}
|
||||
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: #8b080b !important;
|
||||
}
|
||||
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.lntd:first-of-type > .chroma {
|
||||
padding-right: 0;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.chroma code {
|
||||
font-family: 'Fira Code' !important;
|
||||
font-size: 0.85em;
|
||||
line-height: 1em;
|
||||
background: none;
|
||||
padding: 0;
|
||||
font-size: 0.85em !important;
|
||||
line-height: 2em !important;
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.chroma {
|
||||
border-radius: 3px;
|
||||
margin: 0;
|
||||
}
|
||||
border-radius: 3px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@@ -8,9 +8,9 @@ weight: 0
|
||||
## 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.
|
||||
|
||||
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
|
||||
name: Jacky Zhao
|
||||
|
||||
@@ -25,6 +25,9 @@ openToc: false
|
||||
# whether to display on-hover link preview cards
|
||||
enableLinkPreview: true
|
||||
|
||||
# whether to render titles for code blocks
|
||||
enableCodeBlockTitle: true
|
||||
|
||||
# whether to try to process Latex
|
||||
enableLatex: true
|
||||
|
||||
@@ -60,12 +63,34 @@ links:
|
||||
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
|
||||
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
|
||||
`favicon` key is:
|
||||
|
||||
```html
|
||||
```html {title="layouts/partials/head.html", linenostart=15}
|
||||
<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
|
||||
equivalent to the default:
|
||||
|
||||
```yaml
|
||||
```yaml {title="data/config.yaml", linenos=false}
|
||||
favicon:
|
||||
- { rel: "shortcut icon", href: "icon.png", type: "image/png" }
|
||||
# - { ... } # 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
|
||||
**Apple touch icon** to quartz's default favicon:
|
||||
|
||||
```yaml
|
||||
```yaml {title="data/config.yaml", linenos=false}
|
||||
favicon: |
|
||||
<link rel="shortcut icon" href="icon.png" type="image/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
|
||||
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.
|
||||
# A different set of Local Graphs will be shown on sub pages.
|
||||
# if false, Local Graph will be default on every page as usual
|
||||
@@ -128,10 +154,10 @@ localGraph:
|
||||
# how strongly nodes should repel each other
|
||||
repelForce: 2
|
||||
|
||||
# how strongly should nodes be attracted to the center of gravity
|
||||
# how strongly should nodes be attracted to the center of gravity
|
||||
centerForce: 1
|
||||
|
||||
# what the default link length should be
|
||||
# what the default link length should be
|
||||
linkDistance: 1
|
||||
|
||||
# how big the node labels should be
|
||||
@@ -179,4 +205,4 @@ defaultContentLanguage = 'ar'
|
||||
languagedirection = 'rtl'
|
||||
title = 'مدونتي'
|
||||
weight = 1
|
||||
```
|
||||
```
|
||||
|
||||
@@ -3,6 +3,7 @@ enableToc: true
|
||||
openToc: false
|
||||
enableLinkPreview: true
|
||||
enableLatex: true
|
||||
enableCodeBlockTitle: true
|
||||
enableSPA: true
|
||||
enableFooter: true
|
||||
enableContextualBacklinks: true
|
||||
|
||||
@@ -36,7 +36,11 @@
|
||||
{{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify }}
|
||||
<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>
|
||||
{{partial "katex.html" .}}
|
||||
|
||||
@@ -44,6 +48,12 @@
|
||||
resources.Minify }}
|
||||
<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 -->
|
||||
{{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
|
||||
"md5" | resources.Minify | }} {{$contentIndex := resources.Get
|
||||
@@ -75,6 +85,10 @@
|
||||
const pathWindow = window.location.pathname;
|
||||
const isHome = pathBase == pathWindow;
|
||||
|
||||
{{if $.Site.Data.config.enableSPA -}}
|
||||
addTitleToCodeBlocks();
|
||||
{{ end }}
|
||||
|
||||
{{if $.Site.Data.config.enableFooter}}
|
||||
const container = document.getElementById("graph-container")
|
||||
// retry if the graph is not ready
|
||||
@@ -92,6 +106,7 @@
|
||||
|
||||
{{end}}
|
||||
|
||||
|
||||
{{if $.Site.Data.config.enableLinkPreview}}
|
||||
initPopover(
|
||||
{{strings.TrimRight "/" .Site.BaseURL }},
|
||||
@@ -103,6 +118,13 @@
|
||||
|
||||
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.
|
||||
{{if $.Site.Data.config.enableCodeBlockTitle -}}
|
||||
{{if $.Site.Data.config.enableSPA -}}
|
||||
addTitleToCodeBlocks();
|
||||
{{ else }}
|
||||
window.addEventListener("DOMContentLoaded", addTitleToCodeBlocks);
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{if $.Site.Data.config.enableLatex}}
|
||||
renderMathInElement(doc.body, {
|
||||
delimiters: [
|
||||
|
||||
Reference in New Issue
Block a user