mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-24 21:34:06 -06:00
docs(code block titles): made docs concise
This commit is contained in:
parent
e0567a592e
commit
6c096bf924
@ -26,16 +26,7 @@ links: # Links to show in footer
|
|||||||
|
|
||||||
### Code Block Titles
|
### Code Block Titles
|
||||||
|
|
||||||
Quartz relies on Hugo's code highlighter,
|
To add code block titles with Quartz:
|
||||||
[Chroma](https://github.com/alecthomas/chroma), which happens to be ["really,
|
|
||||||
really fast"](https://gohugo.io/content-management/syntax-highlighting/). As
|
|
||||||
fast as it is, it does leave much to be desired, such as code block titles. In
|
|
||||||
Obsidian, there's a plugin which provides this feature, called [Obsidian Better
|
|
||||||
Code Block](https://github.com/stargrey/obsidian-better-codeblock). The idea
|
|
||||||
behind the syntax is similar to Hugo's, although unfortunately not identical
|
|
||||||
(stay tuned for a [Quartz
|
|
||||||
binary](https://github.com/jackyzha0/quartz/issues/81)). To add code titles
|
|
||||||
with Quartz:
|
|
||||||
|
|
||||||
1. Ensure that code block titles are enabled in Quartz's configuration:
|
1. Ensure that code block titles are enabled in Quartz's configuration:
|
||||||
|
|
||||||
@ -43,29 +34,17 @@ with Quartz:
|
|||||||
enableCodeBlockTitle: true
|
enableCodeBlockTitle: true
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Add the `title` attribute to the desired code block. Note there are two ways of
|
2. Add the `title` attribute to the desired [code block
|
||||||
defining code blocks in Hugo.
|
fence](https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences):
|
||||||
|
|
||||||
- [**Highlight Shortcode**](https://gohugo.io/content-management/syntax-highlighting/#example-highlight-shortcode): Example not included as Hugo will insist on attempting to render it.
|
|
||||||
- [**Highlight Code Fences**](https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences): Example provided
|
|
||||||
intentionally omits a single back quote.
|
|
||||||
|
|
||||||
```markdown {linenos=false}
|
```markdown {linenos=false}
|
||||||
```yaml {title="data/config.yaml"}
|
```yaml {title="data/config.yaml"}
|
||||||
enableCodeBlockTitle: true # step 1 example
|
enableCodeBlockTitle: true # example from step 1
|
||||||
``
|
```
|
||||||
```
|
```
|
||||||
|
|
||||||
**Note** that if `{title=<my-title>}` is included, and code titles are not
|
**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.
|
enabled, no errors will occur and the title attribute will be ignored.
|
||||||
Furthermore, by enabling code blocks, the header of each page will contain a
|
|
||||||
script which will automatically attempt to find code blocks, and render their
|
|
||||||
titles. In other words, if you don't have any code blocks (with titles), rather
|
|
||||||
disable this feature in the configuration. For more information on syntax see
|
|
||||||
[Hugo's syntax
|
|
||||||
highlighting](https://gohugo.io/content-management/syntax-highlighting/).
|
|
||||||
Finally, you can style the code block titles with the
|
|
||||||
`assets/styles/code-title.scss` file.
|
|
||||||
|
|
||||||
### HTML Favicons
|
### HTML Favicons
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user