From 37679d5aee385da2f4cba862f61f0de786ac973d Mon Sep 17 00:00:00 2001
From: srid <srid@users.noreply.github.com>
Date: Tue, 5 Mar 2024 21:13:21 +0000
Subject: [PATCH] deploy: 0f0a0fd1758bec9cbd8afd29eb5157a92fd90e2f

---
 -/all.html                              |   8 +-
 -/stork.st                              | Bin 499448 -> 499553 bytes
 -/tags.html                             |   8 +-
 -/tags/emanote.html                     |   8 +-
 -/tags/emanote/dev.html                 |   8 +-
 -/tags/emanote/syntax.html              |   8 +-
 -/tags/emanote/syntax/demo.html         |   8 +-
 -/tags/emanote/yaml.html                |   8 +-
 -/tags/emanote/yaml/demo.html           |   8 +-
 -/tags/external.html                    |   8 +-
 -/tasks.html                            |   8 +-
 architecture.html                       |  17 +-
 breadcrumbs.html                        |  17 +-
 examples.html                           |  17 +-
 folder-note.html                        | 100 ++++++-
 folgezettel.html                        | 115 ++++++-
 guide.html                              |  17 +-
 guide/export.html                       | 165 +++++++++-
 guide/feed.html                         | 115 ++++++-
 guide/html-template.html                | 115 ++++++-
 guide/html-template/external-links.html | 143 ++++++++-
 guide/html-template/neuron-layout.html  | 100 ++++++-
 guide/html-template/search.html         | 115 ++++++-
 guide/html-template/sidebar.html        | 115 ++++++-
 guide/html-template/uptree.html         |  17 +-
 guide/layer.html                        | 115 ++++++-
 guide/lua-filters.html                  | 113 ++++++-
 guide/markdown.html                     | 381 +++++++++++++++++++++---
 guide/markdown/custom-style.html        | 156 +++++++++-
 guide/markdown/embed.html               | 184 ++++++++++--
 guide/markdown/file-links.html          |  17 +-
 guide/orgmode.html                      | 156 +++++++++-
 guide/query.html                        | 193 +++++++++++-
 guide/yaml-config.html                  | 115 ++++++-
 index.html                              |  35 +--
 ogp.html                                | 100 ++++++-
 start.html                              |  19 +-
 start/install.html                      | 115 ++++++-
 start/install/docker.html               | 100 ++++++-
 start/install/nix.html                  | 130 +++++++-
 start/install/wsl.html                  | 130 +++++++-
 start/known-issues.html                 | 100 ++++++-
 start/neuron.html                       | 115 ++++++-
 start/resources.html                    |  17 +-
 start/resources/editors.html            |  17 +-
 start/resources/editors/nota.html       |  17 +-
 start/resources/editors/vim.html        | 100 ++++++-
 start/resources/editors/vscode.html     |  17 +-
 start/resources/emanote-template.html   | 100 ++++++-
 start/resources/zk.html                 | 115 ++++++-
 tailwind.css                            |   2 +-
 tips.html                               |  17 +-
 tips/adding-images.html                 |  17 +-
 tips/js.html                            |  17 +-
 tips/js/math.html                       | 128 +++++++-
 tips/js/mermaid.html                    | 139 ++++++++-
 tips/js/syntax-highlighting.html        | 141 ++++++++-
 tips/sync.html                          | 115 ++++++-
 58 files changed, 3991 insertions(+), 490 deletions(-)

diff --git a/-/all.html b/-/all.html
index 1a4631d8d..134e818ff 100644
--- a/-/all.html
+++ b/-/all.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -2368,7 +2372,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/-/stork.st b/-/stork.st
index de352d664c5ab30c7c8dad03e48c13a475d4c08f..0c48e9009e0b485f8c061368a304f9f0c4136db6 100644
GIT binary patch
delta 226
zcmeydSMK3Hxe207^Sw5TziVWCvYD;vCL@=EUP)?2iLP-)&gT2gm!lcmnm6BX-+Z4D
zh?#(x8Hibcn05Q+`)py{g3U`n%Ij9ZG*wL(c+GaNz6mZ+y&No6kyEo2%$U@GkgI{o
z)h>hRpVZI@*H{aYG_F7vL|8PbQGC+GDUOYd2PQO}X=s2L08$Imwq4>4+k;I2!vAK|

delta 106
zcmaF3PwvNFxe207^B!&#f7i%(YcpHZO~%bHn=eN*HaG9R-@f-gBM>tIF*6Xe05R+K
uz4zI|xY?VQl%!Ua)J<1;&2~?waXE;iTai<<6wH{^02is<Ui^mb-6jA;Ff_IR

diff --git a/-/tags.html b/-/tags.html
index 3abffef91..ae3f7273d 100644
--- a/-/tags.html
+++ b/-/tags.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -375,7 +379,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/-/tags/emanote.html b/-/tags/emanote.html
index 839a3a8b3..2c41efae5 100644
--- a/-/tags/emanote.html
+++ b/-/tags/emanote.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -403,7 +407,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/-/tags/emanote/dev.html b/-/tags/emanote/dev.html
index f3afe6fe9..f19da97e2 100644
--- a/-/tags/emanote/dev.html
+++ b/-/tags/emanote/dev.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -373,7 +377,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/-/tags/emanote/syntax.html b/-/tags/emanote/syntax.html
index a2f3f67a4..abcfa47a2 100644
--- a/-/tags/emanote/syntax.html
+++ b/-/tags/emanote/syntax.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -378,7 +382,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/-/tags/emanote/syntax/demo.html b/-/tags/emanote/syntax/demo.html
index adfead5a5..9680b1525 100644
--- a/-/tags/emanote/syntax/demo.html
+++ b/-/tags/emanote/syntax/demo.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -406,7 +410,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/-/tags/emanote/yaml.html b/-/tags/emanote/yaml.html
index a4e214631..a061f4fd1 100644
--- a/-/tags/emanote/yaml.html
+++ b/-/tags/emanote/yaml.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -378,7 +382,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/-/tags/emanote/yaml/demo.html b/-/tags/emanote/yaml/demo.html
index 10f0f965b..259e12f2b 100644
--- a/-/tags/emanote/yaml/demo.html
+++ b/-/tags/emanote/yaml/demo.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -382,7 +386,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/-/tags/external.html b/-/tags/external.html
index c5011dfdc..d90c02622 100644
--- a/-/tags/external.html
+++ b/-/tags/external.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -364,7 +368,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/-/tasks.html b/-/tasks.html
index 019b94b79..158277a3a 100644
--- a/-/tasks.html
+++ b/-/tasks.html
@@ -37,7 +37,7 @@
 
   
   <emaNoteFeedUrl></emaNoteFeedUrl>
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -94,6 +94,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -389,7 +393,7 @@ <h1 class='pb-2 mt-2 mb-2 text-6xl text-center'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
diff --git a/architecture.html b/architecture.html
index 0c4b968e6..d12830c7f 100644
--- a/architecture.html
+++ b/architecture.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -636,14 +640,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Architecture
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -760,6 +765,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -809,7 +815,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -827,7 +832,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -864,4 +869,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/breadcrumbs.html b/breadcrumbs.html
index e50fdefb6..73efdd599 100644
--- a/breadcrumbs.html
+++ b/breadcrumbs.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1416,14 +1420,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Breadcrumbs
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1466,6 +1471,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1502,7 +1508,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1520,7 +1525,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1557,4 +1562,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/examples.html b/examples.html
index 54b228e1f..8315c30f3 100644
--- a/examples.html
+++ b/examples.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -636,14 +640,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Examples
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -728,6 +733,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -788,7 +794,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -806,7 +811,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -843,4 +848,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/folder-note.html b/folder-note.html
index 0cf2977f5..f91b6c8bb 100644
--- a/folder-note.html
+++ b/folder-note.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1112,14 +1116,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Folder notes
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1136,11 +1143,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       The children of folder notes become its <a href='folgezettel.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>folgezettel</a> children by default.
     </p>
   
-    <h2 id='index' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='index' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   <code class='py-0.5 px-0.5 bg-gray-100'>index.md</code>
   
-  <a href='folder-note.html#index'>
+  <a href='folder-note.html#index' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1162,6 +1169,84 @@ <h2 id='index' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='index.md'>
+              <a href='folder-note.html#index' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                index.md
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1232,7 +1317,6 @@ <h2 id='index' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1250,7 +1334,7 @@ <h2 id='index' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1287,4 +1371,4 @@ <h2 id='index' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/folgezettel.html b/folgezettel.html
index b5bbc25dc..a4c79c2aa 100644
--- a/folgezettel.html
+++ b/folgezettel.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1112,14 +1116,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Folgezettel links
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1136,11 +1143,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       Conceptually, a <a href='https://neuron.zettel.page/folgezettel-heterarchy' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>folgezettel</a> link can be thought of as an arrow from a parent note to a descendent note.
     </p>
   
-    <h2 id='syntax' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='syntax' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Syntax
   
-  <a href='folgezettel.html#syntax'>
+  <a href='folgezettel.html#syntax' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1156,11 +1163,11 @@ <h2 id='syntax' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b
 ## A folgezettel link from this page to another one:
 
 Here is the [[target-note]]#</code></pre></div>
-    <h2 id='folder' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='folder' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Folder notes
   
-  <a href='folgezettel.html#folder'>
+  <a href='folgezettel.html#folder' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1231,6 +1238,95 @@ <h2 id='folder' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Syntax'>
+              <a href='folgezettel.html#syntax' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Syntax
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Folder notes'>
+              <a href='folgezettel.html#folder' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Folder notes
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1342,7 +1438,6 @@ <h2 id='folder' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1360,7 +1455,7 @@ <h2 id='folder' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1397,4 +1492,4 @@ <h2 id='folder' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide.html b/guide.html
index d4715430f..c8514fbe4 100644
--- a/guide.html
+++ b/guide.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1101,14 +1105,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Guide
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1270,6 +1275,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1306,7 +1312,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1324,7 +1329,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1361,4 +1366,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/export.html b/guide/export.html
index 4cbc9683e..51c9ad491 100644
--- a/guide/export.html
+++ b/guide/export.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1112,14 +1116,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     JSON export
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1148,11 +1155,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       Option (1) might be useful for text editor plugins, though option (2) is bound to be faster on larger notebooks when requested via the live server (<code class='py-0.5 px-0.5 bg-gray-100'>emanote run</code>).
     </p>
   
-    <h2 id='cli-examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='cli-examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   CLI examples
   
-  <a href='guide/export.html#cli-examples'>
+  <a href='guide/export.html#cli-examples' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1171,7 +1178,7 @@ <h3 id='get-the-list-of-files' class='group mt-6 mb-4 font-bold text-gray-700 te
       
   Get the list of files
   
-  <a href='guide/export.html#get-the-list-of-files'>
+  <a href='guide/export.html#get-the-list-of-files' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1193,7 +1200,7 @@ <h3 id='get-a-single-file' class='group mt-6 mb-4 font-bold text-gray-700 text-3
       
   Get a single file
   
-  <a href='guide/export.html#get-a-single-file'>
+  <a href='guide/export.html#get-a-single-file' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1223,7 +1230,7 @@ <h3 id='get-all-link-targets-from-a-note' class='group mt-6 mb-4 font-bold text-
       
   Get all link targets from a note
   
-  <a href='guide/export.html#get-all-link-targets-from-a-note'>
+  <a href='guide/export.html#get-all-link-targets-from-a-note' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1242,7 +1249,7 @@ <h3 id='get-the-list-of-tags' class='group mt-6 mb-4 font-bold text-gray-700 tex
       
   Get the list of tags
   
-  <a href='guide/export.html#get-the-list-of-tags'>
+  <a href='guide/export.html#get-the-list-of-tags' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1264,7 +1271,7 @@ <h3 id='get-all-files-associated-with-a-tag' class='group mt-6 mb-4 font-bold te
       
   Get all files associated with a tag
   
-  <a href='guide/export.html#get-all-files-associated-with-a-tag'>
+  <a href='guide/export.html#get-all-files-associated-with-a-tag' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1302,6 +1309,139 @@ <h3 id='get-all-files-associated-with-a-tag' class='group mt-6 mb-4 font-bold te
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='CLI examples'>
+              <a href='guide/export.html#cli-examples' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                CLI examples
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Get the list of files'>
+              <a href='guide/export.html#get-the-list-of-files' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Get the list of files
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Get a single file'>
+              <a href='guide/export.html#get-a-single-file' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Get a single file
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Get all link targets from a note'>
+              <a href='guide/export.html#get-all-link-targets-from-a-note' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Get all link targets from a note
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Get the list of tags'>
+              <a href='guide/export.html#get-the-list-of-tags' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Get the list of tags
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Get all files associated with a tag'>
+              <a href='guide/export.html#get-all-files-associated-with-a-tag' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Get all files associated with a tag
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1353,7 +1493,6 @@ <h3 id='get-all-files-associated-with-a-tag' class='group mt-6 mb-4 font-bold te
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1371,7 +1510,7 @@ <h3 id='get-all-files-associated-with-a-tag' class='group mt-6 mb-4 font-bold te
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1408,4 +1547,4 @@ <h3 id='get-all-files-associated-with-a-tag' class='group mt-6 mb-4 font-bold te
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/feed.html b/guide/feed.html
index 5749c4771..419f7bf0a 100644
--- a/guide/feed.html
+++ b/guide/feed.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1112,14 +1116,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     ATOM feed
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1166,11 +1173,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
   </div>
 </div>
-    <h2 id='example' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='example' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Example
   
-  <a href='guide/feed.html#example'>
+  <a href='guide/feed.html#example' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1184,11 +1191,11 @@ <h2 id='example' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-
       An example is available in the <a href='guide/query.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Obsidian-style queries</a> note. You can access its feed at <a href='guide/query.xml' class='text-blue-600 mavenLinkBold hover:underline'>query.xml</a>.
     </p>
   
-    <h2 id='configuration' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='configuration' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Configuration
   
-  <a href='guide/feed.html#configuration'>
+  <a href='guide/feed.html#configuration' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1226,6 +1233,95 @@ <h2 id='configuration' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl b
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Example'>
+              <a href='guide/feed.html#example' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Example
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Configuration'>
+              <a href='guide/feed.html#configuration' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Configuration
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1240,7 +1336,6 @@ <h2 id='configuration' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl b
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1258,7 +1353,7 @@ <h2 id='configuration' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl b
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1295,4 +1390,4 @@ <h2 id='configuration' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl b
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/html-template.html b/guide/html-template.html
index 5e15f6298..4e0121952 100644
--- a/guide/html-template.html
+++ b/guide/html-template.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1405,14 +1409,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     HTML Templates
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1429,11 +1436,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       The default HTML templates are stored in the <a href='guide/layer.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>default layer</a>, which can you override either totally or in subset.
     </p>
   
-    <h2 id='default-layout' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='default-layout' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Default Layout
   
-  <a href='guide/html-template.html#default-layout'>
+  <a href='guide/html-template.html#default-layout' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1447,11 +1454,11 @@ <h2 id='default-layout' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
       Emanote includes a default layout that includes a <a href='guide/html-template/sidebar.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Sidebar</a>, but can be customized to mimic <a href='guide/html-template/neuron-layout.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Neuron-like layout</a>. You may also write your own HTML layout from scratch, as long as you specify that template in <a href='guide/yaml-config.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>YAML configuration</a> for the notes in question. For eg., <a href='https://github.com/srid/srid/blob/master/templates/home.tpl' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'><code class='py-0.5 px-0.5 bg-gray-100'>templates/home.tpl</code></a> is how <a href='https://srid.ca' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>https://srid.ca</a> homepage is generated, because its <a href='https://raw.githubusercontent.com/srid/srid/master/index.md' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'><code class='py-0.5 px-0.5 bg-gray-100'>index.md</code></a> specifies this template as <code class='py-0.5 px-0.5 bg-gray-100'>template.name</code> in its YAML frontmatter (which could also be <code class='py-0.5 px-0.5 bg-gray-100'>index.yaml</code>).
     </p>
   
-    <h2 id='features' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='features' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Features
   
-  <a href='guide/html-template.html#features'>
+  <a href='guide/html-template.html#features' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1562,6 +1569,95 @@ <h2 id='features' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Default Layout'>
+              <a href='guide/html-template.html#default-layout' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Default Layout
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Features'>
+              <a href='guide/html-template.html#features' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Features
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1707,7 +1803,6 @@ <h2 id='features' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1725,7 +1820,7 @@ <h2 id='features' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1762,4 +1857,4 @@ <h2 id='features' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/html-template/external-links.html b/guide/html-template/external-links.html
index 69f43d00c..efbf38619 100644
--- a/guide/html-template/external-links.html
+++ b/guide/html-template/external-links.html
@@ -44,7 +44,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -101,6 +101,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1417,14 +1421,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     External links
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1437,11 +1444,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       A link whose address begins with an <a href='https://en.wikipedia.org/wiki/Uniform_Resource_Identifier#Syntax' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>URI scheme</a> component is considered an <strong>external link</strong>.
     </p>
   
-    <h2 id='heuristic' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='heuristic' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Heuristic
   
-  <a href='guide/html-template/external-links.html#heuristic'>
+  <a href='guide/html-template/external-links.html#heuristic' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1465,7 +1472,7 @@ <h3 id='overriding-the-heuristic' class='group mt-6 mb-4 font-bold text-gray-700
       
   Overriding the heuristic
   
-  <a href='guide/html-template/external-links.html#overriding-the-heuristic'>
+  <a href='guide/html-template/external-links.html#overriding-the-heuristic' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1483,11 +1490,11 @@ <h3 id='overriding-the-heuristic' class='group mt-6 mb-4 font-bold text-gray-700
       Note that the attribute can also be used to display the icons in the <a href='guide/html-template.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>HTML templates</a> (like the footer or the sidebar) or in raw HTML of <a href='guide/markdown.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Markdown <span class='emoji' data-emoji='writing_hand' style='font-family: emoji'>✍️</span></a>.
     </p>
   
-    <h2 id='url-properties' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='url-properties' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   URL properties
   
-  <a href='guide/html-template/external-links.html#url-properties'>
+  <a href='guide/html-template/external-links.html#url-properties' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1501,11 +1508,11 @@ <h2 id='url-properties' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
       The displayed icon may depend on the link properties (e.g. the actual URI scheme). This is <a href='guide/markdown/custom-style.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>customized using CSS</a>. By default, Emanote displays a different icon if the URI scheme component is <code class='py-0.5 px-0.5 bg-gray-100'>mailto:</code>. Check the <a href='https://github.com/srid/emanote/tree/master/emanote/default/templates/base.tpl' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>https://github.com/srid/emanote/tree/master/emanote/default/templates/base.tpl</a> of <a href='guide/html-template.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>HTML template</a> for details.
     </p>
   
-    <h2 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Demo
   
-  <a href='guide/html-template/external-links.html#demo'>
+  <a href='guide/html-template/external-links.html#demo' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1601,6 +1608,117 @@ <h2 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Heuristic'>
+              <a href='guide/html-template/external-links.html#heuristic' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Heuristic
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Overriding the heuristic'>
+              <a href='guide/html-template/external-links.html#overriding-the-heuristic' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Overriding the heuristic
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='URL properties'>
+              <a href='guide/html-template/external-links.html#url-properties' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                URL properties
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Demo'>
+              <a href='guide/html-template/external-links.html#demo' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Demo
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1615,7 +1733,6 @@ <h2 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1633,7 +1750,7 @@ <h2 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1670,4 +1787,4 @@ <h2 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/html-template/neuron-layout.html b/guide/html-template/neuron-layout.html
index 2f8db7af6..5cfbc651e 100644
--- a/guide/html-template/neuron-layout.html
+++ b/guide/html-template/neuron-layout.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -419,14 +423,17 @@
   </div>
 
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Neuron-like layout
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -472,11 +479,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
   </div>
 </div>
-    <h2 id='in-lieu-of-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='in-lieu-of-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   In lieu of sidebar
   
-  <a href='guide/html-template/neuron-layout.html#in-lieu-of-sidebar'>
+  <a href='guide/html-template/neuron-layout.html#in-lieu-of-sidebar' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -523,6 +530,84 @@ <h2 id='in-lieu-of-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 text-
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='In lieu of sidebar'>
+              <a href='guide/html-template/neuron-layout.html#in-lieu-of-sidebar' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                In lieu of sidebar
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -619,7 +704,6 @@ <h2 id='in-lieu-of-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 text-
 </div>
         </div>
       
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -637,7 +721,7 @@ <h2 id='in-lieu-of-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 text-
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -674,4 +758,4 @@ <h2 id='in-lieu-of-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 text-
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/html-template/search.html b/guide/html-template/search.html
index 72c49fb3a..ad97f90f4 100644
--- a/guide/html-template/search.html
+++ b/guide/html-template/search.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1416,14 +1420,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Full-text search
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1466,11 +1473,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       
     </ul>
   
-    <h2 id='including-frontmatter-in-the-search-index' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='including-frontmatter-in-the-search-index' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Including frontmatter in the search index
   
-  <a href='guide/html-template/search.html#including-frontmatter-in-the-search-index'>
+  <a href='guide/html-template/search.html#including-frontmatter-in-the-search-index' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1498,11 +1505,11 @@ <h2 id='including-frontmatter-in-the-search-index' class='group mt-6 mb-4 font-b
       This allows you to search by your frontmatter metadata (eg: tags) instead of just markdown body. Note that you may also get undesired results when searching words including non-relevant parts of the YAML frontmatter, like <code class='py-0.5 px-0.5 bg-gray-100'>order</code> or <code class='py-0.5 px-0.5 bg-gray-100'>date</code>; this is why the default is <code class='py-0.5 px-0.5 bg-gray-100'>omit</code>.
     </p>
   
-    <h2 id='known-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='known-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Known issues
   
-  <a href='guide/html-template/search.html#known-issues'>
+  <a href='guide/html-template/search.html#known-issues' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1542,6 +1549,95 @@ <h2 id='known-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bo
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Including frontmatter in the search index'>
+              <a href='guide/html-template/search.html#including-frontmatter-in-the-search-index' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Including frontmatter in the search index
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Known issues'>
+              <a href='guide/html-template/search.html#known-issues' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Known issues
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1578,7 +1674,6 @@ <h2 id='known-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bo
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1596,7 +1691,7 @@ <h2 id='known-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bo
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1633,4 +1728,4 @@ <h2 id='known-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bo
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/html-template/sidebar.html b/guide/html-template/sidebar.html
index c5237b64d..bced1e88f 100644
--- a/guide/html-template/sidebar.html
+++ b/guide/html-template/sidebar.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1416,14 +1420,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Sidebar
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1464,11 +1471,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       
     </ul>
   
-    <h2 id='customizing-page-title' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='customizing-page-title' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Customizing page title
   
-  <a href='guide/html-template/sidebar.html#customizing-page-title'>
+  <a href='guide/html-template/sidebar.html#customizing-page-title' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1492,11 +1499,11 @@ <h2 id='customizing-page-title' class='group mt-6 mb-4 font-bold text-gray-700 t
       This page will use “Hello World” as its title in the main view, but “hello” in the sidebar and index pages. For real-world example, see the page “<a href='guide/lua-filters.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Pandoc Lua Filters</a>”.
     </p>
   
-    <h2 id='disabling-the-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='disabling-the-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Disabling the sidebar
   
-  <a href='guide/html-template/sidebar.html#disabling-the-sidebar'>
+  <a href='guide/html-template/sidebar.html#disabling-the-sidebar' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1524,6 +1531,95 @@ <h2 id='disabling-the-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 te
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Customizing page title'>
+              <a href='guide/html-template/sidebar.html#customizing-page-title' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Customizing page title
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Disabling the sidebar'>
+              <a href='guide/html-template/sidebar.html#disabling-the-sidebar' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Disabling the sidebar
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1594,7 +1690,6 @@ <h2 id='disabling-the-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 te
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1612,7 +1707,7 @@ <h2 id='disabling-the-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 te
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1649,4 +1744,4 @@ <h2 id='disabling-the-sidebar' class='group mt-6 mb-4 font-bold text-gray-700 te
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/html-template/uptree.html b/guide/html-template/uptree.html
index 4a1dad4f7..9f51c7c8b 100644
--- a/guide/html-template/uptree.html
+++ b/guide/html-template/uptree.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1809,14 +1813,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Uplink tree
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1888,6 +1893,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1943,7 +1949,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1961,7 +1966,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1998,4 +2003,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/layer.html b/guide/layer.html
index e809e4fc8..d94283e4a 100644
--- a/guide/layer.html
+++ b/guide/layer.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1112,14 +1116,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Layer system
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1132,11 +1139,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       Emanote’s layer system allows you to “merge” multiple notebooks and treat them as if they were a single notebook. The <code class='py-0.5 px-0.5 bg-gray-100'>-L</code> option in the command line accepts layers, and you can specify multiple of them with the leftmost taking the most precedence.
     </p>
   
-    <h2 id='default-layer' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='default-layer' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   “Default” layer
   
-  <a href='guide/layer.html#default-layer'>
+  <a href='guide/layer.html#default-layer' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1150,11 +1157,11 @@ <h2 id='default-layer' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl b
       Emanote <em>implicitly</em> includes what is known as the “default” layer. Its contents can be seen <a href='https://github.com/srid/emanote/tree/master/emanote/default' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>here</a>. This layer contains <a href='guide/html-template.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>HTML Templates</a>, <a href='guide/yaml-config.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>index.yaml</a> and other default assets, like the logo, favicon and fonts. When you run <code class='py-0.5 px-0.5 bg-gray-100'>emanote -L /your/notebook run</code>, your notebook is overlaid <em>on top of</em> this default layer. What this means, in effect, is that you override <strong>just about any file</strong> in the default layer, such the HTML content of <a href='guide/html-template.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>HTML Templates</a>, in your own notebook directory. As an example, see <a href='https://github.com/srid/emanote/tree/master/docs/templates/hooks' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'><code class='py-0.5 px-0.5 bg-gray-100'>template/hooks</code></a> of this documentation notbook.
     </p>
   
-    <h2 id='merge-semantics' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='merge-semantics' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Merge semantics
   
-  <a href='guide/layer.html#merge-semantics'>
+  <a href='guide/layer.html#merge-semantics' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1176,6 +1183,95 @@ <h2 id='merge-semantics' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='“Default” layer'>
+              <a href='guide/layer.html#default-layer' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                “Default” layer
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Merge semantics'>
+              <a href='guide/layer.html#merge-semantics' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Merge semantics
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1242,7 +1338,6 @@ <h2 id='merge-semantics' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1260,7 +1355,7 @@ <h2 id='merge-semantics' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1297,4 +1392,4 @@ <h2 id='merge-semantics' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/lua-filters.html b/guide/lua-filters.html
index e531985b5..5bea3e2dd 100644
--- a/guide/lua-filters.html
+++ b/guide/lua-filters.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1112,14 +1116,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Pandoc Lua Filters
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1181,11 +1188,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
   </div>
 </div>
-    <h2 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Demo
   
-  <a href='guide/lua-filters.html#demo'>
+  <a href='guide/lua-filters.html#demo' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1203,7 +1210,7 @@ <h3 id='list-tablelua' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   <code class='py-0.5 px-0.5 bg-gray-100'>list-table.lua</code>
   
-  <a href='guide/lua-filters.html#list-tablelua'>
+  <a href='guide/lua-filters.html#list-tablelua' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1221,6 +1228,95 @@ <h3 id='list-tablelua' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Demo'>
+              <a href='guide/lua-filters.html#demo' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Demo
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='list-table.lua'>
+              <a href='guide/lua-filters.html#list-tablelua' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                list-table.lua
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1280,7 +1376,6 @@ <h3 id='list-tablelua' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1298,7 +1393,7 @@ <h3 id='list-tablelua' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1335,4 +1430,4 @@ <h3 id='list-tablelua' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/markdown.html b/guide/markdown.html
index 206c571c5..2c4c3ac35 100644
--- a/guide/markdown.html
+++ b/guide/markdown.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1233,14 +1237,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Markdown <span class='emoji' data-emoji='writing_hand' style='font-family: emoji'>✍️</span>
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1253,11 +1260,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       Emanote notes are primarily written in <strong>Markdown</strong> format, but <a href='guide/orgmode.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Org Mode ✍️</a> is also supported in a basic form. A tutorial is <a href='https://commonmark.org/help/tutorial/' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>available here</a>. Below we shall highlight some of the commonmark extensions that Emanote supports on top of standard Mardown syntax.
     </p>
   
-    <h2 id='wikilink' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='wikilink' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Wiki Links
   
-  <a href='guide/markdown.html#wikilink'>
+  <a href='guide/markdown.html#wikilink' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1275,7 +1282,7 @@ <h3 id='structural-links' class='group mt-6 mb-4 font-bold text-gray-700 text-3x
       
   Structural links
   
-  <a href='guide/markdown.html#structural-links'>
+  <a href='guide/markdown.html#structural-links' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1293,7 +1300,7 @@ <h3 id='anchors' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Anchors
   
-  <a href='guide/markdown.html#anchors'>
+  <a href='guide/markdown.html#anchors' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1311,7 +1318,7 @@ <h3 id='broken-links' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Broken links
   
-  <a href='guide/markdown.html#broken-links'>
+  <a href='guide/markdown.html#broken-links' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1329,7 +1336,7 @@ <h3 id='ambiguous-links' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl
       
   Ambiguous links
   
-  <a href='guide/markdown.html#ambiguous-links'>
+  <a href='guide/markdown.html#ambiguous-links' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1349,11 +1356,11 @@ <h3 id='ambiguous-links' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl
   
     </p>
   
-    <h2 id='emojis' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='emojis' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Emojis
   
-  <a href='guide/markdown.html#emojis'>
+  <a href='guide/markdown.html#emojis' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1375,11 +1382,11 @@ <h2 id='emojis' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b
       See <a href='https://gist.github.com/rxaviers/7360908' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>list of available emojis</a> for reference.
     </p>
   
-    <h2 id='footnotes' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='footnotes' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Footnotes
   
-  <a href='guide/markdown.html#footnotes'>
+  <a href='guide/markdown.html#footnotes' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1415,11 +1422,11 @@ <h2 id='footnotes' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl borde
    footnotes.
     </p>
   
-    <h2 id='tasks' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='tasks' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Task lists
   
-  <a href='guide/markdown.html#tasks'>
+  <a href='guide/markdown.html#tasks' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1505,11 +1512,11 @@ <h2 id='tasks' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
       Unchecked tasks will appear in the task index available at <a href='-/tasks.html' class='text-blue-600 mavenLinkBold hover:underline'>/-/tasks</a>.
     </p>
   
-    <h2 id='dl' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='dl' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Definition lists
   
-  <a href='guide/markdown.html#dl'>
+  <a href='guide/markdown.html#dl' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1577,11 +1584,11 @@ <h2 id='dl' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
       
     </dl>
   
-    <h2 id='lists' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='lists' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Lists
   
-  <a href='guide/markdown.html#lists'>
+  <a href='guide/markdown.html#lists' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1715,11 +1722,11 @@ <h2 id='lists' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
       
     </ul>
   
-    <h2 id='tables' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='tables' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Tables
   
-  <a href='guide/markdown.html#tables'>
+  <a href='guide/markdown.html#tables' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1733,11 +1740,11 @@ <h2 id='tables' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b
       (Note that wiki links with a custom text must have their <a href='https://github.com/srid/emanote/issues/113#issuecomment-894808721' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>pipe escaped</a> when used inside tables.)
     </p>
   
-    <h2 id='hash-tags' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='hash-tags' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Hash Tags
   
-  <a href='guide/markdown.html#hash-tags'>
+  <a href='guide/markdown.html#hash-tags' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1751,11 +1758,11 @@ <h2 id='hash-tags' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl borde
       Add Twitter-like hashtags anywhere in Markdown file. They can also be added to the <a href='guide/yaml-config.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>YAML frontmatter</a>. Hash tags can also be “hierarchical”, for instance: <span class='font-bold bg-gray-100 py-0.5 px-2 rounded-lg emanote:inline-tag:emanote/syntax/demo' title='Tag' data-tag='emanote/syntax/demo'><a href='-/tags/emanote/syntax/demo.html' title='Tag' class='text-blue-600 mavenLinkBold hover:underline'>#emanote/syntax/demo</a></span>
     </p>
   
-    <h2 id='highlighting' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='highlighting' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Highlighting
   
-  <a href='guide/markdown.html#highlighting'>
+  <a href='guide/markdown.html#highlighting' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1775,11 +1782,11 @@ <h2 id='highlighting' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bo
    The CSS style for highlighted inlines can be specified in <a href='guide/markdown/custom-style.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>index.yaml</a>. Regular Markdown syntax, including emojis, can be mixed in with highlighted inlines to <span class='bg-yellow-200 px-2 py-0.5 rounded-xl'>🍓 give a <strong>distinction</strong> on top</span> of it all.
     </p>
   
-    <h2 id='callouts' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='callouts' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Callouts
   
-  <a href='guide/markdown.html#callouts'>
+  <a href='guide/markdown.html#callouts' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1922,11 +1929,11 @@ <h2 id='callouts' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border
       Callouts also work with <a href='guide/orgmode.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Org Mode ✍️</a> syntax.
     </p>
   
-    <h2 id='hanchor' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='hanchor' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Heading anchors
   
-  <a href='guide/markdown.html#hanchor'>
+  <a href='guide/markdown.html#hanchor' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1949,7 +1956,7 @@ <h3 id='level-3' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Level 3
   
-  <a href='guide/markdown.html#level-3'>
+  <a href='guide/markdown.html#level-3' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1963,7 +1970,7 @@ <h4 id='level-4' class='group mt-6 mb-4 font-bold text-gray-700 text-2xl'>
       
   Level 4
   
-  <a href='guide/markdown.html#level-4'>
+  <a href='guide/markdown.html#level-4' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1977,7 +1984,7 @@ <h5 id='level-5' class='group mt-6 mb-4 font-bold text-gray-700 text-xl'>
       
   Level 5
   
-  <a href='guide/markdown.html#level-5'>
+  <a href='guide/markdown.html#level-5' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1991,7 +1998,7 @@ <h6 id='level-6' class='group mt-6 mb-4 font-bold text-gray-700 text-lg'>
       
   Level 6
   
-  <a href='guide/markdown.html#level-6'>
+  <a href='guide/markdown.html#level-6' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -2023,11 +2030,11 @@ <h6 id='level-6' class='group mt-6 mb-4 font-bold text-gray-700 text-lg'>
   
   </div>
 </div>
-    <h2 id='more-extensions' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='more-extensions' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   More extensions
   
-  <a href='guide/markdown.html#more-extensions'>
+  <a href='guide/markdown.html#more-extensions' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -2087,11 +2094,11 @@ <h2 id='more-extensions' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
   
   </div>
 </div>
-    <h2 id='example-highlightjs' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='example-highlightjs' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Example (highlight.js)
   
-  <a href='tips/js/syntax-highlighting.html#example-highlightjs'>
+  <a href='tips/js/syntax-highlighting.html#example-highlightjs' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -2105,7 +2112,7 @@ <h3 id='python' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Python
   
-  <a href='tips/js/syntax-highlighting.html#python'>
+  <a href='tips/js/syntax-highlighting.html#python' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -2125,7 +2132,7 @@ <h3 id='haskell' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Haskell
   
-  <a href='tips/js/syntax-highlighting.html#haskell'>
+  <a href='tips/js/syntax-highlighting.html#haskell' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -2137,11 +2144,11 @@ <h3 id='haskell' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
   <div class='py-0.5 mb-3 text-sm'><pre><code class='haskell language-haskell'>fib 0 = 0
 fib 1 = 1
 fib n = fib (n-1) + fib (n-2)</code></pre></div>
-    <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Prism
   
-  <a href='tips/js/syntax-highlighting.html#prism'>
+  <a href='tips/js/syntax-highlighting.html#prism' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -2239,6 +2246,293 @@ <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Wiki Links'>
+              <a href='guide/markdown.html#wikilink' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Wiki Links
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Structural links'>
+              <a href='guide/markdown.html#structural-links' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Structural links
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Anchors'>
+              <a href='guide/markdown.html#anchors' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Anchors
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Broken links'>
+              <a href='guide/markdown.html#broken-links' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Broken links
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Ambiguous links'>
+              <a href='guide/markdown.html#ambiguous-links' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Ambiguous links
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Emojis'>
+              <a href='guide/markdown.html#emojis' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Emojis
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Footnotes'>
+              <a href='guide/markdown.html#footnotes' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Footnotes
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Task lists'>
+              <a href='guide/markdown.html#tasks' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Task lists
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Definition lists'>
+              <a href='guide/markdown.html#dl' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Definition lists
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Lists'>
+              <a href='guide/markdown.html#lists' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Lists
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Tables'>
+              <a href='guide/markdown.html#tables' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Tables
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Hash Tags'>
+              <a href='guide/markdown.html#hash-tags' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Hash Tags
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Highlighting'>
+              <a href='guide/markdown.html#highlighting' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Highlighting
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Callouts'>
+              <a href='guide/markdown.html#callouts' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Callouts
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Heading anchors'>
+              <a href='guide/markdown.html#hanchor' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Heading anchors
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Level 3'>
+              <a href='guide/markdown.html#level-3' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Level 3
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Level 4'>
+              <a href='guide/markdown.html#level-4' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Level 4
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Level 5'>
+              <a href='guide/markdown.html#level-5' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Level 5
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Level 6'>
+              <a href='guide/markdown.html#level-6' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Level 6
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='More extensions'>
+              <a href='guide/markdown.html#more-extensions' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                More extensions
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -2389,7 +2683,6 @@ <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -2407,7 +2700,7 @@ <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -2444,4 +2737,4 @@ <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/markdown/custom-style.html b/guide/markdown/custom-style.html
index 5a7034e97..d80c48b4f 100644
--- a/guide/markdown/custom-style.html
+++ b/guide/markdown/custom-style.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1244,14 +1248,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Custom CSS styling
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1268,11 +1275,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       The <a href='https://github.com/jgm/commonmark-hs/blob/master/commonmark-extensions/test/attributes.md' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>attributes extension</a> provides the ability to set CSS classes on inline or block level elements of Markdown. You can also specify a “class map” in <a href='guide/yaml-config.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>index.yaml</a>, the default value of which provides some builtin-in styles.
     </p>
   
-    <h2 id='built-in-styles' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='built-in-styles' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Built-in styles
   
-  <a href='guide/markdown/custom-style.html#built-in-styles'>
+  <a href='guide/markdown/custom-style.html#built-in-styles' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1290,7 +1297,7 @@ <h3 id='sticky-note' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   sticky-note
   
-  <a href='guide/markdown/custom-style.html#sticky-note'>
+  <a href='guide/markdown/custom-style.html#sticky-note' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1316,7 +1323,7 @@ <h3 id='highlight-block' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl
       
   highlight-block
   
-  <a href='guide/markdown/custom-style.html#highlight-block'>
+  <a href='guide/markdown/custom-style.html#highlight-block' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1330,11 +1337,11 @@ <h3 id='highlight-block' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl
       A portion of Markdown that is highlighted compared to the rest
     </p>
   </div>
-    <h2 id='advanced-styling' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='advanced-styling' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Advanced styling
   
-  <a href='guide/markdown/custom-style.html#advanced-styling'>
+  <a href='guide/markdown/custom-style.html#advanced-styling' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1570,11 +1577,11 @@ <h2 id='advanced-styling' class='group mt-6 mb-4 font-bold text-gray-700 text-4x
   
   </div>
 </section></div>
-    <h2 id='customizing-default-styling-and-templates' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='customizing-default-styling-and-templates' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Customizing Default Styling and Templates
   
-  <a href='guide/markdown/custom-style.html#customizing-default-styling-and-templates'>
+  <a href='guide/markdown/custom-style.html#customizing-default-styling-and-templates' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1664,6 +1671,128 @@ <h2 id='customizing-default-styling-and-templates' class='group mt-6 mb-4 font-b
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Built-in styles'>
+              <a href='guide/markdown/custom-style.html#built-in-styles' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Built-in styles
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='sticky-note'>
+              <a href='guide/markdown/custom-style.html#sticky-note' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                sticky-note
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='highlight-block'>
+              <a href='guide/markdown/custom-style.html#highlight-block' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                highlight-block
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Advanced styling'>
+              <a href='guide/markdown/custom-style.html#advanced-styling' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Advanced styling
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Customizing Default Styling and Templates'>
+              <a href='guide/markdown/custom-style.html#customizing-default-styling-and-templates' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Customizing Default Styling and Templates
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1724,7 +1853,6 @@ <h2 id='customizing-default-styling-and-templates' class='group mt-6 mb-4 font-b
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1742,7 +1870,7 @@ <h2 id='customizing-default-styling-and-templates' class='group mt-6 mb-4 font-b
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1779,4 +1907,4 @@ <h2 id='customizing-default-styling-and-templates' class='group mt-6 mb-4 font-b
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/markdown/embed.html b/guide/markdown/embed.html
index 5f19e83e9..aa2f842dd 100644
--- a/guide/markdown/embed.html
+++ b/guide/markdown/embed.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1244,14 +1248,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Embedding
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1306,11 +1313,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
   </div>
 </div>
-    <h2 id='notes' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='notes' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Notes
   
-  <a href='guide/markdown/embed.html#notes'>
+  <a href='guide/markdown/embed.html#notes' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1406,11 +1413,11 @@ <h2 id='notes' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   
   </div>
 </section>
-    <h2 id='files' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='files' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Files
   
-  <a href='guide/markdown/embed.html#files'>
+  <a href='guide/markdown/embed.html#files' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1449,7 +1456,7 @@ <h3 id='images' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Images
   
-  <a href='guide/markdown/embed.html#images'>
+  <a href='guide/markdown/embed.html#images' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1496,7 +1503,7 @@ <h3 id='videos' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Videos
   
-  <a href='guide/markdown/embed.html#videos'>
+  <a href='guide/markdown/embed.html#videos' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1518,7 +1525,7 @@ <h3 id='audio' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Audio
   
-  <a href='guide/markdown/embed.html#audio'>
+  <a href='guide/markdown/embed.html#audio' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1540,7 +1547,7 @@ <h3 id='pdfs' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   PDFs
   
-  <a href='guide/markdown/embed.html#pdfs'>
+  <a href='guide/markdown/embed.html#pdfs' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1560,7 +1567,7 @@ <h3 id='code-files' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Code files
   
-  <a href='guide/markdown/embed.html#code-files'>
+  <a href='guide/markdown/embed.html#code-files' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1573,7 +1580,7 @@ <h3 id='code-files' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
     <p class='mb-3'>
       Source code files can be embedded using the same syntax. The following is the result of using <code class='py-0.5 px-0.5 bg-gray-100'>![[haskell-code.hs]]</code> (note that <code class='py-0.5 px-0.5 bg-gray-100'>![](haskell-code.hs)</code> also works):
     </p>
-  <div class='py-0.5 mb-3 text-sm' title='/nix/store/wgwn7iv5bal99spjaqy2rki6c7aqq8qd-docs/guide/markdown/haskell-code.hs'>
+  <div class='py-0.5 mb-3 text-sm' title='/nix/store/8rn3xibj5gx289m0fcf7wax86qb9zab5-docs/guide/markdown/haskell-code.hs'>
   <pre><code class='haskell'>module HaskellCode where
 
 main :: IO ()
@@ -1584,7 +1591,7 @@ <h3 id='code-files' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
     <p class='mb-3'>
       A C file:
     </p>
-  <div class='py-0.5 mb-3 text-sm' title='/nix/store/wgwn7iv5bal99spjaqy2rki6c7aqq8qd-docs/guide/markdown/c-code.c'>
+  <div class='py-0.5 mb-3 text-sm' title='/nix/store/8rn3xibj5gx289m0fcf7wax86qb9zab5-docs/guide/markdown/c-code.c'>
   <pre><code class='c'>#include &lt;stdio.h&gt;
 
 int main() {
@@ -1710,6 +1717,150 @@ <h3 id='code-files' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Notes'>
+              <a href='guide/markdown/embed.html#notes' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Notes
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Files'>
+              <a href='guide/markdown/embed.html#files' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Files
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Images'>
+              <a href='guide/markdown/embed.html#images' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Images
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Videos'>
+              <a href='guide/markdown/embed.html#videos' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Videos
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Audio'>
+              <a href='guide/markdown/embed.html#audio' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Audio
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='PDFs'>
+              <a href='guide/markdown/embed.html#pdfs' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                PDFs
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Code files'>
+              <a href='guide/markdown/embed.html#code-files' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Code files
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1785,7 +1936,6 @@ <h3 id='code-files' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1803,7 +1953,7 @@ <h3 id='code-files' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1840,4 +1990,4 @@ <h3 id='code-files' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/markdown/file-links.html b/guide/markdown/file-links.html
index df6c3ef10..896fe8f32 100644
--- a/guide/markdown/file-links.html
+++ b/guide/markdown/file-links.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1244,14 +1248,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     File WikiLinks
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1304,6 +1309,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1370,7 +1376,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1388,7 +1393,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1425,4 +1430,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/orgmode.html b/guide/orgmode.html
index 0ccdf0cec..3b489ed6f 100644
--- a/guide/orgmode.html
+++ b/guide/orgmode.html
@@ -54,7 +54,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -111,6 +111,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1123,14 +1127,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Org Mode ✍️
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1165,11 +1172,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
   </div>
 </div>
-    <h2 id='linking' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='linking' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Linking
   
-  <a href='guide/orgmode.html#linking'>
+  <a href='guide/orgmode.html#linking' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1183,11 +1190,11 @@ <h2 id='linking' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-
       Org Mode has no notion of wiki-links, but you can use <code class='verbatim py-0.5 px-0.5 bg-gray-100'>file:</code> <a href='https://orgmode.org/guide/Hyperlinks.html' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>hyperlinks</a> to link to other files such as Markdown files. If you wish to link to a .org file from a Markdown file, however, regular wiki-links ought to work.
     </p>
   
-    <h2 id='syntax' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='syntax' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Syntax
   
-  <a href='guide/orgmode.html#syntax'>
+  <a href='guide/orgmode.html#syntax' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1205,7 +1212,7 @@ <h3 id='code-blocks' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Code blocks
   
-  <a href='guide/orgmode.html#code-blocks'>
+  <a href='guide/orgmode.html#code-blocks' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1225,7 +1232,7 @@ <h3 id='latex' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   LaTeX
   
-  <a href='guide/orgmode.html#latex'>
+  <a href='guide/orgmode.html#latex' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1250,11 +1257,11 @@ <h3 id='latex' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       If <span class='math inline'>\(a^2=b\)</span> and <span class='math inline'>\( b=2 \)</span>, then the solution must be either <span class='math display'>$$ a=+\sqrt{2} $$</span> or <span class='math display'>$$ a=-\sqrt{2} $$</span>
     </p>
   
-    <h2 id='limitations' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='limitations' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Limitations
   
-  <a href='guide/orgmode.html#limitations'>
+  <a href='guide/orgmode.html#limitations' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1280,6 +1287,128 @@ <h2 id='limitations' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bor
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Linking'>
+              <a href='guide/orgmode.html#linking' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Linking
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Syntax'>
+              <a href='guide/orgmode.html#syntax' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Syntax
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Code blocks'>
+              <a href='guide/orgmode.html#code-blocks' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Code blocks
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='LaTeX'>
+              <a href='guide/orgmode.html#latex' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                LaTeX
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Limitations'>
+              <a href='guide/orgmode.html#limitations' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Limitations
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1365,7 +1494,6 @@ <h2 id='limitations' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bor
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1383,7 +1511,7 @@ <h2 id='limitations' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bor
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1420,4 +1548,4 @@ <h2 id='limitations' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bor
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/query.html b/guide/query.html
index badb5d3e3..d593520bf 100644
--- a/guide/query.html
+++ b/guide/query.html
@@ -43,7 +43,7 @@
 
   
   <link href='/guide/query.xml' rel='alternate' type='application/atom+xml' title='Atom Feed' />
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1112,14 +1116,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Obsidian-style queries
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1157,11 +1164,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       Both <code class='py-0.5 px-0.5 bg-gray-100'>*</code> and <code class='py-0.5 px-0.5 bg-gray-100'>**</code> are supported in the path patterns. See <a href='https://hackage.haskell.org/package/filepattern-0.1.3/docs/System-FilePattern.html' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>System.FilePattern</a> for exact semantics.
     </p>
   
-    <h2 id='examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Examples
   
-  <a href='guide/query.html#examples'>
+  <a href='guide/query.html#examples' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1179,7 +1186,7 @@ <h3 id='list-notes-in-current-folder' class='group mt-6 mb-4 font-bold text-gray
       
   List notes in current folder
   
-  <a href='guide/query.html#list-notes-in-current-folder'>
+  <a href='guide/query.html#list-notes-in-current-folder' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1195,7 +1202,7 @@ <h3 id='list-notes-in-an-arbitrary-folder' class='group mt-6 mb-4 font-bold text
       
   List notes in an arbitrary folder
   
-  <a href='guide/query.html#list-notes-in-an-arbitrary-folder'>
+  <a href='guide/query.html#list-notes-in-an-arbitrary-folder' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1211,7 +1218,7 @@ <h3 id='list-notes-by-a-tag' class='group mt-6 mb-4 font-bold text-gray-700 text
       
   List notes by a tag
   
-  <a href='guide/query.html#list-notes-by-a-tag'>
+  <a href='guide/query.html#list-notes-by-a-tag' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1227,7 +1234,7 @@ <h3 id='list-notes-by-a-tag-pattern' class='group mt-6 mb-4 font-bold text-gray-
       
   List notes by a tag pattern
   
-  <a href='guide/query.html#list-notes-by-a-tag-pattern'>
+  <a href='guide/query.html#list-notes-by-a-tag-pattern' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1243,7 +1250,7 @@ <h3 id='list-folgezettel-children-of-current-note' class='group mt-6 mb-4 font-b
       
   List folgezettel children of current note
   
-  <a href='guide/query.html#list-folgezettel-children-of-current-note'>
+  <a href='guide/query.html#list-folgezettel-children-of-current-note' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1259,7 +1266,7 @@ <h3 id='list-folgezettel-parents-of-current-note' class='group mt-6 mb-4 font-bo
       
   List folgezettel parents of current note
   
-  <a href='guide/query.html#list-folgezettel-parents-of-current-note'>
+  <a href='guide/query.html#list-folgezettel-parents-of-current-note' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1271,11 +1278,11 @@ <h3 id='list-folgezettel-parents-of-current-note' class='group mt-6 mb-4 font-bo
   <div class='py-0.5 mb-3 text-sm'><pre><code class='markdown language-markdown'>```query
 parents:.
 ```</code></pre></div>
-    <h2 id='timeline-queries' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='timeline-queries' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Timeline queries
   
-  <a href='guide/query.html#timeline-queries'>
+  <a href='guide/query.html#timeline-queries' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1351,6 +1358,161 @@ <h2 id='timeline-queries' class='group mt-6 mb-4 font-bold text-gray-700 text-4x
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Examples'>
+              <a href='guide/query.html#examples' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Examples
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='List notes in current folder'>
+              <a href='guide/query.html#list-notes-in-current-folder' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                List notes in current folder
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='List notes in an arbitrary folder'>
+              <a href='guide/query.html#list-notes-in-an-arbitrary-folder' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                List notes in an arbitrary folder
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='List notes by a tag'>
+              <a href='guide/query.html#list-notes-by-a-tag' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                List notes by a tag
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='List notes by a tag pattern'>
+              <a href='guide/query.html#list-notes-by-a-tag-pattern' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                List notes by a tag pattern
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='List folgezettel children of current note'>
+              <a href='guide/query.html#list-folgezettel-children-of-current-note' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                List folgezettel children of current note
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='List folgezettel parents of current note'>
+              <a href='guide/query.html#list-folgezettel-parents-of-current-note' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                List folgezettel parents of current note
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Timeline queries'>
+              <a href='guide/query.html#timeline-queries' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Timeline queries
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1455,7 +1617,6 @@ <h2 id='timeline-queries' class='group mt-6 mb-4 font-bold text-gray-700 text-4x
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1473,7 +1634,7 @@ <h2 id='timeline-queries' class='group mt-6 mb-4 font-bold text-gray-700 text-4x
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1510,4 +1671,4 @@ <h2 id='timeline-queries' class='group mt-6 mb-4 font-bold text-gray-700 text-4x
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/guide/yaml-config.html b/guide/yaml-config.html
index 82c0c5215..111733ed6 100644
--- a/guide/yaml-config.html
+++ b/guide/yaml-config.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1112,14 +1116,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-green-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     YAML configuration
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1157,11 +1164,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-green-100 text-5xl font-ext
   
   </div>
 </div>
-    <h2 id='special-properties' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='special-properties' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Special properties
   
-  <a href='guide/yaml-config.html#special-properties'>
+  <a href='guide/yaml-config.html#special-properties' class='--ema-anchor'>
     <span class='hover:text-green-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1179,11 +1186,11 @@ <h2 id='special-properties' class='group mt-6 mb-4 font-bold text-gray-700 text-
       
     </ul>
   
-    <h2 id='examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Examples
   
-  <a href='guide/yaml-config.html#examples'>
+  <a href='guide/yaml-config.html#examples' class='--ema-anchor'>
     <span class='hover:text-green-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1213,6 +1220,95 @@ <h2 id='examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Special properties'>
+              <a href='guide/yaml-config.html#special-properties' class='--ema-toc bg-green-200 rounded-md p-0.5'>
+                Special properties
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Examples'>
+              <a href='guide/yaml-config.html#examples' class='--ema-toc bg-green-200 rounded-md p-0.5'>
+                Examples
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1602,7 +1698,6 @@ <h2 id='examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1620,7 +1715,7 @@ <h2 id='examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-green-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1657,4 +1752,4 @@ <h2 id='examples' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 6a4900830..845eed45f 100644
--- a/index.html
+++ b/index.html
@@ -44,7 +44,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -101,6 +101,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -628,14 +632,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Emanote
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -643,24 +648,14 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 
 
 
-<div class='text-xl my-4'><div class='w-32 float-left mr-8 pt-2'><img class='inline mb-3' src='_emanote-static/emanote-logo.svg' alt='/nix/store/wag48rjvnkr6zazr7hw15x1p4y5sl1bn-emanote-1.3.13.0-data/share/ghc-9.4.8/x86_64-linux-ghc-9.4.8/emanote-1.3.13.0/_emanote-static/emanote-logo.svg' style='width: inherit;' /></div>
+<div class='text-xl my-4'><div class='w-32 float-left mr-8 pt-2'><img class='inline mb-3' src='_emanote-static/emanote-logo.svg' alt='/nix/store/a3a43d73bv6ia91na2qzmklgaz85b4bm-emanote-1.3.14.0-data/share/ghc-9.4.8/x86_64-linux-ghc-9.4.8/emanote-1.3.14.0/_emanote-static/emanote-logo.svg' style='width: inherit;' /></div>
     <p class='mb-3'>
       <a href='https://github.com/srid/emanote' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>Emanote</a> enables you to <strong>create beautiful websites</strong> – such as <em>personal webpage</em>, <em>blog</em>, <em>wiki</em>, <em>Zettelkasten</em>, <em>notebook</em>, <em>knowledge-base</em>, <em>documentation</em>, etc. from future-proof <strong>plain-text notes</strong> and arbitrary data – with live preview that updates in real-time. It aims to be next-gen <a href='https://neuron.zettel.page/' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>neuron</a> with powerful features.
     </p>
   </div>
-    <h4 id='get-started' class='group mt-6 mb-4 font-bold text-gray-700 text-2xl'>
-      
-  <a href='start.html' class='flex justify-center items-center my-8 text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Get started</a>
-  
-  <a href='#get-started'>
-    <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
-        <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
-        <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
-      </svg></span>
-  </a>
-
-
-    </h4>
+    <p class='mb-3'>
+      <a href='start.html' class='flex justify-center items-center my-8 text-3xl text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Get started</a>
+    </p>
   
   <div class='flex items-center justify-center mt-2'>
   <a class='text-gray-300 hover:text-blue-600 text-sm' title='Edit this page on GitHub' href='https://github.com/srid/emanote/edit/master/docs/index.md'>
@@ -670,6 +665,7 @@ <h4 id='get-started' class='group mt-6 mb-4 font-bold text-gray-700 text-2xl'>
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -684,7 +680,6 @@ <h4 id='get-started' class='group mt-6 mb-4 font-bold text-gray-700 text-2xl'>
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -702,7 +697,7 @@ <h4 id='get-started' class='group mt-6 mb-4 font-bold text-gray-700 text-2xl'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -739,4 +734,4 @@ <h4 id='get-started' class='group mt-6 mb-4 font-bold text-gray-700 text-2xl'>
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/ogp.html b/ogp.html
index 060ef98ab..64744b8f4 100644
--- a/ogp.html
+++ b/ogp.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1416,14 +1420,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Open Graph Protocol (OGP)
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1456,11 +1463,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       </a>
     </sup>
    in the note, if any; otherwise, use the <code class='py-0.5 px-0.5 bg-gray-100'>image</code> <a href='guide/yaml-config.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>YAML metadata</a></td></tr></tbody></table>
-    <h2 id='twitter' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='twitter' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Twitter
   
-  <a href='ogp.html#twitter'>
+  <a href='ogp.html#twitter' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1505,6 +1512,84 @@ <h2 id='twitter' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Twitter'>
+              <a href='ogp.html#twitter' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Twitter
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1541,7 +1626,6 @@ <h2 id='twitter' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1559,7 +1643,7 @@ <h2 id='twitter' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1596,4 +1680,4 @@ <h2 id='twitter' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start.html b/start.html
index 6ca68d2cc..522047b39 100644
--- a/start.html
+++ b/start.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -811,14 +815,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Getting Started
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -902,6 +907,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -932,7 +938,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
             <div class='mb-4 overflow-auto text-sm text-gray-500'>
   
     <div class='pl-2 mt-2 border-l-2 border-blue-200 hover:border-blue-500'>
-      <div><h4 id='get-started'><a href='start.html' class='flex justify-center items-center my-8 text-gray-600 font-bold hover:bg-gray-50' data-wikilink-type='WikiLinkNormal'>Get started</a></h4></div>
+      <div><p><a href='start.html' class='flex justify-center items-center my-8 text-3xl text-gray-600 font-bold hover:bg-gray-50' data-wikilink-type='WikiLinkNormal'>Get started</a></p></div>
     </div>
   
 </div>
@@ -968,7 +974,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -986,7 +991,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1023,4 +1028,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/install.html b/start/install.html
index b1acc9917..dda6e51a6 100644
--- a/start/install.html
+++ b/start/install.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -943,14 +947,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Installing
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -959,11 +966,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 
 
 
-    <h2 id='official-method' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='official-method' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Official method
   
-  <a href='start/install.html#official-method'>
+  <a href='start/install.html#official-method' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1054,11 +1061,11 @@ <h2 id='official-method' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
 # Generate static files (-L defaults to current directory)
 mkdir /tmp/output
 emanote -L /path/to/notebook gen /tmp/output</code></pre></div>
-    <h2 id='non-nix-methods' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='non-nix-methods' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Non-nix methods
   
-  <a href='start/install.html#non-nix-methods'>
+  <a href='start/install.html#non-nix-methods' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1084,6 +1091,95 @@ <h2 id='non-nix-methods' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Official method'>
+              <a href='start/install.html#official-method' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Official method
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Non-nix methods'>
+              <a href='start/install.html#non-nix-methods' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Non-nix methods
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1135,7 +1231,6 @@ <h2 id='non-nix-methods' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1153,7 +1248,7 @@ <h2 id='non-nix-methods' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1190,4 +1285,4 @@ <h2 id='non-nix-methods' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/install/docker.html b/start/install/docker.html
index e85ee3a29..de8a43c06 100644
--- a/start/install/docker.html
+++ b/start/install/docker.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -954,14 +958,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Docker image
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -981,11 +988,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   -v $PWD:/data \
   sridca/emanote emanote -L "/data" gen /data/output.docker
 open ./output.docker/index.html</code></pre></div>
-    <h2 id='links' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='links' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Links
   
-  <a href='start/install/docker.html#links'>
+  <a href='start/install/docker.html#links' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1011,6 +1018,84 @@ <h2 id='links' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Links'>
+              <a href='start/install/docker.html#links' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Links
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1051,7 +1136,6 @@ <h2 id='links' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1069,7 +1153,7 @@ <h2 id='links' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1106,4 +1190,4 @@ <h2 id='links' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/install/nix.html b/start/install/nix.html
index 85b3cbfab..42d59f9f2 100644
--- a/start/install/nix.html
+++ b/start/install/nix.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -954,14 +958,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Using on Nix/NixOS
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -978,11 +985,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       You will need <a href='https://nixos.asia/en/install' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>Nix</a> version 2.4 or greater.
     </p>
   
-    <h2 id='installing-with-nix-flakes' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='installing-with-nix-flakes' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Installing with Nix Flakes
   
-  <a href='start/install/nix.html#installing-with-nix-flakes'>
+  <a href='start/install/nix.html#installing-with-nix-flakes' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -996,11 +1003,11 @@ <h2 id='installing-with-nix-flakes' class='group mt-6 mb-4 font-bold text-gray-7
       This will provide the <code class='py-0.5 px-0.5 bg-gray-100'>emanote</code> command in your environment.
     </p>
   <div class='py-0.5 mb-3 text-sm'><pre><code class='sh language-sh'>$ nix profile install github:srid/emanote</code></pre></div>
-    <h2 id='using-as-flake-parts-module' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='using-as-flake-parts-module' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Using as <code class='py-0.5 px-0.5 bg-gray-100'>flake-parts</code> module
   
-  <a href='start/install/nix.html#using-as-flake-parts-module'>
+  <a href='start/install/nix.html#using-as-flake-parts-module' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1014,11 +1021,11 @@ <h2 id='using-as-flake-parts-module' class='group mt-6 mb-4 font-bold text-gray-
       <a href='start/resources/emanote-template.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>emanote-template</a> uses this approach. See <a href='https://github.com/srid/emanote-template/blob/master/flake.nix' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>https://github.com/srid/emanote-template/blob/master/flake.nix</a>
     </p>
   
-    <h2 id='using-emanote-as-a-home-manager-service' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='using-emanote-as-a-home-manager-service' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Using Emanote as a Home Manager service
   
-  <a href='start/install/nix.html#using-emanote-as-a-home-manager-service'>
+  <a href='start/install/nix.html#using-emanote-as-a-home-manager-service' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1077,6 +1084,106 @@ <h2 id='using-emanote-as-a-home-manager-service' class='group mt-6 mb-4 font-bol
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Installing with Nix Flakes'>
+              <a href='start/install/nix.html#installing-with-nix-flakes' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Installing with Nix Flakes
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Using as flake-parts module'>
+              <a href='start/install/nix.html#using-as-flake-parts-module' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Using as flake-parts module
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Using Emanote as a Home Manager service'>
+              <a href='start/install/nix.html#using-emanote-as-a-home-manager-service' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Using Emanote as a Home Manager service
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1128,7 +1235,6 @@ <h2 id='using-emanote-as-a-home-manager-service' class='group mt-6 mb-4 font-bol
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1146,7 +1252,7 @@ <h2 id='using-emanote-as-a-home-manager-service' class='group mt-6 mb-4 font-bol
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1183,4 +1289,4 @@ <h2 id='using-emanote-as-a-home-manager-service' class='group mt-6 mb-4 font-bol
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/install/wsl.html b/start/install/wsl.html
index 5364612c8..f7c2504b8 100644
--- a/start/install/wsl.html
+++ b/start/install/wsl.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -954,14 +958,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Using on Windows
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -990,11 +997,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       
     </ul>
   
-    <h2 id='setup-wsl2' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='setup-wsl2' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Setup WSL2
   
-  <a href='start/install/wsl.html#setup-wsl2'>
+  <a href='start/install/wsl.html#setup-wsl2' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1034,11 +1041,11 @@ <h2 id='setup-wsl2' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bord
       
     </ul>
   
-    <h2 id='install-visual-studio-code' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='install-visual-studio-code' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Install Visual Studio Code
   
-  <a href='start/install/wsl.html#install-visual-studio-code'>
+  <a href='start/install/wsl.html#install-visual-studio-code' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1080,11 +1087,11 @@ <h2 id='install-visual-studio-code' class='group mt-6 mb-4 font-bold text-gray-7
       
     </ul>
   
-    <h2 id='syncthing' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='syncthing' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Syncthing
   
-  <a href='start/install/wsl.html#syncthing'>
+  <a href='start/install/wsl.html#syncthing' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1132,6 +1139,106 @@ <h2 id='syncthing' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl borde
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Setup WSL2'>
+              <a href='start/install/wsl.html#setup-wsl2' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Setup WSL2
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Install Visual Studio Code'>
+              <a href='start/install/wsl.html#install-visual-studio-code' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Install Visual Studio Code
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Syncthing'>
+              <a href='start/install/wsl.html#syncthing' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Syncthing
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1168,7 +1275,6 @@ <h2 id='syncthing' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl borde
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1186,7 +1292,7 @@ <h2 id='syncthing' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl borde
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1223,4 +1329,4 @@ <h2 id='syncthing' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl borde
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/known-issues.html b/start/known-issues.html
index 20b346fe5..9f9418ca9 100644
--- a/start/known-issues.html
+++ b/start/known-issues.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -822,14 +826,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Known Issues
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -838,11 +845,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 
 
 
-    <h2 id='unicode-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='unicode-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Unicode issues
   
-  <a href='start/known-issues.html#unicode-issues'>
+  <a href='start/known-issues.html#unicode-issues' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -864,6 +871,84 @@ <h2 id='unicode-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Unicode issues'>
+              <a href='start/known-issues.html#unicode-issues' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Unicode issues
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -878,7 +963,6 @@ <h2 id='unicode-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -896,7 +980,7 @@ <h2 id='unicode-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -933,4 +1017,4 @@ <h2 id='unicode-issues' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/neuron.html b/start/neuron.html
index c789b3f31..27d547a48 100644
--- a/start/neuron.html
+++ b/start/neuron.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -863,14 +867,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Migrating from neuron
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -907,11 +914,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       
     </ul>
   
-    <h2 id='capabilities-emanote-provides-but-neuron-does-not' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='capabilities-emanote-provides-but-neuron-does-not' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Capabilities Emanote provides, but neuron does not
   
-  <a href='start/neuron.html#capabilities-emanote-provides-but-neuron-does-not'>
+  <a href='start/neuron.html#capabilities-emanote-provides-but-neuron-does-not' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1009,11 +1016,11 @@ <h2 id='capabilities-emanote-provides-but-neuron-does-not' class='group mt-6 mb-
       
     </ul>
   
-    <h2 id='porting-existing-vim-plugins' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='porting-existing-vim-plugins' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Porting existing Vim plugins
   
-  <a href='start/neuron.html#porting-existing-vim-plugins'>
+  <a href='start/neuron.html#porting-existing-vim-plugins' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1035,6 +1042,95 @@ <h2 id='porting-existing-vim-plugins' class='group mt-6 mb-4 font-bold text-gray
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Capabilities Emanote provides, but neuron does not'>
+              <a href='start/neuron.html#capabilities-emanote-provides-but-neuron-does-not' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Capabilities Emanote provides, but neuron does not
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Porting existing Vim plugins'>
+              <a href='start/neuron.html#porting-existing-vim-plugins' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Porting existing Vim plugins
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1086,7 +1182,6 @@ <h2 id='porting-existing-vim-plugins' class='group mt-6 mb-4 font-bold text-gray
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1104,7 +1199,7 @@ <h2 id='porting-existing-vim-plugins' class='group mt-6 mb-4 font-bold text-gray
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1141,4 +1236,4 @@ <h2 id='porting-existing-vim-plugins' class='group mt-6 mb-4 font-bold text-gray
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/resources.html b/start/resources.html
index 77a7ffaab..7a86cfcb6 100644
--- a/start/resources.html
+++ b/start/resources.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -989,14 +993,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Resources
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1078,6 +1083,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1114,7 +1120,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1132,7 +1137,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1169,4 +1174,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/resources/editors.html b/start/resources/editors.html
index 4141a3d23..b37e552e1 100644
--- a/start/resources/editors.html
+++ b/start/resources/editors.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1121,14 +1125,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Editors
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1198,6 +1203,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1212,7 +1218,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1230,7 +1235,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1267,4 +1272,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/resources/editors/nota.html b/start/resources/editors/nota.html
index 5c0b34856..b4747bd7e 100644
--- a/start/resources/editors/nota.html
+++ b/start/resources/editors/nota.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1132,14 +1136,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Nota
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1160,6 +1165,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1174,7 +1180,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1192,7 +1197,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1229,4 +1234,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/resources/editors/vim.html b/start/resources/editors/vim.html
index 970b4b264..71c81050f 100644
--- a/start/resources/editors/vim.html
+++ b/start/resources/editors/vim.html
@@ -45,7 +45,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -102,6 +102,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1134,14 +1138,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Vim
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1158,11 +1165,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       NOTE: If you are looking to write a Vim extension for Emanote, see <a href='guide/export.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>JSON export</a>.
     </p>
   
-    <h2 id='known-issue-glitches-when-saving-file' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='known-issue-glitches-when-saving-file' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Known issue: glitches when saving file
   
-  <a href='start/resources/editors/vim.html#known-issue-glitches-when-saving-file'>
+  <a href='start/resources/editors/vim.html#known-issue-glitches-when-saving-file' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1224,6 +1231,84 @@ <h2 id='known-issue-glitches-when-saving-file' class='group mt-6 mb-4 font-bold
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Known issue: glitches when saving file'>
+              <a href='start/resources/editors/vim.html#known-issue-glitches-when-saving-file' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Known issue: glitches when saving file
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1260,7 +1345,6 @@ <h2 id='known-issue-glitches-when-saving-file' class='group mt-6 mb-4 font-bold
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1278,7 +1362,7 @@ <h2 id='known-issue-glitches-when-saving-file' class='group mt-6 mb-4 font-bold
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1315,4 +1399,4 @@ <h2 id='known-issue-glitches-when-saving-file' class='group mt-6 mb-4 font-bold
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/resources/editors/vscode.html b/start/resources/editors/vscode.html
index 07c2686ff..a29e23cf6 100644
--- a/start/resources/editors/vscode.html
+++ b/start/resources/editors/vscode.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1132,14 +1136,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Visual Studio Code
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1160,6 +1165,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1275,7 +1281,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1293,7 +1298,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1330,4 +1335,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/resources/emanote-template.html b/start/resources/emanote-template.html
index d95754c16..5d6362c15 100644
--- a/start/resources/emanote-template.html
+++ b/start/resources/emanote-template.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1000,14 +1004,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     emanote-template
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1028,11 +1035,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       Open the notebook in <a href='start/resources/editors/vscode.html' class='text-blue-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Visual Studio Code</a> and install the recommended extensions.
     </p>
   
-    <h2 id='nix-template' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='nix-template' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Nix template
   
-  <a href='start/resources/emanote-template.html#nix-template'>
+  <a href='start/resources/emanote-template.html#nix-template' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1058,6 +1065,84 @@ <h2 id='nix-template' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bo
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Nix template'>
+              <a href='start/resources/emanote-template.html#nix-template' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Nix template
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1177,7 +1262,6 @@ <h2 id='nix-template' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bo
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1195,7 +1279,7 @@ <h2 id='nix-template' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bo
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1232,4 +1316,4 @@ <h2 id='nix-template' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl bo
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/start/resources/zk.html b/start/resources/zk.html
index 490345345..2c46999ff 100644
--- a/start/resources/zk.html
+++ b/start/resources/zk.html
@@ -43,7 +43,7 @@
 <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/ini.min.js'></script>
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1000,14 +1004,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     zk
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1020,11 +1027,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       <a href='https://github.com/mickael-menu/zk' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'><code class='py-0.5 px-0.5 bg-gray-100'>zk</code></a> is a command-line tool for working with Zettelkasten projects. It focuses on being easy for automation and is generic in the sense that it does not lock in to only supporting a certain note taking tool, which makes it useful for <a href='https://obsidian.md/' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>Obsidian</a>, <a href='https://neuron.zettel.page/' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>Neuron</a>, and Emanote notes collections.
     </p>
   
-    <h2 id='configuring-repo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='configuring-repo' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Configuring repo
   
-  <a href='start/resources/zk.html#configuring-repo'>
+  <a href='start/resources/zk.html#configuring-repo' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1085,11 +1092,11 @@ <h2 id='configuring-repo' class='group mt-6 mb-4 font-bold text-gray-700 text-4x
 
 # Syntax highlighting when in commands such as "zk edit -i"
 fzf-preview = "bat -p --color always {-1}"</code></pre></div>
-    <h2 id='editor-integration' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='editor-integration' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Editor integration
   
-  <a href='start/resources/zk.html#editor-integration'>
+  <a href='start/resources/zk.html#editor-integration' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1131,6 +1138,95 @@ <h2 id='editor-integration' class='group mt-6 mb-4 font-bold text-gray-700 text-
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Configuring repo'>
+              <a href='start/resources/zk.html#configuring-repo' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Configuring repo
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Editor integration'>
+              <a href='start/resources/zk.html#editor-integration' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Editor integration
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1145,7 +1241,6 @@ <h2 id='editor-integration' class='group mt-6 mb-4 font-bold text-gray-700 text-
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1163,7 +1258,7 @@ <h2 id='editor-integration' class='group mt-6 mb-4 font-bold text-gray-700 text-
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1200,4 +1295,4 @@ <h2 id='editor-integration' class='group mt-6 mb-4 font-bold text-gray-700 text-
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/tailwind.css b/tailwind.css
index ff2bc3876..2bef1dc47 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -1 +1 @@
-/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,input:where(:not([type])):focus,select:focus,textarea:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:#0000;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}@media (forced-colors:active) {[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active) {[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{border-color:#0000;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active) {[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{border-color:#0000;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-top-6{top:-1.5rem}.right-1{right:.25rem}.z-40{z-index:40}.float-right{float:right}.float-left{float:left}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.mr-2{margin-right:.5rem}.mr-8{margin-right:2rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-screen{height:100vh}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.max-w-prose{max-width:65ch}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.-skew-y-1{--tw-skew-y:-1deg}.-skew-y-1,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-x-90{--tw-scale-x:.9}.scale-x-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-flow-row{grid-auto-flow:row}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-scroll{overflow-y:scroll}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border-2{border-width:2px}.border-8{border-width:8px}.border-b-2{border-bottom-width:2px}.border-l-2{border-left-width:2px}.border-r-2{border-right-width:2px}.border-t-2{border-top-width:2px}.border-t-8{border-top-width:8px}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgb(254 240 138/var(--tw-bg-opacity))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity))}.bg-opacity-10{--tw-bg-opacity:0.1}.fill-current{fill:currentColor}.stroke-current{stroke:currentColor}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.tracking-tighter{letter-spacing:-.05em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid #0000;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:scale-100:hover{--tw-scale-x:1;--tw-scale-y:1}.hover\:scale-100:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:border-blue-400:hover{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.hover\:border-blue-600:hover{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.hover\:border-green-500:hover{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.hover\:border-yellow-400:hover{--tw-border-opacity:1;border-color:rgb(250 204 21/var(--tw-border-opacity))}.hover\:bg-blue-200:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-green-200:hover{--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity))}.hover\:bg-green-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.hover\:text-blue-400:hover{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.hover\:text-green-400:hover{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.hover\:text-green-500:hover{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.hover\:text-green-600:hover{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.hover\:text-green-700:hover{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-80:hover{opacity:.8}.hover\:shadow:hover{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.group:hover .group-hover\:visible{visibility:visible}@media (min-width:768px){.md\:sticky{position:sticky}.md\:right-0{right:0}.md\:top-0{top:0}.md\:mb-8{margin-bottom:2rem}.md\:mt-4{margin-top:1rem}.md\:mt-8{margin-top:2rem}.md\:block{display:block}.md\:hidden{display:none}.md\:max-h-screen{max-height:100vh}.md\:w-48{width:12rem}.md\:flex-row{flex-direction:row}.md\:overflow-y-auto{overflow-y:auto}.md\:shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}@media (min-width:1024px){.lg\:max-w-screen-md{max-width:768px}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}}@media (min-width:1280px){.xl\:w-64{width:16rem}}
\ No newline at end of file
+/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,input:where(:not([type])):focus,select:focus,textarea:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:#0000;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}@media (forced-colors:active) {[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active) {[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{border-color:#0000;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active) {[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{border-color:#0000;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-top-6{top:-1.5rem}.right-1{right:.25rem}.z-40{z-index:40}.float-right{float:right}.float-left{float:left}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-8{margin-top:2rem;margin-bottom:2rem}.-mt-2{margin-top:-.5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.mr-2{margin-right:.5rem}.mr-8{margin-right:2rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-screen{height:100vh}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.max-w-prose{max-width:65ch}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.-skew-y-1{--tw-skew-y:-1deg}.-skew-y-1,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-x-90{--tw-scale-x:.9}.scale-x-90,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-flow-row{grid-auto-flow:row}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.gap-4{gap:1rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-y-scroll{overflow-y:scroll}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border-2{border-width:2px}.border-8{border-width:8px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-r-2{border-right-width:2px}.border-t-2{border-top-width:2px}.border-t-8{border-top-width:8px}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgb(254 240 138/var(--tw-bg-opacity))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity))}.bg-opacity-10{--tw-bg-opacity:0.1}.fill-current{fill:currentColor}.stroke-current{stroke:currentColor}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.tracking-tighter{letter-spacing:-.05em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid #0000;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:scale-100:hover{--tw-scale-x:1;--tw-scale-y:1}.hover\:scale-100:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:border-blue-400:hover{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.hover\:border-blue-600:hover{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity))}.hover\:border-green-500:hover{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.hover\:border-yellow-400:hover{--tw-border-opacity:1;border-color:rgb(250 204 21/var(--tw-border-opacity))}.hover\:bg-blue-200:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-green-200:hover{--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity))}.hover\:bg-green-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.hover\:text-blue-400:hover{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.hover\:text-green-400:hover{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}.hover\:text-green-500:hover{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.hover\:text-green-600:hover{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.hover\:text-green-700:hover{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-80:hover{opacity:.8}.hover\:shadow:hover{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.group:hover .group-hover\:visible{visibility:visible}@media (min-width:768px){.md\:sticky{position:sticky}.md\:right-0{right:0}.md\:top-0{top:0}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-6{grid-column:span 6/span 6}.md\:mb-8{margin-bottom:2rem}.md\:mt-4{margin-top:1rem}.md\:mt-8{margin-top:2rem}.md\:block{display:block}.md\:hidden{display:none}.md\:max-h-screen{max-height:100vh}.md\:w-48{width:12rem}.md\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:overflow-y-auto{overflow-y:auto}.md\:shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}@media (min-width:1024px){.lg\:max-w-screen-md{max-width:768px}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}}@media (min-width:1280px){.xl\:w-64{width:16rem}}
\ No newline at end of file
diff --git a/tips.html b/tips.html
index 9cc56cce3..231bf74db 100644
--- a/tips.html
+++ b/tips.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -761,14 +765,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Tips
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -830,6 +835,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -844,7 +850,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -862,7 +867,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -899,4 +904,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/tips/adding-images.html b/tips/adding-images.html
index 587d9ac71..cbb4aa8a9 100644
--- a/tips/adding-images.html
+++ b/tips/adding-images.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -772,14 +776,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Adding Images
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -861,6 +866,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -897,7 +903,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -915,7 +920,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -952,4 +957,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/tips/js.html b/tips/js.html
index 40ed6d2fc..766086f26 100644
--- a/tips/js.html
+++ b/tips/js.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -893,14 +897,15 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     JavaScript behaviours
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -966,6 +971,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   </a>
 </div>
 </article>
+    
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1002,7 +1008,6 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1020,7 +1025,7 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1057,4 +1062,4 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/tips/js/math.html b/tips/js/math.html
index 0b1b41f28..5c47288b1 100644
--- a/tips/js/math.html
+++ b/tips/js/math.html
@@ -54,7 +54,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -111,6 +111,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -915,14 +919,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Math
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -931,11 +938,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
 
 
 
-    <h2 id='mathjax' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='mathjax' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   MathJax
   
-  <a href='tips/js/math.html#mathjax'>
+  <a href='tips/js/math.html#mathjax' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -959,7 +966,7 @@ <h3 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Demo
   
-  <a href='tips/js/math.html#demo'>
+  <a href='tips/js/math.html#demo' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -973,11 +980,11 @@ <h3 id='demo' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       When <span class='math inline'>\(a \ne 0\)</span>, there are two solutions to <span class='math inline'>\(ax^2 + bx + c = 0\)</span> and they are <span class='math display'>$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</span>
     </p>
   
-    <h2 id='katex' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='katex' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   KaTeX
   
-  <a href='tips/js/math.html#katex'>
+  <a href='tips/js/math.html#katex' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1005,6 +1012,106 @@ <h2 id='katex' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='MathJax'>
+              <a href='tips/js/math.html#mathjax' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                MathJax
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Demo'>
+              <a href='tips/js/math.html#demo' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Demo
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='KaTeX'>
+              <a href='tips/js/math.html#katex' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                KaTeX
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1041,7 +1148,6 @@ <h2 id='katex' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1059,7 +1165,7 @@ <h2 id='katex' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1096,4 +1202,4 @@ <h2 id='katex' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/tips/js/mermaid.html b/tips/js/mermaid.html
index e877e1f8c..a8411ed3a 100644
--- a/tips/js/mermaid.html
+++ b/tips/js/mermaid.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -904,14 +908,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Mermaid Diagrams
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -934,11 +941,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
       The above alias will add Mermaid <code class='py-0.5 px-0.5 bg-gray-100'>&lt;style&gt;</code> and <code class='py-0.5 px-0.5 bg-gray-100'>&lt;script&gt;</code> tags based on Emanote’s defaults.
     </p>
   
-    <h2 id='example-using-mermaid' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='example-using-mermaid' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Example using Mermaid
   
-  <a href='tips/js/mermaid.html#example-using-mermaid'>
+  <a href='tips/js/mermaid.html#example-using-mermaid' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -952,7 +959,7 @@ <h3 id='graph-diagram' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Graph diagram
   
-  <a href='tips/js/mermaid.html#graph-diagram'>
+  <a href='tips/js/mermaid.html#graph-diagram' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -982,7 +989,7 @@ <h3 id='state-diagram' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   State diagram
   
-  <a href='tips/js/mermaid.html#state-diagram'>
+  <a href='tips/js/mermaid.html#state-diagram' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1020,7 +1027,7 @@ <h3 id='gantt-diagram' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   GANTT diagram
   
-  <a href='tips/js/mermaid.html#gantt-diagram'>
+  <a href='tips/js/mermaid.html#gantt-diagram' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1100,6 +1107,117 @@ <h3 id='gantt-diagram' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Example using Mermaid'>
+              <a href='tips/js/mermaid.html#example-using-mermaid' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Example using Mermaid
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Graph diagram'>
+              <a href='tips/js/mermaid.html#graph-diagram' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Graph diagram
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='State diagram'>
+              <a href='tips/js/mermaid.html#state-diagram' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                State diagram
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='GANTT diagram'>
+              <a href='tips/js/mermaid.html#gantt-diagram' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                GANTT diagram
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1136,7 +1254,6 @@ <h3 id='gantt-diagram' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1154,7 +1271,7 @@ <h3 id='gantt-diagram' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1196,4 +1313,4 @@ <h3 id='gantt-diagram' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/tips/js/syntax-highlighting.html b/tips/js/syntax-highlighting.html
index 120fb9e84..6e594d665 100644
--- a/tips/js/syntax-highlighting.html
+++ b/tips/js/syntax-highlighting.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -904,14 +908,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Syntax Highlighting
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -957,11 +964,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
   
   </div>
 </div>
-    <h2 id='example-highlightjs' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='example-highlightjs' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Example (highlight.js)
   
-  <a href='tips/js/syntax-highlighting.html#example-highlightjs'>
+  <a href='tips/js/syntax-highlighting.html#example-highlightjs' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -975,7 +982,7 @@ <h3 id='python' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Python
   
-  <a href='tips/js/syntax-highlighting.html#python'>
+  <a href='tips/js/syntax-highlighting.html#python' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -995,7 +1002,7 @@ <h3 id='haskell' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
       
   Haskell
   
-  <a href='tips/js/syntax-highlighting.html#haskell'>
+  <a href='tips/js/syntax-highlighting.html#haskell' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1007,11 +1014,11 @@ <h3 id='haskell' class='group mt-6 mb-4 font-bold text-gray-700 text-3xl'>
   <div class='py-0.5 mb-3 text-sm'><pre><code class='haskell language-haskell'>fib 0 = 0
 fib 1 = 1
 fib n = fib (n-1) + fib (n-2)</code></pre></div>
-    <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Prism
   
-  <a href='tips/js/syntax-highlighting.html#prism'>
+  <a href='tips/js/syntax-highlighting.html#prism' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1053,6 +1060,117 @@ <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Example (highlight.js)'>
+              <a href='tips/js/syntax-highlighting.html#example-highlightjs' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Example (highlight.js)
+              </a>
+              
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Python'>
+              <a href='tips/js/syntax-highlighting.html#python' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Python
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Haskell'>
+              <a href='tips/js/syntax-highlighting.html#haskell' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Haskell
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Prism'>
+              <a href='tips/js/syntax-highlighting.html#prism' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Prism
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1104,7 +1222,6 @@ <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1122,7 +1239,7 @@ <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1159,4 +1276,4 @@ <h2 id='prism' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-
   
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/tips/sync.html b/tips/sync.html
index fdb240968..fc633cc43 100644
--- a/tips/sync.html
+++ b/tips/sync.html
@@ -43,7 +43,7 @@
 
   
   
-  <link href='tailwind.css?instanceId=16e7d691-8f1c-468d-bf54-41c2b51a4be9' rel='stylesheet' type='text/css' />
+  <link href='tailwind.css?instanceId=94a1b701-053e-42d7-b2e3-170da4840864' rel='stylesheet' type='text/css' />
 
   <style>
     /* Heist error element */
@@ -100,6 +100,10 @@
       margin-left: 0.5em;
     }
 
+    a.--ema-toc:not(.toc-item-active) {
+      background-color: #ffffff !important;
+    }
+
     /* External link icon */
     a[data-linkicon=""]::after {
       content: ""
@@ -1116,14 +1120,17 @@
   </div>
 </nav>
           <!-- Main body column -->
-          <div class='flex-1 w-full overflow-x-auto bg-white'>
+          <div class='flex-1 w-full bg-white'>
   <main class='px-4 py-4'>
     <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extrabold text-black rounded'>
   <a class='z-40 tracking-tighter '>
     Synchronizing notes using Syncthing
   </a>
 </h1>
-    <article class='overflow-auto'>
+    
+      <div class='grid gap-4 md:grid-cols-8'>
+        <div class='md:col-span-6'>
+          <article class='overflow-auto'>
   <!-- What goes in this file will appear on top of note body-->
   
 
@@ -1142,11 +1149,11 @@ <h1 class='flex items-end justify-center mb-4 p-3 bg-blue-100 text-5xl font-extr
    Dropbox alternative that provides end-to-end and full-sync functionality on Windows, Mac, Linux and Android (but not iPhone).
     </p>
   
-    <h2 id='mobile-editing' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='mobile-editing' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Mobile editing
   
-  <a href='tips/sync.html#mobile-editing'>
+  <a href='tips/sync.html#mobile-editing' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1166,11 +1173,11 @@ <h2 id='mobile-editing' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl
    you can use the <a href='https://play.google.com/store/apps/details?id=md.obsidian&amp;hl=en&amp;gl=US' class='text-blue-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>Obsidian</a> app to edit your notes synced by Syncthing. <span class='bg-yellow-200 px-2 py-0.5 rounded-xl'>Changes made on desktop and mobile propagate both ways automatically.</span>
     </p>
   
-    <h2 id='dealing-with-data-loss' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl border-b-2'>
+    <h2 id='dealing-with-data-loss' class='group mt-6 mb-4 font-bold text-gray-700 text-4xl'>
       
   Dealing with data loss
   
-  <a href='tips/sync.html#dealing-with-data-loss'>
+  <a href='tips/sync.html#dealing-with-data-loss' class='--ema-anchor'>
     <span class='hover:text-blue-400 group-hover:visible invisible cursor-pointer text-sm align-middle' aria-label='Copy link'><svg class='inline w-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
         <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
         <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
@@ -1223,6 +1230,95 @@ <h2 id='dealing-with-data-loss' class='group mt-6 mb-4 font-bold text-gray-700 t
   </a>
 </div>
 </article>
+        </div>
+        <div class='md:col-span-2 border-l'>
+          <nav id='toc' class='hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto'>
+  <div class='text-gray-600 text-sm -mt-2'>
+    
+        <ul class='ml-2'>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Mobile editing'>
+              <a href='tips/sync.html#mobile-editing' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Mobile editing
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+            <li class='whitespace-nowrap truncate mt-2' title='Dealing with data loss'>
+              <a href='tips/sync.html#dealing-with-data-loss' class='--ema-toc bg-blue-200 rounded-md p-0.5'>
+                Dealing with data loss
+              </a>
+              
+        <ul class='ml-2'>
+          
+        </ul>
+      
+            </li>
+          
+        </ul>
+      
+  </div>
+  <script>
+    // Highlight the TOC, based from https://stackoverflow.com/a/75346369
+    // TODO: We should get rid of JavaScript! See https://github.com/srid/emanote/issues/520
+    function highlightTOC() {
+      // Grab the toc links
+      const links = document.querySelectorAll("ul > li > a.--ema-toc");
+
+      // Find the matching anchors in the document body
+      const sections = [];
+      links.forEach((link) => {
+        let found = {};
+        for (section of document.querySelectorAll("a.--ema-anchor")) {
+          if (link.href == section.href) {
+            found = section;
+            break;
+          }
+        }
+        sections.push(found);
+      });
+
+      // Current toc link is marked with the following class
+      const mark = "toc-item-active";
+
+      // Set window scroll handler to update the toc mark.
+      window.onscroll = () => {
+        // Remove previous mark
+        links.forEach((link) => {
+          link.classList.remove(mark);
+        });
+
+        // Mark the link of the section that is in view, starting from the end
+        let marked = false;
+        for (var i = sections.length - 1; i >= 0; i--) {
+          if (window.scrollY > sections[i].offsetTop - 80) {
+            links[i].classList.add(mark);
+            marked = true;
+            break;
+          }
+        }
+
+        // Special case for the first and last section which might not reach the top
+        if (!marked && window.scrollY > 0) {
+          let i = 0;
+          if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
+            // We are at the bottom
+            i = links.length - 1
+          }
+          links[i].classList.add(mark);
+        }
+      };
+    }
+    highlightTOC();
+  </script>
+</nav>
+        </div>
+      </div>
+      
     <div class='flex flex-col lg:flex-row lg:space-x-2'>
       
       
@@ -1259,7 +1355,6 @@ <h2 id='dealing-with-data-loss' class='group mt-6 mb-4 font-bold text-gray-700 t
 </div>
         </div>
         
-
       <footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
   
   <div>
@@ -1277,7 +1372,7 @@ <h2 id='dealing-with-data-loss' class='group mt-6 mb-4 font-bold text-gray-700 t
     </a>
   </div>
   <div>
-    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.13.0'>
+    <a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 1.3.14.0'>
       <img class='w-6 h-6 hover:text-blue-700' src='_emanote-static/emanote-logo.svg' />
     </a>
   </div>
@@ -1314,4 +1409,4 @@ <h2 id='dealing-with-data-loss' class='group mt-6 mb-4 font-bold text-gray-700 t
   
 </body>
 
-</html>
\ No newline at end of file
+</html>