较你如何用JS写出漂亮的数学表达式
2020-07-13 本文已影响0人
羞羞的王大锤
有时候我们想在页面中添加一些数学公式，或者是一些数学题目，很多特殊的符号还有排版很难实现，今天我教大家如何把数学表达式，完美的展现出来
首先
我们需要用到的核心JS插件是Mathjax
MathJax是一个开源JavaScript库。它支持LaTeX、MathML、AsciiMath符号，可以运行于所有流行浏览器上。 它的设计目标是利用最新的web技术，构建一个支持math的web平台。支持主要的浏览器和操作系统,包括那些移动设备。 对大部分用户而言它不需要安装，即没有插件需要下载也没有软件需要安装，所以网页作者可以编写包含数学公式的页面并有信心可以自然而容易的浏览到它们。 只需要在页面中包含MathJax脚本和一些数学公式，其他的事情交给MathJax来处理吧。
使用
引入mathjax插件资源，就可以使用了
具体的数学表达式写法，参照LaTeX规则书写即可
牛刀一小试
下面我们就显示一个数学题目的展示
<!--
* @Author: 羞羞的王大锤
* @Date: 2020-07-13 14:32:35
* @LastEditTime: 2020-07-13 14:48:49
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /test/math.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MathJax example</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<style>
.subject{
display:flex;
flex-direction: row;
align-items:center;
/* justify-content:center */
}
span{
display:block;
}
.answer-box{
display: flex;
flex-direction: row;
}
.answer-item{
width:200px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<p class='subject'>
<span> 5. 已知方程组：</span>
<span>$$
\begin{cases}
2a-3b=13 \\
3a+5b=30.9
\end{cases}
$$
</span>
的解是：
<span>$$
\begin{cases}
a=8.3 \\
b=1.2
\end{cases}
$$
</span>
，则方程组：
<span>$$
\begin{cases}
2(x+2) - 3(y-1) = 13 \\
3(x+2) + 5(y-1) = 30.9
\end{cases}
$$
</span>
的解是( )
</p>
<div class="answer-box">
<div class="answer-item">
<input type="radio">A.
<span>$$
\begin{cases}
x=8.3 \\
y=1.2
\end{cases}
$$
</span>
</div>
<div class="answer-item">
<input type="radio">B.
<span>$$
\begin{cases}
x=10.3 \\
y=2.2
\end{cases}
$$
</span>
</div>
</div>
<div class="answer-box">
<div class="answer-item">
<input type="radio">C.
<span>$$
\begin{cases}
x=6.3 \\
y=2.2
\end{cases}
$$
</span>
</div>
<div class="answer-item">
<input type="radio">D.
<span>$$
\begin{cases}
x=10.3 \\
y=0.2
\end{cases}
$$
</span>
</div>
</div>
</body>
</html>
最终效果
最后 🙌
这只是一个简单的示例展示，抛砖引玉哈
好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~
