feat: basic latex support

Jacky Zhao

2022-04-03 cc86136bcb4cc61219a8ee7573e792e6a6043dcd

feat: basic latex support

 assets/styles/base.scss

@@ -534,6 +534,6 @@
  }

  li a {
    padding: 5px 20px;
    padding: 0 1em;
  }
}

 content/_index.md

@@ -1,14 +1,16 @@
---
title: 🪴 Quartz 3.1
title: 🪴 Quartz 3.2
---
Host your second brain and [digital garden](https://jzhao.xyz/posts/digital-gardening) for free. Quartz features
Host your second brain and [digital garden](https://jzhao.xyz/posts/networked-thought) for free. Quartz features

1. Extremely fast full-text search by pressing `ctrl` + `k`
2. Wikilink support
3. Display for backlinks of each note
4. Fully customizable local graph view
5. Endlessly powerful page and theme customization using CSS
6. Automatically generated tag and section lists of content
7. Beautiful link previews
4. [CJK + Latex Support](notes/CJK%20+%20Latex%20Test%20(测试).md)
5. Fully customizable local graph view
6. Endlessly powerful page and theme customization using CSS
7. Automatically generated tag and section lists of content
8. Beautiful link previews

## Get Started
> 📚 [Setup your own digital garden using Quartz](notes/setup.md)
@@ -19,7 +21,7 @@
If you prefer browsing the contents of this site through a list instead of a graph, you can find content lists here too:

- [All Notes](/notes)
- [Setup-related Notes](/tags/set)
- [Setup-related Notes](/tags/setup)

## Troubleshooting
- 🚧 [Troubleshooting and FAQ](notes/troubleshooting.md)

 content/notes/CJK + Latex Test (测试).md

New file
@@ -0,0 +1,38 @@
---
title: "CJK + Latex Test (测试)"
---

## Chinese, Japanese, Korean Support
几乎在我们意识到之前，我们已经离开了地面。

우리가 그것을 알기도 전에 우리는 땅을 떠났습니다.

私たちがそれを知るほぼ前に、私たちは地面を離れていました。

## Latex

Block math works with two dollar signs `$$...$$`

$$f(x) = \int_{-\infty}^\infty
    f\hat(\xi\),e^{2 \pi i \xi x}
    \,d\xi$$
	
Inline math also works with single dollar signs `$...$`. For example, Euler's identity but inline: $e^{i\pi} = 0$

Aligned equations work quite well:

$$
\begin{aligned}
a &= b + c \\
 &= e + f \\
\end{aligned}
$$

And matrices

$$
\begin{bmatrix}
1 & 2 & 3\\
a & b & c
\end{bmatrix}
$$

 content/notes/Obsidian.md

@@ -16,9 +16,8 @@
## Settings
Great, now that you have your Obsidian linked to your Quartz, let's fix some settings so that they play well.

1. Under Options > Files and Links, set the New link format to always be Absolute Path in Vault and disabled WikiLinks so Obsidian generates regular Markdown links.
1. Under Options > Files and Links, set the New link format to always be Absolute Path in Vault.
2. Go to Settings > Files & Links > Turn "on" automatically update internal links.
3. Use [[Wikilinks]] should be off (Wikilinks are not officially supported yet)

![Obsidian Settings](/notes/images/obsidian-settings.png)*Obsidian Settings*


 content/notes/obsidian.md

@@ -16,9 +16,8 @@
## Settings
Great, now that you have your Obsidian linked to your Quartz, let's fix some settings so that they play well.

1. Under Options > Files and Links, set the New link format to always be Absolute Path in Vault and disabled WikiLinks so Obsidian generates regular Markdown links.
1. Under Options > Files and Links, set the New link format to always be Absolute Path in Vault.
2. Go to Settings > Files & Links > Turn "on" automatically update internal links.
3. Use [[Wikilinks]] should be off (Wikilinks are not officially supported yet)

![Obsidian Settings](/notes/images/obsidian-settings.png)*Obsidian Settings*


 content/notes/troubleshooting.md

@@ -7,33 +7,7 @@
While you're here, join our [Discord](https://discord.gg/cRFFHYye7t) :)

### Does Quartz have Latex support?
Not by default! You can create a partial using something like Katex under `head/katex.html` and render the partial somewhere using  `{{ partial "head/katex.html" . }}` (most likely in `layouts/_default/single.html`).

```html
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css](https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css)" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
<script defer src="[https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js](https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js)" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
<script defer src="[https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js](https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js)" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {
        delimiters: [
            {left: '$$', right: '$$', display: true},
            {left: '$', right: '$', display: false},
            {left: '\\(', right: '\\)', display: false},
            {left: '\\[', right: '\\]', display: true}
        ],
        throwOnError : false
    });
});
</script>
```

Example page: [jzhao.xyz/thoughts/object-classification](https://jzhao.xyz/thoughts/object-classification/)

### My <\iframe\> is not rendering!

Hugo's safeHTML enables this! This is disabled by default for security reasons but you can do this manually by changing `{{.Content}}` to `{{.Content | safeHTML}}` in `layouts/_default/single.html`.
Yes! See [CJK + Latex Test (测试)](CJK%20+%20Latex%20Test%20(测试).md) for a brief demo.

### Can I use \<Obsidian Plugin\> in Quartz?
Unless it produces direct Markdown output in the file, no. There currently is no way to bundle plugin code with Quartz.

 data/config.yaml

@@ -1,11 +1,12 @@
name: Jacky Zhao
enableToc: true
enableLinkPreview: true
enableLatex: true
description:
  Here is the page description. This is an example Quartz site that details installation,
  setup, customization, and troubleshooting for Quartz itself.
  Host your second brain and digital garden for free. Quartz features extremely fast full-text search,
  Wikilink support, backlinks, local graph, tags, and link previews.
page_title:
  "🪴 Quartz 3.1"
  "🪴 Quartz .2"
links:
  - link_name: Twitter
    link: https://twitter.com/_jzhao

 layouts/partials/head.html

@@ -19,6 +19,7 @@

    {{ $darkMode := resources.Get "js/darkmode.js" |  resources.Fingerprint "md5" | resources.Minify }}
    <script src="{{$darkMode.Permalink}}"></script>
    {{partial "katex.html" .}}

    <!--  Preload page vars  -->
    {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint "md5" | resources.Minify |  }}

 layouts/partials/katex.html

New file
@@ -0,0 +1,21 @@
{{if $.Site.Data.config.enableLatex}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {
      // customised options
      // • auto-render specific keys, e.g.:
      delimiters: [
        {left: '$$', right: '$$', display: true},
        {left: '$', right: '$', display: false},
        {left: '\\(', right: '\\)', display: false},
        {left: '\\[', right: '\\]', display: true}
      ],
      // • rendering keys, e.g.:
      throwOnError : false
    });
  });
</script>
{{end}}