PVR/gokarna
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add katex example with documentation (#69)

Browse Source
This commit is contained in:
Yash Mehrotra
2021-09-01 08:35:49 +05:30
committed by GitHub
parent b8b06fcd83
commit 5b5b2eb83c
2 changed files with 31 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
exampleSite/config.toml
View File

@@ -14,7 +14,13 @@ pygmentsStyle = "monokai"
description = "Sky above, sand below and peace within" description = "Sky above, sand below and peace within"
avatarURL = "/images/avatar.webp" avatarURL = "/images/avatar.webp"
avatarSize = "size-m" avatarSize = "size-m"
customHeadHTML = "" customHeadHTML = """
<!-- KaTeX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.js" integrity="sha384-31El76TwmbHj4rF9DyLsygbq6xoIobG0W+jqXim+a3dU9W53tdH3A/ngRPxOzzaB" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
"""
showPostsOnHomePage = "popular" showPostsOnHomePage = "popular"
metaKeywords = ["blog", "gokarna", "hugo"] metaKeywords = ["blog", "gokarna", "hugo"]

24
exampleSite/content/posts/theme-documentation-advanced.md
View File

@@ -99,6 +99,30 @@ Giving users the freedom to add anything in the HTML via config.toml seemed like
""" """
``` ```
### Katex
Katex is a math typesetting library for the web which lets you write beautiful equations. To use it, add the javascript as mentioned in [their documentation](https://katex.org/docs/browser.html) in our `params.customHeadHTML`.
```markdown
[params]
customHeadHTML = """
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.js" integrity="sha384-31El76TwmbHj4rF9DyLsygbq6xoIobG0W+jqXim+a3dU9W53tdH3A/ngRPxOzzaB" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
"""
```
> Note: Make sure you use the latest version of katex and use the correct script tags as described in [their documentation](https://katex.org/docs/browser.html)
Then the equation `$$y_t = \beta_0 + \beta_1 x_t + \epsilon_t$$` would be displayed as:
$$y_t = \beta_0 + \beta_1 x_t + \epsilon_t$$
## Syntax Highlighting ## Syntax Highlighting
Hugo lets you choose the color scheme for the codeblocks. You can choose from the options here: https://xyproto.github.io/splash/docs/all.html Hugo lets you choose the color scheme for the codeblocks. You can choose from the options here: https://xyproto.github.io/splash/docs/all.html