有時候我們想在頁面中添加一些數(shù)學(xué)公式摄闸，或者是一些數(shù)學(xué)題目袄秩，很多特殊的符號還有排版很難實現(xiàn)腰奋，今天我教大家如何把數(shù)學(xué)表達式轻绞，完美的展現(xiàn)出來
首先
我們需要用到的核心JS插件是Mathjax
MathJax是一個開源JavaScript庫。它支持LaTeX窿春、MathML拉一、AsciiMath符號采盒，可以運行于所有流行瀏覽器上。 它的設(shè)計目標(biāo)是利用最新的web技術(shù)蔚润，構(gòu)建一個支持math的web平臺磅氨。支持主要的瀏覽器和操作系統(tǒng),包括那些移動設(shè)備。 對大部分用戶而言它不需要安裝嫡纠，即沒有插件需要下載也沒有軟件需要安裝悍赢，所以網(wǎng)頁作者可以編寫包含數(shù)學(xué)公式的頁面并有信心可以自然而容易的瀏覽到它們。 只需要在頁面中包含MathJax腳本和一些數(shù)學(xué)公式货徙，其他的事情交給MathJax來處理吧左权。
使用
引入mathjax插件資源，就可以使用了
具體的數(shù)學(xué)表達式寫法痴颊，參照LaTeX規(guī)則書寫即可
牛刀一小試
下面我們就顯示一個數(shù)學(xué)題目的展示
<!--
* @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>
最終效果
最后 ??
這只是一個簡單的示例展示，拋磚引玉哈
好啦蠢棱，以上就是我本次分享的全部內(nèi)容啦锌杀，如果你覺得我的文章對你有一丟丟幫助，那么請不要吝嗇你的贊??哦泻仙，阿門~
