最近在研究,在页面中显示一些数学公式。搞得我很头疼。 据说MathJax会统一这已领域。所以去学了学。网上教程特别多。繁杂。 说的清楚的特别少。

我是这么跑通的,:

1.在官网下载代码地址为:https://www.mathjax.org/

2.然后找到这个东西,下载源码。解压。不要动里面的配置文件。

3.解压后的文件是这个样子。

4.别动文件。全部放到文件中,引入MathJax.js就可以了。

这是一个小得demo 全码。粘贴进去就能用,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MathJax AsciiMath Test Page</title>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}
});
</script>
</head>
<body>
<div id="pop">
$$\frac{1}{2}$$
</div>

</body>
</html>

这个插件有点大,或者这样子:

<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}
});
</script>

这两船代码放到body底部就可以了。

!!!ps:还有一条。有时候你的数学代码是动态的,动态代码加载到页面上。MAthJax是不会重新渲染的。解决办法是:

在加载事件后加入这段代码。MathJax.Hub.Queue(["Typeset", MathJax.Hub]);(翻译成中文就是:重新渲染。)。

然后,就成功的用了MathJax啦。

MAthJax入门教程(五分钟上手)的更多相关文章

  1. Elasticsearch入门教程(五):Elasticsearch查询(一)

    原文:Elasticsearch入门教程(五):Elasticsearch查询(一) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...

  2. 无废话ExtJs 入门教程五[文本框:TextField]

    无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...

  3. PySide——Python图形化界面入门教程(五)

    PySide——Python图形化界面入门教程(五) ——QListWidget 翻译自:http://pythoncentral.io/pyside-pyqt-tutorial-the-qlistw ...

  4. RabbitMQ入门教程(五):扇形交换机发布/订阅(Publish/Subscribe)

    原文:RabbitMQ入门教程(五):扇形交换机发布/订阅(Publish/Subscribe) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...

  5. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  6. WCF入门教程五[WCF的通信模式]

    一.概述 WCF在通信过程中有三种模式:请求与答复.单向.双工通信.以下我们一一介绍. 二.请求与答复模式 描述: 客户端发送请求,然后一直等待服务端的响应(异步调用除外),期间处于假死状态,直到服务 ...

  7. 无废话WCF入门教程五[WCF的通信模式]

    一.概述 WCF在通信过程中有三种模式:请求与答复.单向.双工通信.以下我们一一介绍. 二.请求与答复模式 描述: 客户端发送请求,然后一直等待服务端的响应(异步调用除外),期间处于假死状态,直到服务 ...

  8. 五分钟上手Markdown

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.------百度百科 话不多说,开始发车!总共10个标签,五分钟足矣,毕竟基本没难度 ...

  9. Spring Cloud 入门教程(五): Ribbon实现客户端的负载均衡

    接上节,假如我们的Hello world服务的访问量剧增,用一个服务已经无法承载, 我们可以把Hello World服务做成一个集群. 很简单,我们只需要复制Hello world服务,同时将原来的端 ...

随机推荐

  1. JPA 使用 Specification 复杂查询和 Criteria 查询

    转自:https://blog.wuwii.com/jpa-specification.html 前言 JPA 给我们提供了基础的 CURD 的功能,并且用起来也是特别的方便,基本都是一行代码完成各种 ...

  2. python加解密

    from Crypto.Cipher import AES import base64 secret_key = '1234567890123456' # 密匙 msg_text = 'test so ...

  3. Python模块 Socket

    一个简单的python socket编程 一.套接字 套接字是为特定网络协议(例如TCP/IP,ICMP/IP,UDP/IP等)套件对上的网络应用程序提供者提供当前可移植标准的对象.它们允许程序接受并 ...

  4. C#转Java之路之一:线程

    Java实现多线程方式有以下两种: public class HelloWordThread implements Runnable{ public void run(){ System.out.pr ...

  5. Uva 11491 暴力贪心

    题意:给一个n长度的整数,删掉 k 个数字,使得剩下的数字最大. 分析:还剩 n-k 个数字,就是在原序列里面,相对顺序不变的情况下,这个n-k个数字组成的数最大. 感觉没有什么特别好的方法策略,看了 ...

  6. VOJ1049 送给圣诞夜的礼品 【矩阵经典4】

    任意门:https://vijos.org/p/1049 描述 当小精灵们把贺卡都书写好了之后.礼品准备部的小精灵们已经把所有的礼品都制作好了.可是由于精神消耗的缘故,他们所做的礼品的质量越来越小,也 ...

  7. Spring管理连接池的几种方式

    第一种方式:.Spring常规的数据库连接方法: @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(locations=&qu ...

  8. refinedet网络结构

    refinedet只预测4个层,并且只有conv6_1.conv6_2,没有ssd中的conv7.8.9 refinedet的4个层都只有1个aspect ratio和1个min_size,所以每层每 ...

  9. 正则匹配之replace方法

    在我印象中,replace方法就是一个正则匹配,然后一股脑的替换掉匹配到的内容的一个方法. 在一次任务需求中,有这么一个需求,一行字符串里面,替换相应字符串,具体就是匹配到‘A’然后把‘A’替换成‘a ...

  10. Android学习笔记_25_多媒体之在线播放器

    一.布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr ...