0
# MathTeX Script Type Extension
1
2
Automatic script element rendering extension that converts `<script type="math/tex">` elements to rendered math, enabling seamless integration with content management systems and legacy HTML.
3
4
## Import
5
6
```typescript
7
import "katex/contrib/mathtex-script-type";
8
```
9
10
For CommonJS:
11
12
```javascript
13
require("katex/contrib/mathtex-script-type");
14
```
15
16
## Capabilities
17
18
### Automatic Script Processing
19
20
The mathtex-script-type extension automatically processes all `<script type="math/tex">` elements in the document body and replaces them with rendered math.
21
22
```typescript { .api }
23
// No explicit API - works automatically once imported
24
// Processes all script[type*="math/tex"] elements in document.body
25
```
26
27
**Usage Example:**
28
29
```html
30
<!DOCTYPE html>
31
<html>
32
<head>
33
<link rel="stylesheet" href="katex.css">
34
<script src="katex.js"></script>
35
<script src="katex/contrib/mathtex-script-type.js"></script>
36
</head>
37
<body>
38
<!-- Inline math -->
39
<script type="math/tex">E = mc^2</script>
40
41
<!-- Display math -->
42
<script type="math/tex; mode=display">
43
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
44
</script>
45
46
<!-- These will be automatically rendered on page load -->
47
</body>
48
</html>
49
```
50
51
### Script Type Recognition
52
53
The extension recognizes several script type variations:
54
55
```html
56
<!-- All of these are processed -->
57
<script type="math/tex">x^2</script>
58
<script type="math/tex; mode=display">\sum_{i=1}^n i</script>
59
<script type="Math/Tex">f(x) = x^2</script>
60
<script type="MATH/TEX; MODE=DISPLAY">\frac{1}{2}</script>
61
```
62
63
### Display Mode Detection
64
65
The extension automatically detects display mode from the script type:
66
67
```typescript { .api }
68
// Inline mode (default)
69
// <script type="math/tex">...</script>
70
// Renders as: <span class="inline-equation">...</span>
71
72
// Display mode
73
// <script type="math/tex; mode=display">...</script>
74
// Renders as: <div class="equation">...</div>
75
```
76
77
**Display Mode Examples:**
78
79
```html
80
<!-- Inline math -->
81
<p>The formula <script type="math/tex">x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}</script> solves quadratic equations.</p>
82
83
<!-- Display math -->
84
<script type="math/tex; mode=display">
85
\begin{align}
86
x^2 + y^2 &= r^2 \\
87
\sin^2 \theta + \cos^2 \theta &= 1
88
\end{align}
89
</script>
90
```
91
92
### Error Handling
93
94
The extension handles rendering errors gracefully:
95
96
```html
97
<!-- Invalid TeX -->
98
<script type="math/tex">\invalid{command}</script>
99
<!-- Results in: original TeX text displayed (not rendered) -->
100
101
<!-- Valid TeX -->
102
<script type="math/tex">\frac{1}{2}</script>
103
<!-- Results in: proper math rendering -->
104
```
105
106
### Element Replacement
107
108
Script elements are replaced with appropriate containers:
109
110
```typescript { .api }
111
// Inline math replacement:
112
// <script type="math/tex">x^2</script>
113
// becomes:
114
// <span class="inline-equation">[rendered math]</span>
115
116
// Display math replacement:
117
// <script type="math/tex; mode=display">\sum x</script>
118
// becomes:
119
// <div class="equation">[rendered math]</div>
120
```
121
122
### CMS Integration
123
124
This extension is particularly useful for content management systems that don't allow direct HTML but support script tags:
125
126
```html
127
<!-- WordPress, Drupal, etc. can safely store these -->
128
<script type="math/tex">
129
\frac{\partial f}{\partial x} = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}
130
</script>
131
132
<script type="math/tex; mode=display">
133
\oint_{\partial \Omega} \mathbf{F} \cdot d\mathbf{l} = \iint_\Omega (\nabla \times \mathbf{F}) \cdot d\mathbf{A}
134
</script>
135
```
136
137
### Server-Side Generation
138
139
Perfect for server-side templates that generate script tags:
140
141
```php
142
<?php
143
// PHP example
144
echo '<script type="math/tex">' . htmlspecialchars($latex_formula) . '</script>';
145
?>
146
```
147
148
```python
149
# Python/Django example
150
def render_math(latex):
151
return f'<script type="math/tex">{html.escape(latex)}</script>'
152
```
153
154
```javascript
155
// Node.js example
156
function mathScript(latex, display = false) {
157
const mode = display ? '; mode=display' : '';
158
return `<script type="math/tex${mode}">${escapeHtml(latex)}</script>`;
159
}
160
```
161
162
### Processing Timing
163
164
The extension processes scripts immediately upon import:
165
166
```javascript
167
// All existing script elements are processed
168
import "katex/contrib/mathtex-script-type";
169
170
// For dynamically added content, re-import or process manually
171
function addMathScript(latex, container, display = false) {
172
const script = document.createElement('script');
173
script.type = `math/tex${display ? '; mode=display' : ''}`;
174
script.textContent = latex;
175
container.appendChild(script);
176
177
// Re-import to process new script
178
import("katex/contrib/mathtex-script-type");
179
}
180
```
181
182
### Integration with Other Extensions
183
184
Works alongside other KaTeX extensions:
185
186
```html
187
<script src="katex.js"></script>
188
<script src="katex/contrib/mhchem.js"></script>
189
<script src="katex/contrib/copy-tex.js"></script>
190
<script src="katex/contrib/mathtex-script-type.js"></script>
191
192
<!-- Now supports chemistry in script tags -->
193
<script type="math/tex; mode=display">
194
\ce{2H2 + O2 -> 2H2O}
195
</script>
196
197
<!-- And copy-tex works on the rendered output -->
198
```
199
200
### Dynamic Content Handling
201
202
For dynamically added content, manually trigger processing:
203
204
```javascript
205
import katex from "katex";
206
207
function processNewMathScripts(container) {
208
const scripts = container.querySelectorAll('script[type*="math/tex"]');
209
scripts.forEach(script => {
210
if (script.processed) return; // Avoid double-processing
211
212
const isDisplay = /mode\s*=\s*display/i.test(script.type);
213
const element = document.createElement(isDisplay ? 'div' : 'span');
214
element.className = isDisplay ? 'equation' : 'inline-equation';
215
216
try {
217
katex.render(script.textContent, element, { displayMode: isDisplay });
218
script.parentNode.replaceChild(element, script);
219
} catch (err) {
220
element.textContent = script.textContent;
221
script.parentNode.replaceChild(element, script);
222
}
223
224
script.processed = true;
225
});
226
}
227
228
// Use with AJAX content
229
fetch('/api/math-content')
230
.then(response => response.text())
231
.then(html => {
232
const container = document.getElementById('content');
233
container.innerHTML = html;
234
processNewMathScripts(container);
235
});
236
```
237
238
### Legacy System Migration
239
240
Ideal for migrating from MathJax script-based systems:
241
242
```html
243
<!-- MathJax-style (also works with this extension) -->
244
<script type="math/tex">x^2 + y^2 = z^2</script>
245
<script type="math/tex; mode=display">\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}</script>
246
247
<!-- No code changes needed for migration -->
248
```
249
250
### Security Considerations
251
252
- **Script content** is processed as TeX only, no JavaScript execution
253
- **Safe by design** - only mathematical content is rendered
254
- **XSS protection** - TeX parsing prevents script injection
255
- **Content isolation** - script contents are treated as plain text
256
257
### Browser Compatibility
258
259
The extension works in all modern browsers and requires:
260
261
- **DOM manipulation** APIs (standard since IE9)
262
- **Query selectors** for finding script elements
263
- **Basic JavaScript** for type checking and replacement
264
265
### Performance Notes
266
267
- **Processing occurs once** on import/page load
268
- **Minimal overhead** - only processes math/tex script elements
269
- **Memory efficient** - replaces scripts with rendered content
270
- **Cache friendly** - rendered content can be cached like any HTML
271
272
### Troubleshooting
273
274
**Scripts not being processed:**
275
- Ensure script type includes "math/tex" (case insensitive)
276
- Verify scripts are in document.body (not head)
277
- Check for JavaScript errors preventing extension loading
278
279
**Math not rendering properly:**
280
- Validate TeX syntax in script content
281
- Ensure KaTeX CSS is loaded
282
- Check browser console for specific rendering errors
283
284
**Display mode not working:**
285
- Include "mode=display" in script type
286
- Verify script type format: `type="math/tex; mode=display"`
287
- Check for typos in mode specification