在uniapp里面識別LaTeX,使用mathjax


 1 <template>  
 2 <view>
 3     <view class="content" :prop="content" :change:prop="MathJax.updateMathJax" >  
 4     {{content}}       
 5     <text v-html="content"></text>
 6     
 7    
 8     </view>  
 9      <button @click="changeHandler">change</button>
10      </view>
11 </template>  
12  
13 <script>  
14   export default {  
15     data() {  
16       return {
17         content: "<div> 關於\\(x\\)的方程\\( \\dfrac {3x-2}{x+1}=2+ \\dfrac {m}{x+1}\\)無解,則\\(m\\)的值為\\((\\)  \\()\\) </div>"  ,
18       } 
19     },  
20     onLoad(options) {
21         this.content = options.title;
22     
23     
24     },
25     onShow() {
26     },
27     methods: {
28       changeHandler () {
29         this.content = '$y=\\frac{1}{5}(3-2x)$'
30         this.index+=1;
31       } 
32     }
33   }
34 </script>  
35 <script module="MathJax" lang="renderjs">  
36   export default {  
37     mounted() {
38       if (typeof window.MathJax === 'object') {  
39         this.initMathJax()  
40       } else {  
41         const script = document.createElement('script')  
42         script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML' 
43         script.onload = this.initMathJax.bind(this)  
44         document.head.appendChild(script)  
45       }
46     },  
47     methods: {  
48       initMathJax() { 
49  
50              MathJax.Hub.Config({  
51                       "HTML-CSS": {  
52                         availableFonts: ["STIX-Web"],  
53                         preferredFont: "STIX-Web",  
54                         linebreaks: { automatic: false },  
55                         undefinedFamily: "STIXGeneral,'Arial Unicode MS',serif",  
56                         EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50),  
57                         webFont: "STIX-Web",  
58                         imageFont: "",  
59                         showMathMenu: false,  
60                         scale: 90  
61                       },  
62                       jax: ["input/TeX", "input/MathML", "output/HTML-CSS", "output/NativeMML", "output/CommonHTML"],  
63                       tex2jax: {  
64                         inlineMath: [  
65                             ["$", "$"],  
66                             ["\\(", "\\)"]  
67                         ],  
68                         displayMath: [  
69                             ["$$", "$$"],  
70                             ["\\[", "\\]"]  
71                         ],  
72                         processEscapes: true,  
73                         ignoreClass: "tex2jax_ignore|dno"  
74                       },  
75                       TeX: {  
76                         extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"],  
77                         noUndefined: {  
78                             attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "100%" }  
79                         }  
80                       },  
81                       messageStyle: "none",  
82                       extensions: ["tex2jax.js", "mml2jax.js", "MathMenu.js", "MathZoom.js", "CHTML-preview.js"],  
83                       errorSettings: { message: ["parse..."] },  
84                       SVG: { linebreaks: { automatic: true }, width: "100% container" },  
85                       menuSettings: { CHTMLpreview: true }  
86                     })
87             
88         MathJax.Hub.Queue(['Typeset', MathJax.Hub, ''])  
89       },
90       updateMathJax () {
91         MathJax.Hub.Queue(['Typeset', MathJax.Hub, ''])
92       }
93     }  
94   }  
95 </script>  
96 <style lang="scss">  
97 .content{font-size: 18px;margin-top: 150px;}  
98 </style>  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM