docs: add markdown preview

content/docs/how-it-looks.md

@@ -0,0 +1,76 @@
++++
+title = "How it looks?"
+summary = "A quick page for checking common Markdown rendering."
+weight = 14
+math = true
++++
+
+Use this page as a glance test for the Markdown pieces that show up most often.
+
+## Text
+
+Plain text can include **bold**, *italic*, `inline code`, and [links](https://gohugo.io/).
+
+> A blockquote should stand apart from the surrounding text without needing extra layout.
+
+## Code
+
+```js
+const total = [2, 3, 5].reduce((sum, value) => sum + value, 0);
+console.log(total);
+```
+
+```toml
+[params]
+description = "Small on purpose."
+```
+
+## Math
+
+Inline math: \(e^{i\pi} + 1 = 0\).
+
+Block math:
+
+$$
+\int_0^1 x^2\,dx = \frac{1}{3}
+$$
+
+Aligned equations:
+
+$$
+\begin{aligned}
+a^2 + b^2 &= c^2 \\
+x &= \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+\end{aligned}
+$$
+
+## Table
+
+| Feature | Markdown | Render check |
+| --- | --- | --- |
+| Inline code | `` `value` `` | `value` |
+| Strong text | `**bold**` | **bold** |
+| Emphasis | `*italic*` | *italic* |
+
+## Lists
+
+1. First ordered item
+2. Second ordered item
+3. Third ordered item
+
+- Unordered item
+- Another unordered item
+- Nested detail:
+  - Child item
+  - Another child item
+
+- [x] Task item done
+- [ ] Task item open
+
+## Rule
+
+Text before the rule.
+
+---
+
+Text after the rule.

hugo.toml

@@ -8,6 +8,13 @@ disableHugoGeneratorInject = true
 [outputs]
 home = ["HTML", "RSS", "JSON"]
 
+[markup.goldmark.extensions.passthrough]
+enable = true
+
+[markup.goldmark.extensions.passthrough.delimiters]
+block = [["$$", "$$"]]
+inline = [["\\(", "\\)"]]
+
 [params]
 description = "Starless is a small Hugo theme for dark, text first sites."
 sidebarFooter = "Built with Hugo."
@@ -35,3 +42,9 @@ name = "Files"
 pageRef = "/docs/files"
 parent = "Guide"
 weight = 13
+
+[[menus.main]]
+name = "How it looks?"
+pageRef = "/docs/how-it-looks"
+parent = "Guide"
+weight = 14

themes/starless/layouts/_default/baseof.html

@@ -11,6 +11,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
+    {{ if .Params.math }}
+      <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+    {{ end }}
     <script>
       tailwind.config = {
         darkMode: "class",