From d3e20b8b94c9229e94fccbe54c867efde6847c6e Mon Sep 17 00:00:00 2001 From: Geoffrey Garrett Date: Fri, 1 Jul 2022 20:03:52 +0200 Subject: [PATCH] Added optional rendering of code block titles (#148) --- assets/js/code-title.js | 13 +++ assets/js/darkmode.js | 12 ++- assets/styles/_dark_syntax.scss | 85 +++++++++++++++++++ assets/styles/_light_syntax.scss | 85 +++++++++++++++++++ assets/styles/code-title.scss | 20 +++++ assets/styles/syntax.scss | 139 +++++++++++-------------------- content/notes/config.md | 44 ++++++++-- data/config.yaml | 1 + layouts/partials/head.html | 24 +++++- 9 files changed, 321 insertions(+), 102 deletions(-) create mode 100644 assets/js/code-title.js create mode 100644 assets/styles/_dark_syntax.scss create mode 100644 assets/styles/_light_syntax.scss create mode 100644 assets/styles/code-title.scss diff --git a/assets/js/code-title.js b/assets/js/code-title.js new file mode 100644 index 0000000..698edc9 --- /dev/null +++ b/assets/js/code-title.js @@ -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); + } + } +}; diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js index d95a281..11ce15f 100644 --- a/assets/js/darkmode.js +++ b/assets/js/darkmode.js @@ -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 }}'; } } diff --git a/assets/styles/_dark_syntax.scss b/assets/styles/_dark_syntax.scss new file mode 100644 index 0000000..9d2019a --- /dev/null +++ b/assets/styles/_dark_syntax.scss @@ -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 { } diff --git a/assets/styles/_light_syntax.scss b/assets/styles/_light_syntax.scss new file mode 100644 index 0000000..1927b57 --- /dev/null +++ b/assets/styles/_light_syntax.scss @@ -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 { } diff --git a/assets/styles/code-title.scss b/assets/styles/code-title.scss new file mode 100644 index 0000000..11b088a --- /dev/null +++ b/assets/styles/code-title.scss @@ -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); +} \ No newline at end of file diff --git a/assets/styles/syntax.scss b/assets/styles/syntax.scss index bada47a..fbea72a 100644 --- a/assets/styles/syntax.scss +++ b/assets/styles/syntax.scss @@ -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; -} \ No newline at end of file + border-radius: 3px !important; + margin: 0 !important; +} diff --git a/content/notes/config.md b/content/notes/config.md index 2c1e352..076857e 100644 --- a/content/notes/config.md +++ b/content/notes/config.md @@ -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=}` 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} ``` @@ -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: | @@ -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 -``` \ No newline at end of file +``` diff --git a/data/config.yaml b/data/config.yaml index cae94ef..e55035a 100644 --- a/data/config.yaml +++ b/data/config.yaml @@ -3,6 +3,7 @@ enableToc: true openToc: false enableLinkPreview: true enableLatex: true +enableCodeBlockTitle: true enableSPA: true enableFooter: true enableContextualBacklinks: true diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d0630a2..e3eebbf 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -36,7 +36,11 @@ {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify }} - {{ $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 }} + + + + {{ $darkMode := resources.Get "js/darkmode.js" | resources.ExecuteAsTemplate "js/darkmode.js" . | resources.Fingerprint "md5" | resources.Minify }} {{partial "katex.html" .}} @@ -44,6 +48,12 @@ resources.Minify }} + + {{ if $.Site.Data.config.enableCodeBlockTitle }} + {{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }} + + {{end}} + {{$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: [