11<!DOCTYPE html>
22< html lang ="en-US ">
3- < head >
4- < meta charset ="utf-8 " />
5- < title > MathLive Basic Example</ title >
6- < meta name ="viewport " content ="width=device-width, initial-scale=1 " />
7- < link rel ="stylesheet " href ="../style.css " />
8- </ head >
9- < body >
10- < header >
11- < h1 > MathLive Customization Example</ h1 >
12- </ header >
13- < main >
14- < textarea > </ textarea >
15- < div class ="mathfield " id ="mf1 "> f(x)=</ div >
16- < div class ="mathfield " id ="mf2 ">
17- 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
18- \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
19- \quad\quad \text{for $|q|< 1 $}
20- </ div >
21- < div class ="mathfield " id ="mf3 ">
22- \frac{1}{4\pi t}e^{-\frac{x^2+y^2}{4t}}
23- </ div >
24- <!-- <div class="mathfield" id='mf3' >\begin{array}{lc}
3+
4+ < head >
5+ < meta charset ="utf-8 " />
6+ < title > MathLive Basic Example</ title >
7+ < meta name ="viewport " content ="width=device-width, initial-scale=1 " />
8+ < link rel ="stylesheet " href ="../style.css " />
9+ </ head >
10+
11+ < body >
12+ < header >
13+ < h1 > MathLive Customization Example</ h1 >
14+ </ header >
15+ < main >
16+ < textarea > </ textarea >
17+ < div class ="mathfield " id ="mf1 "> f(x)=</ div >
18+ < div class ="mathfield " id ="mf2 ">
19+ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
20+ \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
21+ \quad\quad \text{for $|q|< 1 $} </ div >
22+ < div class ="mathfield " id ="mf3 ">
23+ \frac{1}{4\pi t}e^{-\frac{x^2+y^2}{4t}}
24+ </ div >
25+ <!-- <div class="mathfield" id='mf3' >\begin{array}{lc}
2526 \text{Given:}\
2627 & f(x)=\operatorname {li}(x)-\sum _{\rho }\operatorname {li}(x^{\rho })-\log(2)+\int _{x}^{\infty }{\frac {dt}{t(t^{2}-1)\log(t)}}\
2728 \text{with}\\
@@ -33,82 +34,72 @@ <h1>MathLive Customization Example</h1>
3334 \text{where}\\
3435 & \( \Pi _{0}(x) \) \text{is Riemann's prime counting function.}
3536 \end{array}</div> -->
36- < div class ="output " id ="latex "> </ div >
37- < div class ="output " id ="mathjson "> </ div >
38- </ main >
37+ < div class ="output " id ="latex "> </ div >
38+ < div class ="output " id ="mathjson "> </ div >
39+ </ main >
3940
40- < footer >
41- < a
42- href ="https://github.com/arnog/mathlive/tree/master/examples/customization "
43- > < svg
44- class ="fa-w-24 "
45- height ="24px "
46- style ="vertical-align: -3px; margin-right: 6px; "
47- >
48- < use xlink:href ="../icons.svg#github " /> </ svg
49- > View source < svg class ="fa-w-24 " height ="24px ">
50- < use xlink:href ="../icons.svg#angle-right " /> </ svg
51- > </ a >
52- < a href ="../ "
53- > More examples < svg class ="fa-w-24 " height ="24px ">
54- < use xlink:href ="../icons.svg#angle-right " /> </ svg
55- > </ a >
56- < a href ="/ "
57- > Return to the homepage < svg class ="fa-w-24 " height ="24px ">
58- < use xlink:href ="../icons.svg#angle-right " /> </ svg
59- > </ a >
60- </ footer >
41+ < footer >
42+ < a href ="https://github.com/arnog/mathlive/tree/master/examples/customization "> < svg class ="fa-w-24 "
43+ height ="24px " style ="vertical-align: -3px; margin-right: 6px; ">
44+ < use xlink:href ="../icons.svg#github " /> </ svg > View source < svg class ="fa-w-24 " height ="24px ">
45+ < use xlink:href ="../icons.svg#angle-right " /> </ svg > </ a >
46+ < a href ="../ "> More examples < svg class ="fa-w-24 " height ="24px ">
47+ < use xlink:href ="../icons.svg#angle-right " /> </ svg > </ a >
48+ < a href ="/ "> Return to the homepage < svg class ="fa-w-24 " height ="24px ">
49+ < use xlink:href ="../icons.svg#angle-right " /> </ svg > </ a >
50+ </ footer >
6151
62- < script type ="module ">
63- // import MathLive from '/dist/mathlive.mjs';
64- import MathLive from '/dist/src /mathlive.js ' ;
52+ < script type ="module ">
53+ import MathLive from '/dist/mathlive.mjs' ;
54+ // import MathLive from 'https://unpkg.com /mathlive/dist/mathlive.min.mjs ';
6555
66- MathLive . makeMathField ( 'mf1' , {
67- smartMode : true , // Makes text entry easier
68- virtualKeyboardMode : 'manual' , // Always show virtual keyboard glyph
69- onContentDidChange : updateOutput ,
70- } ) ;
56+ MathLive . makeMathField ( 'mf1' , {
57+ smartMode : true , // Makes text entry easier
58+ virtualKeyboardMode : 'manual' , // Always show virtual keyboard glyph
59+ onContentDidChange : updateOutput ,
60+ } ) ;
7161
72- MathLive . makeMathField ( 'mf2' , {
73- virtualKeyboardMode : 'onfocus' , // Show the virtual keyboard on focus
74- smartMode : false ,
75- onContentDidChange : updateOutput ,
76- } ) ;
62+ MathLive . makeMathField ( 'mf2' , {
63+ virtualKeyboardMode : 'onfocus' , // Show the virtual keyboard on focus
64+ smartMode : false ,
65+ onContentDidChange : updateOutput ,
66+ } ) ;
7767
78- MathLive . makeMathField ( 'mf3' , {
79- smartMode : true ,
80- onContentDidChange : updateOutput ,
81- } ) ;
68+ MathLive . makeMathField ( 'mf3' , {
69+ smartMode : true ,
70+ onContentDidChange : updateOutput ,
71+ } ) ;
72+
73+ function updateOutput ( mf ) {
74+ const latex = mf . $text ( ) ;
75+ document . getElementById ( 'latex' ) . innerHTML = escapeHtml ( latex ) ;
8276
83- function updateOutput ( mf ) {
84- const latex = mf . $text ( ) ;
85- document . getElementById ( 'latex' ) . innerHTML = escapeHtml ( latex ) ;
77+ const mathJSON = MathLive . latexToAST ( latex ) ;
78+ document . getElementById ( 'mathjson' ) . innerHTML = escapeHtml (
79+ JSON . stringify ( mathJSON )
80+ ) ;
81+ }
8682
87- const mathJSON = MathLive . latexToAST ( latex ) ;
88- document . getElementById ( 'mathjson' ) . innerHTML = escapeHtml (
89- JSON . stringify ( mathJSON )
83+ function escapeHtml ( string ) {
84+ return String ( string ) . replace ( / [ & < > " ' ` = / \u200b ] / g, function (
85+ s
86+ ) {
87+ return (
88+ {
89+ '&' : '&' ,
90+ '<' : '<' ,
91+ '>' : '>' ,
92+ '"' : '"' ,
93+ "'" : ''' ,
94+ '/' : '/' ,
95+ '`' : '`' ,
96+ '=' : '=' ,
97+ '\u200b' : '&#zws;' ,
98+ } [ s ] || s
9099 ) ;
91- }
100+ } ) ;
101+ }
102+ </ script >
103+ </ body >
92104
93- function escapeHtml ( string ) {
94- return String ( string ) . replace ( / [ & < > " ' ` = / \u200b ] / g, function (
95- s
96- ) {
97- return (
98- {
99- '&' : '&' ,
100- '<' : '<' ,
101- '>' : '>' ,
102- '"' : '"' ,
103- "'" : ''' ,
104- '/' : '/' ,
105- '`' : '`' ,
106- '=' : '=' ,
107- '\u200b' : '&#zws;' ,
108- } [ s ] || s
109- ) ;
110- } ) ;
111- }
112- </ script >
113- </ body >
114- </ html >
105+ </ html >
0 commit comments