石家庄网站app制作,wordpress多用户 2015,布吉商城网站建设哪家便宜,做拼图字的网站什么是KaTeX.js ?
KaTeX 是一个集成速度快且功能丰富的数学公式渲染库#xff0c;专为 Web 设计。它由 Khan Academy 开发#xff0c;提供接近印刷品质的数学公式展示#xff0c;同时保持与浏览器的高效互动性。KaTeX 特点包括快速渲染速度、高质量的输出、独立运行、跨平…什么是KaTeX.js ?
KaTeX 是一个集成速度快且功能丰富的数学公式渲染库专为 Web 设计。它由 Khan Academy 开发提供接近印刷品质的数学公式展示同时保持与浏览器的高效互动性。KaTeX 特点包括快速渲染速度、高质量的输出、独立运行、跨平台兼容以及丰富的功能集。它支持服务器端渲染可以预渲染公式并作为纯 HTML 发送减轻客户端负担。 入门示例
作为入门演示示例下载源码到本地方式引入 KaTex。
!-- 引入样式和库文件 --
link relstylesheet href../libs/katex.css /
script src../libs/katex.js/script
创建容器 DOM 元素绑定 equation ID 选择器
div idequation$x\frac{-b\pm\sqrt{b^2-4ac}}{2a}$/div
script typetext/javascript defer// 使用KaTeX渲染指定元素中的公式katex.render(x\frac{-b\pm\sqrt{b^2-4ac}}{2a}, document.getElementById(equation))
/script
效果 高级示范 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title使用KaTeX显示数学公式/titlelink relstylesheet hrefhttps://cdn.jsdelivr.net/npm/katex0.15.1/dist/katex.min.cssscript defer srchttps://cdn.jsdelivr.net/npm/katex0.15.1/dist/katex.min.js/scriptscript defer srchttps://cdn.jsdelivr.net/npm/katex0.15.1/dist/contrib/auto-render.min.jsonloadrenderMathInElement(document.body);/scriptscriptfunction 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-b2$$$$\therefore \dfrac{{(1-a)}^{2}}{b}-\dfrac{{(1b)}^{2}}{a}\dfrac{a{(1-a)}^{2}-b{(1b)}^{2}}{ab}\dfrac{a-{a}^{3}-b{b}^{3}}{ab}$$ 即$$10ab2-4ab$$解得$$ab\dfrac{1}{7}$$$$\therefore {a}^{3}-{b}^{3}2-4ab2-4\times \dfrac{1}{7}\dfrac{10}{7}.$$;//textarea.setAttribute(text, $$E mc^2$$);renderMathInElement(textarea);}/script
/head
bodyh1使用KaTeX显示数学公式/h1p下面是一些数学公式的示例/ppby https://zhengkai.blog.csdn.net//pp下面是一些数学公式的示例/pp行内公式示例这是一个行内公式 $$E mc^2$$。/pp块级公式示例/pp$$\int_a^b f(x) \, dx F(b) - F(a)$$/pa idxxx/atextarea cols80 id2/textareaa onclickchange()change/a
/body
/html附加document.getElementById如何改变a标签的文本
在JavaScript中如果你想通过document.getElementById来改变一个a标签的文本你可以这样做
首先确保你的a标签有一个id属性这样你才能通过document.getElementById来选中它。
a idmyLink hrefhttps://example.com原始文本/a 然后使用document.getElementById来获取这个a标签的引用。 接着你可以通过修改innerText或textContent属性来改变它的文本内容。
// 获取a标签
var link document.getElementById(myLink);// 修改文本
link.innerText 新的文本;
// 或者
link.textContent 新的文本;
innerText和textContent都可以用来改变元素的文本内容但它们之间有一些细微的差别
innerText会考虑CSS的visibility和display属性如果元素是不可见的或不显示的那么innerText不会返回文本内容。textContent会返回元素及其子元素的全部文本内容不考虑CSS样式的影响。
通常情况下使用textContent就足够了因为它更简单且不受CSS样式的影响。 自动渲染
使用 JavaScript 手动渲染还是稍微麻烦了一点官方提供 auto-render 自动渲染扩展通过简单的引入可以实现自动渲染。
// 引入 auto-render.js
script src../libs/auto-render.js/script
script typetext/javascript deferdocument.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 扩展可以在页面加载时自动查找并渲染所有使用 $...$ 和 $$...$$ 包裹的公式。意味着你不需要手动调用任何函数来渲染这些公式。
KaTeX 允许调整样式例如修改 .katex 类的 font-size 属性来改变公式的显示大小。此外KaTeX 提供了多个扩展如 copy-tex 扩展允许复制 LaTeX 代码而 mhchem 扩展简化了化学方程式的编写。 官方链接
[1] Github Star: 18.1k: https://github.com/KaTeX/KaTeX[2] 官网: https://katex.org/[3] 地址: https://katex.org/docs/libs
