Added optional rendering of code block titles (#148)

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=<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
-```
+```