/tags/math/ Recent content in Math on Avadhoot Dandekar Hugo en-US Tue, 16 Jan 2024 23:30:00 +0800 /posts/katex-and-mermaid-test/ Tue, 16 Jan 2024 23:30:00 +0800 /posts/katex-and-mermaid-test/ <h1 id="katex-and-mermaid-test">KaTeX and Mermaid Test</h1> <p>This article is used to test the KaTeX and Mermaid features.</p> <h2 id="configuration">Configuration</h2> <h3 id="frontmatter-configuration">Frontmatter Configuration</h3> <div class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"> <div class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"> <div class="flex items-center gap-2"> <div class="text-muted-foreground flex-shrink-0"> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> </svg> </div> <span class="text-muted-foreground text-sm font-medium"> YAML </span> </div> <div class="flex items-center gap-2"> <button class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" data-default-state="expanded" data-collapsed="false" data-auto-collapse-lines="30" data-auto-collapse-height="400" data-collapsed-height="120" title="Collapse" aria-label="Collapse"> <span class="collapse-icon"> <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg> </span> <span class="collapse-text hidden sm:inline" >Collapse</span > </button> <button class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" title="Copy" aria-label="Copy"> <span class="copy-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> </span> <span class="copy-text hidden sm:inline" >Copy</span > </button> </div> </div> <div class="code-block-content relative" id="code-0"> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">katex</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">mermaid</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div> <div class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"> <div class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"> Click to expand and view more </div> </div> </div> </div> <script> (function() { const codeId = 'code-0'; const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]'); const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]'); const codeContainer = document.getElementById(codeId); if (!codeContainer) return; if (copyBtn) { const copyIcon = copyBtn.querySelector('.copy-icon'); const copyText = copyBtn.querySelector('.copy-text'); copyBtn.addEventListener('click', async function() { try { let codeText = ''; const codeTableCell = codeContainer.querySelector('.lntd:last-child code'); if (codeTableCell) { codeText = codeTableCell.textContent || codeTableCell.innerText; } else { const codeElement = codeContainer.querySelector('code'); if (codeElement) { const hasInlineLineNumbers = codeElement.querySelector('.ln'); if (hasInlineLineNumbers) { const codeLines = codeElement.querySelectorAll('.cl'); if (codeLines.length > 0) { codeText = Array.from(codeLines) .map(line => { const text = line.textContent || line.innerText; return text.replace(/\n+$/, ''); }) .join('\n') .replace(/\n+$/, ''); } else { const allText = codeElement.textContent || codeElement.innerText; codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, ''); } } else { codeText = codeElement.textContent || codeElement.innerText; } } else { codeText = codeContainer.textContent || codeContainer.innerText; } } codeText = codeText.trim(); await navigator.clipboard.writeText(codeText); copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'Copied'; } copyBtn.classList.add('text-green-600'); setTimeout(() => { copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'Copy'; } copyBtn.classList.remove('text-green-600'); }, 2000); } catch (err) { console.error('复制失败:', err); const range = document.createRange(); const codeElement = codeContainer.querySelector('code') || codeContainer; range.selectNodeContents(codeElement); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); if (copyText) { copyText.textContent = 'Selected'; } setTimeout(() => { if (copyText) { copyText.textContent = 'Copy'; } selection.removeAllRanges(); }, 2000); } }); } if (collapseBtn) { const collapseIcon = collapseBtn.querySelector('.collapse-icon'); const collapseText = collapseBtn.querySelector('.collapse-text'); const collapseOverlay = codeContainer.querySelector('.collapse-overlay'); let codeElement = codeContainer.querySelector('pre.chroma'); if (!codeElement) { codeElement = codeContainer.querySelector('pre'); } const defaultState = collapseBtn.dataset.defaultState || 'expanded'; const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true'; const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30; const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400; const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120; let isCollapsed = false; function initCollapse() { const shouldCollapse = isCollapsedAttr || defaultState === 'collapsed' || shouldAutoCollapse(); if (shouldCollapse) { setCollapsed(true, false); } } function shouldAutoCollapse() { if (codeElement) { const lines = codeElement.querySelectorAll('.line, .cl'); const height = codeElement.offsetHeight; return lines.length > autoCollapseLines || height > autoCollapseHeight; } const containerHeight = codeContainer.offsetHeight; if (containerHeight > autoCollapseHeight) { return true; } const textContent = codeContainer.textContent || codeContainer.innerText || ''; const estimatedLines = textContent.split('\n').length; return estimatedLines > autoCollapseLines; } function setCollapsed(collapsed, animate = true) { if (!collapseOverlay) return; isCollapsed = collapsed; if (collapsed) { codeContainer.style.maxHeight = collapsedHeight + 'px'; codeContainer.style.overflow = 'hidden'; collapseOverlay.style.opacity = '1'; collapseOverlay.style.pointerEvents = 'auto'; collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = 'Expand'; } collapseBtn.title = 'Expand'; } else { codeContainer.style.maxHeight = ''; codeContainer.style.overflow = ''; collapseOverlay.style.opacity = '0'; collapseOverlay.style.pointerEvents = 'none'; collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = 'Collapse'; } collapseBtn.title = 'Collapse'; } if (animate) { codeContainer.style.transition = 'max-height 0.3s ease-out'; setTimeout(() => { codeContainer.style.transition = ''; }, 300); } } function toggleCollapse() { setCollapsed(!isCollapsed, true); } collapseBtn.addEventListener('click', toggleCollapse); if (collapseOverlay) { collapseOverlay.addEventListener('click', () => { if (isCollapsed) { setCollapsed(false, true); } }); } initCollapse(); } })(); </script> <h3 id="global-configuration">Global Configuration</h3> <div class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"> <div class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"> <div class="flex items-center gap-2"> <div class="text-muted-foreground flex-shrink-0"> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> </svg> </div> <span class="text-muted-foreground text-sm font-medium"> YAML </span> </div> <div class="flex items-center gap-2"> <button class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-1" data-default-state="expanded" data-collapsed="false" data-auto-collapse-lines="30" data-auto-collapse-height="400" data-collapsed-height="120" title="Collapse" aria-label="Collapse"> <span class="collapse-icon"> <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg> </span> <span class="collapse-text hidden sm:inline" >Collapse</span > </button> <button class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-1" title="Copy" aria-label="Copy"> <span class="copy-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> </span> <span class="copy-text hidden sm:inline" >Copy</span > </button> </div> </div> <div class="code-block-content relative" id="code-1"> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="c"># hugo.yaml</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">katex</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">enabled</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">delimiters</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">left</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;$$&#34;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">right</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;$$&#34;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">display</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">left</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;$&#34;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">right</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;$&#34;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">display</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">mermaid</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">enabled</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span></span></span></code></pre></div> <div class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"> <div class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"> Click to expand and view more </div> </div> </div> </div> <script> (function() { const codeId = 'code-1'; const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]'); const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]'); const codeContainer = document.getElementById(codeId); if (!codeContainer) return; if (copyBtn) { const copyIcon = copyBtn.querySelector('.copy-icon'); const copyText = copyBtn.querySelector('.copy-text'); copyBtn.addEventListener('click', async function() { try { let codeText = ''; const codeTableCell = codeContainer.querySelector('.lntd:last-child code'); if (codeTableCell) { codeText = codeTableCell.textContent || codeTableCell.innerText; } else { const codeElement = codeContainer.querySelector('code'); if (codeElement) { const hasInlineLineNumbers = codeElement.querySelector('.ln'); if (hasInlineLineNumbers) { const codeLines = codeElement.querySelectorAll('.cl'); if (codeLines.length > 0) { codeText = Array.from(codeLines) .map(line => { const text = line.textContent || line.innerText; return text.replace(/\n+$/, ''); }) .join('\n') .replace(/\n+$/, ''); } else { const allText = codeElement.textContent || codeElement.innerText; codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, ''); } } else { codeText = codeElement.textContent || codeElement.innerText; } } else { codeText = codeContainer.textContent || codeContainer.innerText; } } codeText = codeText.trim(); await navigator.clipboard.writeText(codeText); copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'Copied'; } copyBtn.classList.add('text-green-600'); setTimeout(() => { copyIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'Copy'; } copyBtn.classList.remove('text-green-600'); }, 2000); } catch (err) { console.error('复制失败:', err); const range = document.createRange(); const codeElement = codeContainer.querySelector('code') || codeContainer; range.selectNodeContents(codeElement); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); if (copyText) { copyText.textContent = 'Selected'; } setTimeout(() => { if (copyText) { copyText.textContent = 'Copy'; } selection.removeAllRanges(); }, 2000); } }); } if (collapseBtn) { const collapseIcon = collapseBtn.querySelector('.collapse-icon'); const collapseText = collapseBtn.querySelector('.collapse-text'); const collapseOverlay = codeContainer.querySelector('.collapse-overlay'); let codeElement = codeContainer.querySelector('pre.chroma'); if (!codeElement) { codeElement = codeContainer.querySelector('pre'); } const defaultState = collapseBtn.dataset.defaultState || 'expanded'; const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true'; const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30; const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400; const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120; let isCollapsed = false; function initCollapse() { const shouldCollapse = isCollapsedAttr || defaultState === 'collapsed' || shouldAutoCollapse(); if (shouldCollapse) { setCollapsed(true, false); } } function shouldAutoCollapse() { if (codeElement) { const lines = codeElement.querySelectorAll('.line, .cl'); const height = codeElement.offsetHeight; return lines.length > autoCollapseLines || height > autoCollapseHeight; } const containerHeight = codeContainer.offsetHeight; if (containerHeight > autoCollapseHeight) { return true; } const textContent = codeContainer.textContent || codeContainer.innerText || ''; const estimatedLines = textContent.split('\n').length; return estimatedLines > autoCollapseLines; } function setCollapsed(collapsed, animate = true) { if (!collapseOverlay) return; isCollapsed = collapsed; if (collapsed) { codeContainer.style.maxHeight = collapsedHeight + 'px'; codeContainer.style.overflow = 'hidden'; collapseOverlay.style.opacity = '1'; collapseOverlay.style.pointerEvents = 'auto'; collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022\u003e\n \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = 'Expand'; } collapseBtn.title = 'Expand'; } else { codeContainer.style.maxHeight = ''; codeContainer.style.overflow = ''; collapseOverlay.style.opacity = '0'; collapseOverlay.style.pointerEvents = 'none'; collapseIcon.innerHTML = `\u003csvg class=\u0022h-3 w-3\u0022 xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = 'Collapse'; } collapseBtn.title = 'Collapse'; } if (animate) { codeContainer.style.transition = 'max-height 0.3s ease-out'; setTimeout(() => { codeContainer.style.transition = ''; }, 300); } } function toggleCollapse() { setCollapsed(!isCollapsed, true); } collapseBtn.addEventListener('click', toggleCollapse); if (collapseOverlay) { collapseOverlay.addEventListener('click', () => { if (isCollapsed) { setCollapsed(false, true); } }); } initCollapse(); } })(); </script> <h2 id="katex-test">KaTeX Test</h2> <h3 id="inline-formula">Inline Formula</h3> <p>This is an inline formula: $E = mc^2$, Einstein&rsquo;s mass-energy equivalence formula.</p>