返回 reveal.js
test-mathjax4.html
根目录 / test / test-mathjax4.html
1 <!doctype html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <title>reveal.js - MathJax4 Plugin Test</title>
7 <link rel="stylesheet" href="../dist/reveal.css">
8 <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
9 <script src="../node_modules/qunit/qunit/qunit.js"></script>
10 </head>
11
12 <body style="overflow: auto;">
13
14 <div id="qunit"></div>
15 <div id="qunit-fixture"></div>
16
17 <div class="reveal" style="display: none;">
18 <div class="slides">
19 <section>
20 <h2>MathJax4 Test</h2>
21 <p>Testing MathJax4 plugin functionality</p>
22 </section>
23
24 <section>
25 <h3>Simple Math</h3>
26 <p>Inline math: \(E = mc^2\)</p>
27 <p>Display math:</p>
28 \[
29 \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
30 \]
31 </section>
32
33 <section>
34 <h3>Macros Test</h3>
35 <p>Using custom macros: \(\R\) and \(\set{x}{x &gt; 0}\)</p>
36 \[
37 L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 &lt; +\infty}
38 \]
39 </section>
40
41 <section>
42 <h3>Complex Math</h3>
43 \[
44 \begin{aligned}
45 \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\
46 \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
47 \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
48 \nabla \cdot \vec{\mathbf{B}} & = 0
49 \end{aligned}
50 \]
51 </section>
52 </div>
53 </div>
54
55 <script src="../dist/reveal.js"></script>
56 <script src="../dist/plugin/math.js"></script>
57 <script>
58 QUnit.config.testTimeout = 30000;
59 QUnit.module('MathJax4 Plugin');
60
61 QUnit.test('MathJax4 plugin is available', function(assert) {
62 assert.ok(typeof RevealMath !== 'undefined', 'RevealMath is defined');
63 assert.ok(typeof RevealMath.MathJax4 !== 'undefined', 'MathJax4 plugin is available');
64 assert.strictEqual(typeof RevealMath.MathJax4, 'function', 'MathJax4 is a function');
65 });
66
67 QUnit.test('MathJax4 plugin has correct structure', function(assert) {
68 var mathJax4Plugin = RevealMath.MathJax4();
69 assert.strictEqual(mathJax4Plugin.id, 'mathjax4', 'Plugin has correct ID');
70 assert.strictEqual(typeof mathJax4Plugin.init, 'function', 'Plugin has init method');
71 });
72
73 QUnit.test('MathJax4 plugin can be initialized', function(assert) {
74 assert.expect(1);
75 var done = assert.async();
76
77 // Create proper reveal.js DOM structure
78 var testContainer = document.createElement('div');
79 testContainer.className = 'reveal';
80 var slidesContainer = document.createElement('div');
81 slidesContainer.className = 'slides';
82 var slide = document.createElement('section');
83 slide.textContent = 'Test slide';
84 slidesContainer.appendChild(slide);
85 testContainer.appendChild(slidesContainer);
86 document.body.appendChild(testContainer);
87
88 var testReveal = new Reveal(testContainer, {
89 plugins: [RevealMath.MathJax4()]
90 });
91
92 testReveal.initialize().then(function() {
93 assert.ok(testReveal.hasPlugin('mathjax4'), 'MathJax4 plugin is registered');
94 document.body.removeChild(testContainer);
95 done();
96 }).catch(function(error) {
97 assert.ok(false, 'MathJax4 plugin initialization failed: ' + error.message);
98 document.body.removeChild(testContainer);
99 done();
100 });
101 });
102
103 QUnit.test('MathJax4 loads MathJax 4.0.0 and processes math', function(assert) {
104 assert.expect(3);
105 var done = assert.async();
106
107 // Create proper reveal.js DOM structure
108 var testContainer = document.createElement('div');
109 testContainer.className = 'reveal';
110 var slidesContainer = document.createElement('div');
111 slidesContainer.className = 'slides';
112 var slide = document.createElement('section');
113 slide.innerHTML = '<p>Inline: \\(E = mc^2\\)</p><p>Display: \\[ \\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi} \\]</p>';
114 slidesContainer.appendChild(slide);
115 testContainer.appendChild(slidesContainer);
116 document.body.appendChild(testContainer);
117
118 var testReveal = new Reveal(testContainer, {
119 plugins: [RevealMath.MathJax4()],
120 mathjax4: {
121 tex: {
122 inlineMath: [['$', '$'], ['\\(', '\\)']],
123 displayMath: [['$$', '$$'], ['\\[', '\\]']]
124 }
125 }
126 });
127
128 testReveal.initialize().then(function() {
129 setTimeout(function() {
130 assert.ok(typeof window.MathJax !== 'undefined', 'MathJax is loaded');
131
132 var mathElements = testContainer.querySelectorAll('.MathJax');
133 assert.ok(mathElements.length > 0, 'Math elements are processed by MathJax');
134
135 // Check that inline and display math are both processed
136 var inlineMath = testContainer.querySelectorAll('.MathJax');
137 assert.ok(inlineMath.length >= 2, 'Both inline and display math are processed');
138
139 document.body.removeChild(testContainer);
140 done();
141 }, 3000); // Give MathJax more time to load and process
142 }).catch(function(error) {
143 assert.ok(false, 'MathJax4 test failed: ' + error.message);
144 document.body.removeChild(testContainer);
145 done();
146 });
147 });
148
149 QUnit.test('MathJax4 supports custom macros', function(assert) {
150 assert.expect(2);
151 var done = assert.async();
152
153 // Create proper reveal.js DOM structure
154 var testContainer = document.createElement('div');
155 testContainer.className = 'reveal';
156 var slidesContainer = document.createElement('div');
157 slidesContainer.className = 'slides';
158 var slide = document.createElement('section');
159 slide.innerHTML = '<p>Macro test: \\(\\R\\) and \\(\\set{x}{x > 0}\\)</p>';
160 slidesContainer.appendChild(slide);
161 testContainer.appendChild(slidesContainer);
162 document.body.appendChild(testContainer);
163
164 var testReveal = new Reveal(testContainer, {
165 plugins: [RevealMath.MathJax4()],
166 mathjax4: {
167 tex: {
168 inlineMath: [['$', '$'], ['\\(', '\\)']],
169 macros: {
170 R: '\\mathbb{R}',
171 set: ['\\left\\{#1 \\; ; \\; #2\\right\\}', 2]
172 }
173 }
174 }
175 });
176
177 testReveal.initialize().then(function() {
178 setTimeout(function() {
179 var mathElements = testContainer.querySelectorAll('.MathJax');
180 assert.ok(mathElements.length > 0, 'Math with macros is processed');
181
182 // Check that macros are working (should render as math elements)
183 var macroElements = testContainer.querySelectorAll('.MathJax');
184 assert.ok(macroElements.length >= 2, 'Both macro expressions are processed');
185
186 document.body.removeChild(testContainer);
187 done();
188 }, 3000);
189 }).catch(function(error) {
190 assert.ok(false, 'MathJax4 macros test failed: ' + error.message);
191 document.body.removeChild(testContainer);
192 done();
193 });
194 });
195 </script>
196
197 </body>
198 </html>
199
199 lines HTML