feat(code block titles): adds ability to define code block titles for Chroma

If a user provides a title as an argument to a code block, it will be
added as a child `div.code-title` to `div.highlight`, inserted before
`div.chroma`.

- Included default styling (`code-title.scss`) adapted
from `syntax.scss`.
- Added this as a function rendered in the
`partials/head.html` inside the `render()` function, *if*
`enableCodeBlockTitle=true` in the `data/config.yaml`.

content/notes/config.md

@@ -9,7 +9,7 @@ Quartz is designed to be extremely configurable. You can find the bulk of the co
 
 The majority of configuration can be be found under `data/config.yaml`. An annotated example configuration is shown below.
 
-```yaml
+```yaml {title="data/config.yaml"}
 name: Your name here! # Shows in the footer
 enableToc: true # Whether to show a Table of Contents
 enableLinkPreview: true # whether to render card previews for links

data/config.yaml

@@ -17,3 +17,21 @@ links:
     link: https://twitter.com/_jzhao
   - link_name: Github
     link: https://github.com/jackyzha0
+
+#favicon:
+#  - { rel: "shortcut icon", href: "icon.png", type: "image/png" }
+#  - { rel: "manifest", href: "/favicon/site.webmanifest" }
+#  - { rel: "icon", href: "/favicon/favicon.ico", type: "image/x-icon" }
+#  - { rel: "icon", href: "/favicon/favicon-16x16.png", sizes: "16x16", type: "image/png" }
+#  - { rel: "icon", href: "/favicon/favicon-32x32.png", sizes: "32x32", type: "image/png" }
+#  - { rel: "icon", href: "/favicon/favicon-32x32.png", sizes: "32x32", type: "image/png" }
+
+
+#favicon: |
+#  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+#  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+#  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+#  <link rel="manifest" href="/site.webmanifest">
+#  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+#  <meta name="msapplication-TileColor" content="#da532c">
+#  <meta name="theme-color" content="#ffffff">

layouts/partials/head.html

@@ -36,6 +36,7 @@
   {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify  }}
   <link href="{{$finalCss.Permalink}}" rel="stylesheet" />
 
+   <!-- Base scripts -->
   {{ $darkMode := resources.Get "js/darkmode.js" | resources.Fingerprint "md5" | resources.Minify }}
   <script src="{{$darkMode.Permalink}}"></script>
   {{partial "katex.html" .}}
@@ -44,6 +45,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
@@ -92,6 +99,10 @@
 
       {{end}}
 
+      {{if $.Site.Data.config.enableCodeBlockTitle -}}
+      addTitleToCodeBlocks();
+      {{- end -}}
+
       {{if $.Site.Data.config.enableLinkPreview}}
       initPopover(
         {{strings.TrimRight "/" .Site.BaseURL }},