@@ -20,5 +20,6 @@ ## Features
 - [x] server rendering .md files
 - [x] live reload when .md file changes
 - [x] directory files list on `/` endpoint
+- [x] LaTex support
 - [ ] graphviz
 - [ ] colour `<code>` with syntax highlighting

@@ -12,8 +12,11 @@ body {
     font-family: Arial, Helvetica, sans-serif;
 }
 .dark {
-    background:#000000;
+    background:#1d2021;
     color:#cccccc;
+}
+.dark a, a:hover, a:visited {
+	color: #458588;
 }
 </style>
 <body class="dark">
@@ -56,9 +59,12 @@ body {
     font-family: Arial, Helvetica, sans-serif;
 }
 .dark {
-    background:#000000;
+    background:#1d2021;
     color:#cccccc;
 }
+a, a:hover, a:visited {
+	color: #458588;
+}
 pre, code{
     padding-left: 3px;
     padding-right: 3px;
@@ -121,22 +127,23 @@ }
 
 @media (min-width: 992px) {
   .container {
-    max-width: 900px;
+    max-width: 800px;
   }
 }
 
 @media (min-width: 1200px) {
   .container {
-    max-width: 900px;
+    max-width: 800px;
   }
 }
 
 @media (min-width: 1400px) {
   .container {
-    max-width: 900px;
+    max-width: 800px;
   }
 }
 </style>
+
 <body class="dark">
 <input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
 <a href="/" title="go to root">root</a>
@@ -144,6 +151,33 @@ <div id="content" class="container">
 {{.Content}}
 </div>
 
+
+<!-- LaTex renderization -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css" integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
+
+<!-- The loading of KaTeX is deferred to speed up page rendering -->
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js" integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
+
+<!-- To automatically render math in text elements, include the auto-render extension: -->
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        renderMathInElement(document.body, {
+          // customised options
+          // • auto-render specific keys, e.g.:
+          delimiters: [
+              {left: '$$', right: '$$', display: true},
+              {left: '$', right: '$', display: true},
+              {left: '\\(', right: '\\)', display: false},
+              {left: '\\[', right: '\\]', display: true}
+          ],
+          // • rendering keys, e.g.:
+          throwOnError : false
+        });
+    });
+</script>
+
 <script>
 (function() {
 	var conn = new WebSocket("ws://127.0.0.1:8080/ws/{{.Title}}");
@@ -156,6 +190,20 @@ console.log('file updated');
 	    // location.reload();
 	    // console.log("evt", evt);
 	    document.getElementById("content").innerHTML = evt.data;
+
+		renderMathInElement(document.body, {
+		  // customised options
+		  // • auto-render specific keys, e.g.:
+		  delimiters: [
+		      {left: '$$', right: '$$', display: true},
+		      {left: '$', right: '$', display: true},
+		      {left: '\\(', right: '\\)', display: false},
+		      {left: '\\[', right: '\\]', display: true}
+		  ],
+		  // • rendering keys, e.g.:
+		  throwOnError : false
+		});
+
 	}
 })();
 

@@ -30,4 +30,10 @@ | col 3 is      | right-aligned | $1600 |
 | col 2 is      | centered      |   $12 |
 | zebra stripes | are neat      |    $1 |
 
+## LaTeX example
+Through [KaTeX](https://katex.org):
+
+$y^2 = x^3 + 7$
+
+$\left(\frac{1}{\sqrt{x}}\right)$