From d3e20b8b94c9229e94fccbe54c867efde6847c6e Mon Sep 17 00:00:00 2001
From: Geoffrey Garrett <g.h.garrett13@gmail.com>
Date: Fri, 01 Jul 2022 18:03:52 +0000
Subject: [PATCH] Added optional rendering of code block titles (#148)

---
 content/notes/config.md |   44 +++++++++++++++++++++++++++++++++++---------
 1 files changed, 35 insertions(+), 9 deletions(-)

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 @@
 ## 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 @@
 # 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 @@
     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 @@
 `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 @@
 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 @@
 ### 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 @@
     # 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 @@
     languagedirection = 'rtl'
     title = 'مدونتي'
     weight = 1
-```
\ No newline at end of file
+```

--
Gitblit v1.10.0