前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用MathJax在网页中显示MathML和LaTeX公式

使用MathJax在网页中显示MathML和LaTeX公式

作者头像
布禾
修改于 2020-11-19 02:10:28
修改于 2020-11-19 02:10:28
2.5K00
代码可运行
举报
运行总次数:0
代码可运行

MathJax是适用于所有现代浏览器的LaTeX,MathML和AsciiMath表示法的开源JavaScript显示引擎。

显示MathML

MathML是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。有部分浏览器支持MathML,但并非所有浏览器都支持,使用MathJax可以避免出现输出不一致的情况。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body>
    <p>(MathML)解不等式
        <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mi>f</mi>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
            <mo>&gt;</mo>
            <mfrac>
                <msqrt>
                    <mn>2</mn>
                </msqrt>
                <mn>8</mn>
            </mfrac>
            <mo>+</mo>
            <mn>1</mn>
        </math>
    </p>
</body>
</html>
显示LaTeX

LaTeX是纯文本格式,需要使用特殊的定界符将数学公式和其他文本分隔开来。增加使用单个美元符号作为数学定界符后:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
	    tex2jax: {
	        inlineMath: [['$','$'], ['\\(','\\)']],
	        processEscapes: true
	    }
	});
    </script>
</head>
<body>
    <p>(MathML)解不等式
        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mi>f</mi>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
            <mo>&gt;</mo>
            <mfrac>
                <msqrt>
                    <mn>2</mn>
                </msqrt>
                <mn>8</mn>
            </mfrac>
            <mo>+</mo>
            <mn>1</mn>
        </math>
    </p>

    <p>(LaTeX)解不等式$f(x)>\frac{\sqrt2}8+1$</p>
</body>
</html>

显示结果:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-03-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
React 分页组件 Pagination
在现代 Web 应用中,分页组件是不可或缺的一部分。无论是列表展示、搜索结果还是文章列表,分页组件都能有效提升用户体验,避免一次性加载大量数据导致的性能问题。本文将介绍如何在 React 中实现一个分页组件,从基础概念到常见问题及解决方案,帮助开发者快速上手。
Jimaks
2024/11/17
2320
小程序页面跳转、带参数跳转以及navigator跳转[通俗易懂]
跳转到的页面分 tabBar 页面和 非tabBar 页面。url路径可以写相对和绝对路径。
全栈程序员站长
2022/07/30
8.2K0
小程序页面跳转、带参数跳转以及navigator跳转[通俗易懂]
【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
富文本格式(Rich Text Format)即RTF格式,又称多文本格式,是由微软公司开发的跨平台文档格式。大多数的文字处理软件都能读取和保存RTF文档。它是一种方便于不同的设备、系统查看的文本和图形文档格式。
愚公搬代码
2022/12/01
2.1K0
【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
黑马vue电商后台管理系统总结[通俗易懂]
后端是已经写好了的,采用 express 搭建的 API 服务,返回的数据是 JSON 格式的数据,只需要导入数据库,并配置一下数据库信息,就可以跑起来了,也有对应的api文档
全栈程序员站长
2022/07/01
2.5K0
黑马vue电商后台管理系统总结[通俗易懂]
【玩转腾讯云】手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
19世纪著名的印象派画家莫奈,喜欢对着同一处景物,分别画出对象在不同时间,不同光线下的色彩变化。
Kagol
2021/04/20
8K0
React 项目精进技巧
umi+dva作为底层框架,Ant Design Mobile为 UI 组件库,是蚂蚁金服推崇的的react项目最佳实践,具有国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等方便一线开发者的功能,部分功能代码可以参考Ant Design pro,目录结构预览如下
EchoROne
2022/08/15
1K0
React 项目精进技巧
5w字长文带你【从0使用NextJS+SSR开发博客系统】 | 技术创作特训营第五期
Next.js 是一个用于构建 React 应用程序的 React 框架。它的目标是使 React 应用的开发变得更简单、更灵活。下面是一些 Next.js 的关键特性:
程序员库里
2024/02/05
1.8K1
React 分页组件 Pagination
在现代 Web 应用中,分页组件是不可或缺的一部分,特别是在处理大量数据时。React 生态系统中有许多现成的分页组件库,但了解如何从头开始构建一个分页组件可以帮助我们更好地理解其工作原理,并根据具体需求进行定制。本文将从基础概念出发,逐步深入介绍 React 分页组件的常见问题、易错点及如何避免,并提供代码案例进行解释。
Jimaks
2024/11/16
2110
react新手demo——TodoList
今天我们就使用 react 来实现一个简易版的 todolist ,我们可以使用这个 demo 进行 list 的增删改差,实际效果如上图所示。大家可以clone下来查看:react-todolist
庞小明
2020/02/18
1.1K0
react新手demo——TodoList
「react进阶」年终送给react开发者的八条优化建议
笔者是一个 react 重度爱好者,在工作之余,也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工作中的小技巧。送人玫瑰,手留余香,阅读的朋友可以给笔者点赞,关注一波 。陆续更新前端文章。
用户6835371
2021/06/01
1.9K0
「react进阶」年终送给react开发者的八条优化建议
react实战:umi问卷发布系统
技术团队中,保持技术分享和持续的学习是完全必要的。企业主会说:"公司不是培训机构。"这固然正确。但一个公司,总会遇到这种或那种需要攻关的难题。当你不愿意分享解决方案,或者身边的同事既不愿意学习,也不接受新的东西,反而一而再再而三糊弄。那团队怎么配合?
一粒小麦
2019/07/31
5.7K0
react实战:umi问卷发布系统
React 路由详解(超详细详解)
使用 Link 是会有一些问题的, 他不会显示按钮的高亮显示, 所以我使用 NavLink 来替代它
全栈程序员站长
2022/08/10
6K0
React 路由详解(超详细详解)
前端代码简洁之路,后台系统之详情页设计
我就是被迷的那双眼。有时候需求来了,用熟悉的套路进行开发,确实很节省时间也能保证功能的稳定,但是这些开发的惯性无形中阻碍了我对技术的探索。
叶一一
2022/10/24
1.4K0
前端代码简洁之路,后台系统之详情页设计
如何优雅的设计 React 组件
作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React、Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式。那么,为什么
iKcamp
2018/01/04
5.4K0
React实现分页器效果
世间万物皆对象
2024/03/20
2010
「React进阶」 React全部api解读+基础实践大全(夯实基础万字总结)
很多同学用react开发的时候,真正用到的React的api少之又少,基本停留在Component,React.memo等层面,实际react源码中,暴露出来的方法并不少,只是我们平时很少用。但是React暴露出这么多api并非没有用,想要玩转react,就要明白这些API究竟是干什么的,应用场景是什么,今天就让我们从react 到 react-dom,一次性把react生产环境的暴露api复习个遍(涵盖90%+)。
用户6835371
2021/06/01
2.2K0
「React进阶」 React全部api解读+基础实践大全(夯实基础万字总结)
React:像message.success()一样实现Message通用容器及Message组件
对于Message这样的组件,在各个页面都有可能使用到。但我们是不希望在各个页面都必须引入一个容器的,也不希望还必须做专门的组件挂载,这样的组件能用,但不是很能用。
源心锁
2022/08/12
1.4K0
React:像message.success()一样实现Message通用容器及Message组件
Week33-组件平台开发
2-1 组件平台架构设计 点击查看【processon】 2-2 组件平台技术选型和框架搭建 umi-component-test改项目代码提交至:https://github.com/liugezhou/umi-component-test
六个周
2022/10/28
7270
React大法:如何轻松编写动态PDF文件
在本文中,我们将学习如何通过接受用户的输入来生成动态 PDF。一些用例包括根据收到的数据生成invoices、certificates、resumes、等。reports
zayyo
2023/10/04
8761
step by step guide tell you how to build a website like apkmirror
There are many free apk download websites such as apkmirror, today i will tell you how to build a website like apkmirror, the programming language i used is node.js, the database i used is mongodb, search engine used is elasticsearch, the web framework i use is eggjs.
全栈程序员站长
2022/11/01
1K0
step by step guide tell you how to build a website like apkmirror
推荐阅读
相关推荐
React 分页组件 Pagination
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验