add katex math support

Author: Starslayerx

content/posts/2021-03-21_d2l-v05.md

@@ -3,6 +3,9 @@ date = '2021-03-21T05:20:08+08:00'
 draft = false
 title = 'Dive into DeepLearning - 02 - Preliminaries'
 tags = ['DeepLearning']
+
+[katex]
+enable = true
 +++
 
 - Course Note: d2l-video-05 - 线性代数
@@ -147,13 +150,20 @@ tags = ['DeepLearning']
     ```
 
     - 矩阵范数: 最小的满足下面公式的值
+
     $$
     c = A \cdot b \quad \text{hence} \quad \|c\| \leq \|A\| \cdot \|b\|
     $$
+
     **矩阵**的Frobenius范数(Frobenius norm)是矩阵元素平方和的平方根
+
     $$
-    \|A\|_{Frob} = \left( \sum_{i,j} A_{ij}^2 \right)^{\tfrac{1}{2}}
+    \|A\|\_{Frob} = \left(\sum_{i,j} A_{ij}^2 \right)^{\frac{1}{2}}
     $$
+
+
+
+
     ```Python
     torch.norm(torch.ones((4, 9)))
     ```

hugo.yaml

@@ -249,14 +249,14 @@ params:
 
 
   katex:
-    enabled: false
+    enabled: true
     delimiters:
       - left: "$$"
         right: "$$"
         display: true
       - left: "$"
         right: "$"
-        display: false
+        display: true
       - left: "\\("
         right: "\\)"
         display: false

public/archives/index.html

@@ -135,7 +135,7 @@
 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5A7 7 0 113 10a7 7 0 0114 0z"/></svg>
 <span class="hidden md:inline">Search</span></button><div class="bg-border xs:mx-1 mx-2 h-6 w-px sm:mx-2"></div><button id=dock-top class="text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 xs:px-2 xs:py-1.5 flex flex-shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none sm:px-3 sm:py-2" title="Back to Top" aria-label="Back to Top">
 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></svg>
-<span class="hidden sm:inline">Top</span></button></nav></div><div id=search-overlay class="pointer-events-none fixed inset-0 z-40 bg-black/50 opacity-0 transition-opacity duration-300"></div><div id=search-modal class="bg-card border-border pointer-events-none fixed top-1/2 left-1/2 z-50 max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 scale-95 transform overflow-hidden rounded-xl border opacity-0 shadow-xl transition-all duration-300"><div class="border-border flex items-center gap-3 border-b p-4"><div class="text-muted-foreground h-5 w-5 flex-shrink-0"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5A7 7 0 113 10a7 7 0 0114 0z"/></svg></div><div class="relative flex-1"><button id=search-clear class="text-muted-foreground hover:text-foreground hover:bg-muted/50 pointer-events-none absolute top-1/2 left-0 z-10 h-5 w-5 -translate-y-1/2 rounded opacity-0 transition-all duration-200" title=Clear aria-label=Clear>
+<span class="hidden sm:inline">Top</span></button></nav></div><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css integrity=sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP crossorigin=anonymous><script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js integrity=sha384-cMkvdD8LoxVzGF/RPUKAcvmm49FQ0oxwDF3BGKtDXcEc+T1b2N+teh/OJfpU0jr6 crossorigin=anonymous></script><script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js integrity=sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh crossorigin=anonymous></script><script>function initKaTeX(){if(typeof renderMathInElement=="undefined"){setTimeout(initKaTeX,100);return}var e=[{display:!0,left:"$$",right:"$$"},{display:!0,left:"$",right:"$"},{display:!1,left:"\\(",right:"\\)"},{display:!0,left:"\\[",right:"\\]"}];renderMathInElement(document.body,{delimiters:e,throwOnError:!1,errorColor:"#cc0000",fleqn:!1,leqno:!1,trust:!1})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",initKaTeX):initKaTeX()</script><div id=search-overlay class="pointer-events-none fixed inset-0 z-40 bg-black/50 opacity-0 transition-opacity duration-300"></div><div id=search-modal class="bg-card border-border pointer-events-none fixed top-1/2 left-1/2 z-50 max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 scale-95 transform overflow-hidden rounded-xl border opacity-0 shadow-xl transition-all duration-300"><div class="border-border flex items-center gap-3 border-b p-4"><div class="text-muted-foreground h-5 w-5 flex-shrink-0"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5A7 7 0 113 10a7 7 0 0114 0z"/></svg></div><div class="relative flex-1"><button id=search-clear class="text-muted-foreground hover:text-foreground hover:bg-muted/50 pointer-events-none absolute top-1/2 left-0 z-10 h-5 w-5 -translate-y-1/2 rounded opacity-0 transition-all duration-200" title=Clear aria-label=Clear>
 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12"/></svg>
 </button>
 <input id=search-input type=text placeholder="Search posts..." class="text-foreground placeholder:text-muted-foreground w-full border-none bg-transparent pl-8 text-lg outline-none" autocomplete=off spellcheck=false></div><button id=search-close class="text-muted-foreground hover:text-foreground hover:bg-muted/50 flex h-6 w-6 items-center justify-center rounded-md p-0.5 transition-all duration-200" title=Close aria-label=Close>

public/categories/index.html

@@ -64,7 +64,7 @@
 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5A7 7 0 113 10a7 7 0 0114 0z"/></svg>
 <span class="hidden md:inline">Search</span></button><div class="bg-border xs:mx-1 mx-2 h-6 w-px sm:mx-2"></div><button id=dock-top class="text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 xs:px-2 xs:py-1.5 flex flex-shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none sm:px-3 sm:py-2" title="Back to Top" aria-label="Back to Top">
 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></svg>
-<span class="hidden sm:inline">Top</span></button></nav></div><div id=search-overlay class="pointer-events-none fixed inset-0 z-40 bg-black/50 opacity-0 transition-opacity duration-300"></div><div id=search-modal class="bg-card border-border pointer-events-none fixed top-1/2 left-1/2 z-50 max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 scale-95 transform overflow-hidden rounded-xl border opacity-0 shadow-xl transition-all duration-300"><div class="border-border flex items-center gap-3 border-b p-4"><div class="text-muted-foreground h-5 w-5 flex-shrink-0"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5A7 7 0 113 10a7 7 0 0114 0z"/></svg></div><div class="relative flex-1"><button id=search-clear class="text-muted-foreground hover:text-foreground hover:bg-muted/50 pointer-events-none absolute top-1/2 left-0 z-10 h-5 w-5 -translate-y-1/2 rounded opacity-0 transition-all duration-200" title=Clear aria-label=Clear>
+<span class="hidden sm:inline">Top</span></button></nav></div><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css integrity=sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP crossorigin=anonymous><script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js integrity=sha384-cMkvdD8LoxVzGF/RPUKAcvmm49FQ0oxwDF3BGKtDXcEc+T1b2N+teh/OJfpU0jr6 crossorigin=anonymous></script><script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js integrity=sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh crossorigin=anonymous></script><script>function initKaTeX(){if(typeof renderMathInElement=="undefined"){setTimeout(initKaTeX,100);return}var e=[{display:!0,left:"$$",right:"$$"},{display:!0,left:"$",right:"$"},{display:!1,left:"\\(",right:"\\)"},{display:!0,left:"\\[",right:"\\]"}];renderMathInElement(document.body,{delimiters:e,throwOnError:!1,errorColor:"#cc0000",fleqn:!1,leqno:!1,trust:!1})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",initKaTeX):initKaTeX()</script><div id=search-overlay class="pointer-events-none fixed inset-0 z-40 bg-black/50 opacity-0 transition-opacity duration-300"></div><div id=search-modal class="bg-card border-border pointer-events-none fixed top-1/2 left-1/2 z-50 max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 scale-95 transform overflow-hidden rounded-xl border opacity-0 shadow-xl transition-all duration-300"><div class="border-border flex items-center gap-3 border-b p-4"><div class="text-muted-foreground h-5 w-5 flex-shrink-0"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5A7 7 0 113 10a7 7 0 0114 0z"/></svg></div><div class="relative flex-1"><button id=search-clear class="text-muted-foreground hover:text-foreground hover:bg-muted/50 pointer-events-none absolute top-1/2 left-0 z-10 h-5 w-5 -translate-y-1/2 rounded opacity-0 transition-all duration-200" title=Clear aria-label=Clear>
 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12"/></svg>
 </button>
 <input id=search-input type=text placeholder="Search posts..." class="text-foreground placeholder:text-muted-foreground w-full border-none bg-transparent pl-8 text-lg outline-none" autocomplete=off spellcheck=false></div><button id=search-close class="text-muted-foreground hover:text-foreground hover:bg-muted/50 flex h-6 w-6 items-center justify-center rounded-md p-0.5 transition-all duration-200" title=Close aria-label=Close>

public/index.html

@@ -77,7 +77,7 @@
 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5A7 7 0 113 10a7 7 0 0114 0z"/></svg>
 <span class="hidden md:inline">Search</span></button><div class="bg-border xs:mx-1 mx-2 h-6 w-px sm:mx-2"></div><button id=dock-top class="text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 xs:px-2 xs:py-1.5 flex flex-shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none sm:px-3 sm:py-2" title="Back to Top" aria-label="Back to Top">
 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></svg>
-<span class="hidden sm:inline">Top</span></button></nav></div><div id=search-overlay class="pointer-events-none fixed inset-0 z-40 bg-black/50 opacity-0 transition-opacity duration-300"></div><div id=search-modal class="bg-card border-border pointer-events-none fixed top-1/2 left-1/2 z-50 max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 scale-95 transform overflow-hidden rounded-xl border opacity-0 shadow-xl transition-all duration-300"><div class="border-border flex items-center gap-3 border-b p-4"><div class="text-muted-foreground h-5 w-5 flex-shrink-0"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5A7 7 0 113 10a7 7 0 0114 0z"/></svg></div><div class="relative flex-1"><button id=search-clear class="text-muted-foreground hover:text-foreground hover:bg-muted/50 pointer-events-none absolute top-1/2 left-0 z-10 h-5 w-5 -translate-y-1/2 rounded opacity-0 transition-all duration-200" title=Clear aria-label=Clear>
+<span class="hidden sm:inline">Top</span></button></nav></div><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css integrity=sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP crossorigin=anonymous><script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js integrity=sha384-cMkvdD8LoxVzGF/RPUKAcvmm49FQ0oxwDF3BGKtDXcEc+T1b2N+teh/OJfpU0jr6 crossorigin=anonymous></script><script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js integrity=sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh crossorigin=anonymous></script><script>function initKaTeX(){if(typeof renderMathInElement=="undefined"){setTimeout(initKaTeX,100);return}var e=[{display:!0,left:"$$",right:"$$"},{display:!0,left:"$",right:"$"},{display:!1,left:"\\(",right:"\\)"},{display:!0,left:"\\[",right:"\\]"}];renderMathInElement(document.body,{delimiters:e,throwOnError:!1,errorColor:"#cc0000",fleqn:!1,leqno:!1,trust:!1})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",initKaTeX):initKaTeX()</script><div id=search-overlay class="pointer-events-none fixed inset-0 z-40 bg-black/50 opacity-0 transition-opacity duration-300"></div><div id=search-modal class="bg-card border-border pointer-events-none fixed top-1/2 left-1/2 z-50 max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 scale-95 transform overflow-hidden rounded-xl border opacity-0 shadow-xl transition-all duration-300"><div class="border-border flex items-center gap-3 border-b p-4"><div class="text-muted-foreground h-5 w-5 flex-shrink-0"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5A7 7 0 113 10a7 7 0 0114 0z"/></svg></div><div class="relative flex-1"><button id=search-clear class="text-muted-foreground hover:text-foreground hover:bg-muted/50 pointer-events-none absolute top-1/2 left-0 z-10 h-5 w-5 -translate-y-1/2 rounded opacity-0 transition-all duration-200" title=Clear aria-label=Clear>
 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12"/></svg>
 </button>
 <input id=search-input type=text placeholder="Search posts..." class="text-foreground placeholder:text-muted-foreground w-full border-none bg-transparent pl-8 text-lg outline-none" autocomplete=off spellcheck=false></div><button id=search-close class="text-muted-foreground hover:text-foreground hover:bg-muted/50 flex h-6 w-6 items-center justify-center rounded-md p-0.5 transition-all duration-200" title=Close aria-label=Close>