在html中使用数学公式latex

简介: 在html中使用数学公式latex

1.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" 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: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

来自 https://katex.org/docs/autorender 可以自动渲染

2.

在index.html 添加

<script>MathJax = {tex: {inlineMath: [['$', '$'],['$$', '$$'], ['\\(', '\\)']]}}</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

在vue中添加

nextTick(() => MathJax.typesetPromise())


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
2月前
|
Unix Linux Shell
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
html+css实战113-结构伪类-公式
html+css实战113-结构伪类-公式
126 0
html+css实战113-结构伪类-公式
|
移动开发 HTML5
Html5游戏开发开始前的一些数学基础
计算一个向量的值 var vectorMagnitude = Math.sqrt(Math.pow(vector.x, 2) + Math.pow(vector.y, 2));   单位向量 var vectorMagnitude = Math.
649 0
|
21天前
|
前端开发
HTML+CSS实现奇特的的企业官网效果
HTML+CSS实现奇特的的企业官网效果
HTML+CSS实现奇特的的企业官网效果
|
21天前
|
前端开发 JavaScript
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
|
2天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
12天前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
8 1
|
15天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
21天前
|
前端开发 JavaScript
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
|
21天前
|
前端开发 JavaScript
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!