-
-
Notifications
You must be signed in to change notification settings - Fork 40
/
markdown-math.html
125 lines (110 loc) · 3.79 KB
/
markdown-math.html
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown and Math Live Renderer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.3/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.3/contrib/auto-render.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.3/katex.min.css">
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
textarea {
width: 100%;
height: 200px;
margin-bottom: 20px;
}
#output, #html-output {
border: 1px solid #ddd;
padding: 10px;
background-color: #f9f9f9;
margin-bottom: 20px;
}
#html-output {
height: 200px;
overflow-y: auto;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
textarea {
font-size: 16px;
width: calc(100% - 1em);
}
</style>
</head>
<body>
<h1>Markdown and Math Live Renderer</h1>
<textarea id="input" placeholder="Enter your Markdown and LaTeX here...">
# Welcome to the Markdown and Math Renderer!
This example demonstrates how to use **Markdown** with inline and block *math* equations.
## Inline Math
The quadratic formula is $ax^2 + bx + c = 0$. Its solution is given by:
## Block Math
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
## List with Math
1. First item
2. Second item with inline math: $E = mc^2$
3. Third item
## Table with Math
| Operation | Symbol | Example |
|-----------|--------|---------|
| Addition | $+$ | $2 + 2 = 4$ |
| Subtraction | $-$ | $5 - 3 = 2$ |
| Multiplication | $\times$ | $3 \times 4 = 12$ |
Enjoy rendering your Markdown and Math!</textarea>
<h2>Preview:</h2>
<div id="output"></div>
<h2>Generated HTML:</h2>
<textarea id="html-output" readonly></textarea>
<button id="copy-button">Copy HTML</button>
<script>
const input = document.getElementById('input');
const output = document.getElementById('output');
const htmlOutput = document.getElementById('html-output');
const copyButton = document.getElementById('copy-button');
function renderContent() {
const markdown = input.value;
const html = marked.parse(markdown);
output.innerHTML = html;
htmlOutput.value = output.innerHTML;
renderMathInElement(output, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false}
],
throwOnError: false
});
const copied = output.cloneNode(true);
Array.from(copied.querySelectorAll('.katex-html')).forEach(el => {
el.parentNode.removeChild(el);
});
htmlOutput.value = copied.innerHTML;
}
input.addEventListener('input', renderContent);
copyButton.addEventListener('click', () => {
htmlOutput.select();
document.execCommand('copy');
copyButton.textContent = 'Copied!';
setTimeout(() => {
copyButton.textContent = 'Copy HTML';
}, 2000);
});
renderContent();
</script>
</body>
</html>