MathJax的使用

原文链接:http://www.zjhuiwan.cn/toDetail?articleId=1812131133133410001

今天下了个mathJax用来格式化数学公式,记录一下大概用法,方便以后使用。我也是直接用的官方的demo改的。。

首先官网下mathJax的源码包,放到项目中

直接上代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

 <script type="text/x-mathjax-config">

            MathJax.Hub.Config({

              showProcessingMessages: false,

              tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }

            });

  $(function() {

   var content = "";

      var Preview = {

              delay: 150,        

 

              preview: null,    

              buffer: null,      

 

              timeout: null,     

              mjRunning: false,  

              mjPending: false,  

              oldText: null,    

 

 

              Init: function () {

                this.preview = document.getElementById("MathPreview");

                this.buffer = document.getElementById("MathBuffer");

              },

 

 

              SwapBuffers: function () {

                var buffer = this.preview, preview = this.buffer;

                this.buffer = buffer; this.preview = preview;

                buffer.style.visibility = "hidden"; buffer.style.position = "absolute";

                preview.style.position = ""; preview.style.visibility = "";

              },

 

 

              Update: function () {

                if (this.timeout) {clearTimeout(this.timeout)}

                this.timeout = setTimeout(this.callback,this.delay);

              },

              

              CreatePreview: function () {

                Preview.timeout = null;

                if (this.mjPending) return;

                var text = content;

                if (text === this.oldtext) return;

                if (this.mjRunning) {

                  this.mjPending = true;

                  MathJax.Hub.Queue(["CreatePreview",this]);

                } else {

                  this.buffer.innerHTML = this.oldtext = text;

                  this.mjRunning = true;

                  MathJax.Hub.Queue(

                ["Typeset",MathJax.Hub,this.buffer],

                ["PreviewDone",this]

                  );

                }

              },

 

 

              PreviewDone: function () {

                this.mjRunning = this.mjPending = false;

                this.SwapBuffers();

              }

 

            };

 

 

            Preview.callback = MathJax.Callback(["CreatePreview",Preview]);

            Preview.callback.autoReset = true;  

       

      Preview.Init();

       

      $("#uptitle,#upcontent,#upanswerTitle,#upanswerContent").on("input", function() {

          content = $(this).val();

          Preview.Update();

      });

  });

 </script>

 <script type="text/javascript" src="${pageContext.request.contextPath}/js/mathjax/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>

  

 <div class="form-group">

     <label for="upanswerTitle"  class="control-label" style="text-align: center;width:20%">答案<span style="color:red;"> *</span></label>

     <textarea id="upanswerTitle" class="form-control"

        style="width: 70%; display: inline-block; margin-right: 15px; padding-left:0px; padding-right:0px;" rows="5" cols=""></textarea>

                                    

 </div>

 <div class="form-group">

     <label for="upanswerContent" class="control-label" style="text-align: center;width:20%">解析</label>

     <textarea id="upanswerContent" class="form-control"

        style="width: 70%; display: inline-block; margin-right: 15px; padding-left:0px; padding-right:0px;"

         rows="5" cols=""></textarea>

 </div>

                             

  <div class="form-group">

    <div id="MathPreview" style="padding: 3px; width:100%; margin-top:5px"></div>

    <div id="MathBuffer" style="border:1px solid; padding: 3px; width:100%; margin-top:5px; 

          visibility:hidden; position:absolute; top:0; left: 0"></div>

   </div>

效果:

154467848444024022997.gif

### 如何使用 MathJax 进行数学公式渲染 #### 加载 MathJax 库 为了使网页能够解析并显示 LaTeX 数学公式,需先引入 MathJax 的 JavaScript 文件。通常可以通过 CDN 方式来简化集成过程。 ```html <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> ``` 这段脚本会异步加载最新版本的 MathJax 并配置其处理 TeX 和 MML 输入[^1]。 #### 配置 MathJax 参数 有时可能希望自定义一些行为,比如调整字体大小、设置内联公式的边界等。这可通过向页面中加入如下配置代码实现: ```javascript window.MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] }, svg: { fontCache: 'global' } }; ``` 上述配置允许以 `$...$` 或 `\( ... \)` 形式书写内嵌公式[^2]。 #### 动态更新内容后的重新渲染 对于动态生成的内容(如通过 AJAX 请求获取),需要调用特定函数触发再次渲染动作。例如,在 Vue 组件内部可以这样做: ```javascript methods: { loadMathJax() { if (typeof MathJax !== 'undefined') { MathJax.typesetPromise([document.querySelector('#formula-container')]) .then(() => console.log('Typesetting complete')) .catch((err) => console.error(err)); } } } ``` 此方法确保每当新数据被插入 DOM 后都能及时应用样式变化。 #### 实际应用场景下的注意事项 考虑到性能因素,不是所有的页面都需要启用 MathJax 支持;仅当确实存在数学表达式时才激活该功能是有益的做法。某些静态站点生成器(如 Hexo)提供了灵活的方式让用户控制这一点——可以在每篇文章头部声明是否开启此项特性[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sunon_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值