Added optional rendering of code block titles (#148)

Geoffrey Garrett

2022-07-01 d3e20b8b94c9229e94fccbe54c867efde6847c6e

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