wordpress 連接qq視頻教程seo是什么意思電商
什么是KaTeX.js??
KaTeX?是一個集成速度快且功能豐富的數(shù)學(xué)公式渲染庫，專為?Web?設(shè)計。它由?Khan Academy?開發(fā)，提供接近印刷品質(zhì)的數(shù)學(xué)公式展示，同時保持與瀏覽器的高效互動性。KaTeX?特點(diǎn)包括快速渲染速度、高質(zhì)量的輸出、獨(dú)立運(yùn)行、跨平臺兼容以及豐富的功能集。它支持服務(wù)器端渲染，可以預(yù)渲染公式并作為純?HTML?發(fā)送，減輕客戶端負(fù)擔(dān)。
入門示例
作為入門演示示例，下載源碼到本地方式引入?KaTex。
<!--?引入樣式和庫文件?-->
<link?rel="stylesheet"?href="../libs/katex.css"?/>
<script?src="../libs/katex.js"></script>創(chuàng)建容器 DOM 元素，綁定?equation?ID 選擇器
<div?id="equation">$`x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}`$</div>
<script?type="text/javascript"?defer>//?使用KaTeX渲染指定元素中的公式katex.render(`x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}`,?document.getElementById('equation'))
</script>效果
?高級示范
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用KaTeX顯示數(shù)學(xué)公式</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css"><script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js"onload="renderMathInElement(document.body);"></script><script>function change() {var textarea = document.getElementById('xxx');console.log(textarea)//textarea.value = textarea.value.replace(/(\$|\n)E = mc^2(\$|\n)/g, '$\\text{E} = mc^2$');textarea.textContent="解：已知$$a-b=2$$，$$\therefore \dfrac{{(1-a)}^{2}}-\dfrac{{(1+b)}^{2}}{a}=\dfrac{a{(1-a)}^{2}-b{(1+b)}^{2}}{ab}=\dfrac{a-{a}^{3}-b+^{3}}{ab}$$ 即$$10ab=2-4ab$$，解得$$ab=\dfrac{1}{7}$$，$$\therefore {a}^{3}-^{3}=2-4ab=2-4\times \dfrac{1}{7}=\dfrac{10}{7}.$$";//textarea.setAttribute('text', "$$E = mc^2$$");renderMathInElement(textarea);}</script>
</head>
<body><h1>使用KaTeX顯示數(shù)學(xué)公式</h1><p>下面是一些數(shù)學(xué)公式的示例：</p><p>by https://zhengkai.blog.csdn.net/</p><p>下面是一些數(shù)學(xué)公式的示例：</p><p>行內(nèi)公式示例：這是一個行內(nèi)公式 $$E = mc^2$$。</p><p>塊級公式示例：</p><p>$$\int_a^b f(x) \, dx = F(b) - F(a)$$</p><a id="xxx"></a><textarea cols="80" id="2"></textarea><a onclick="change()">change</a>
</body>
</html>
附加：document.getElementById如何改變a標(biāo)簽的文本
在JavaScript中，如果你想通過document.getElementById來改變一個<a>標(biāo)簽的文本，你可以這樣做：
- 首先，確保你的
<a>標(biāo)簽有一個id屬性，這樣你才能通過document.getElementById來選中它。
<a id="myLink" href="https://example.com">原始文本</a>-
然后，使用
document.getElementById來獲取這個<a>標(biāo)簽的引用。 -
接著，你可以通過修改
innerText或textContent屬性來改變它的文本內(nèi)容。
// 獲取<a>標(biāo)簽
var link = document.getElementById('myLink');// 修改文本
link.innerText = '新的文本';
// 或者
link.textContent = '新的文本';innerText和textContent都可以用來改變元素的文本內(nèi)容，但它們之間有一些細(xì)微的差別：
innerText會考慮CSS的visibility和display屬性，如果元素是不可見的或不顯示的，那么innerText不會返回文本內(nèi)容。textContent會返回元素及其子元素的全部文本內(nèi)容，不考慮CSS樣式的影響。
通常情況下，使用textContent就足夠了，因為它更簡單且不受CSS樣式的影響。
自動渲染
使用?JavaScript?手動渲染還是稍微麻煩了一點(diǎn)，官方提供?auto-render?自動渲染擴(kuò)展，通過簡單的引入可以實現(xiàn)自動渲染。
//?引入?auto-render.js?
<script?src="../libs/auto-render.js"></script>
<script?type="text/javascript"?defer>document.addEventListener('DOMContentLoaded',?function?()?{renderMathInElement(document.body,?{//?自定義選項//???auto-render?指定解析格式delimiters:?[{?left:?'$$',?right:?'$$',?display:?true?},{?left:?'$',?right:?'$',?display:?false?},{?left:?'\\(',?right:?'\\)',?display:?false?},{?left:?'\\[',?right:?'\\]',?display:?true?},],//???不拋出異樣，而是渲染公式源碼throwOnError:?false,})})
</script>auto-render?擴(kuò)展可以在頁面加載時自動查找并渲染所有使用?$...$?和?$$...$$?包裹的公式。意味著你不需要手動調(diào)用任何函數(shù)來渲染這些公式。
KaTeX?允許調(diào)整樣式，例如修改?.katex?類的?font-size?屬性來改變公式的顯示大小。此外，KaTeX?提供了多個擴(kuò)展，如?copy-tex?擴(kuò)展允許復(fù)制?LaTeX?代碼，而?mhchem?擴(kuò)展簡化了化學(xué)方程式的編寫。
官方鏈接
[1]?Github Star: 18.1k:?https://github.com/KaTeX/KaTeX[2]?官網(wǎng):?https://katex.org/[3]?地址:?https://katex.org/docs/libs
?