WEB 页面嵌入公式的方法

标签(空格分隔): WEB


MathJax 简介

MathJax是一款运行在浏览器中的开源的数学符号渲染引擎,使用 MathJax 可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax 可以解析 Latex、MathML 和 ASCIIMathML 的标记语言。

MathJax 下载

下载地址

引入 MathJax

<script type="text/javascript" src="../c01/MathJax/MathJax.js?config=MML_HTMLorMML-full"></script>

MathJax 配置

MathJax.Hub.Config({

    showProcessingMessages: false, //关闭js加载过程信息
    messageStyle: "none", //不显示信息
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath:  [ ["$", "$"] ], //行内公式选择$
        displayMath: [ ["$$","$$"] ], //段内公式选择$$
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'], //避开某些标签
        ignoreClass:"comment-content" //避开含该Class的标签
    },
    "HTML-CSS": {
        availableFonts: ["STIX","TeX"], //可选字体
        showMathMenu: false //关闭右击菜单显示
        

    },
    menuSettings: {
        inTabOrder: false,//取消Tab建
        // zoom: "Click",//点击放大


    },
   

});

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

识别公式

例如:

例子一

\begin{align}
\sqrt{37} & = \sqrt{\frac{732-1}{122}} \
& = \sqrt{\frac{732}{122}\cdot\frac{732-1}{732}} \
& = \sqrt{\frac{732}{122}}\sqrt{\frac{732-1}{732}} \
& = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \
& \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{align}

\begin{align}
\sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\
 & = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\ 
 & = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\
 & = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\ 
& \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{align}

例子二

$(ax^2 + bx + c = 0)$

(ax^2 + bx + c = 0)

例子三(建议使用)

行内使用不用写 display 单独居中显示使用display="block"

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>x</mi>
  <mo>=</mo>
  <mrow class="MJX-TeXAtom-ORD">
    <mfrac>
      <mrow>
        <mo>−<!-- − --></mo>
        <mi>b</mi>
        <mo>±<!-- ± --></mo>
        <msqrt>
          <msup>
            <mi>b</mi>
            <mn>2</mn>
          </msup>
          <mo>−<!-- − --></mo>
          <mn>4</mn>
          <mi>a</mi>
          <mi>c</mi>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

辅助工具

小窍门

math 标签可以通过 生成工具导出
复制到到 HTML 页面中
安装了 MathType 的同学,可以双击 world 里的弹出,MathType 的窗口。

MathType 设置

cmd-markdown-logo

参考资料

https://www.mathjax.org/
https://segmentfault.com/a/1190000008317350

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,367评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,959评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,750评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,226评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,252评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,975评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,592评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,497评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,027评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,147评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,274评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,953评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,623评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,143评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,260评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,607评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,271评论 2 358

推荐阅读更多精彩内容

  • Markdown 高阶语法 更加详细的语法参照 Markdown语法说明 (简体中文版) 1. 内容目录 (目前简...
    闫阿佳阅读 425评论 0 0
  • $ \LaTeX{} $历史 $\LaTeX{}$(/ˈlɑːtɛx/,常被读作/ˈlɑːtɛk/或/ˈleɪtɛ...
    大只若于阅读 5,589评论 0 5
  • 声明!!!! 此文章的代码部分在简书中皆不能正常显示, 请去我的个人网站观看效果, 如果访问不了, 请翻墙试试! ...
    kagenZhao阅读 2,550评论 0 0
  • #1996 AHSME ##1996 AHSME Problems/Problem 1 The addition ...
    abigtreenj阅读 1,398评论 0 0
  • 继续用公式轰炸简书,谁叫简书写作体验这么好呢~~老规矩,万一真有人想阅读这些公式,请移步这里。 机器学习涉及到较多...
    kamidox阅读 4,107评论 3 1