Skip to content

Commit 112b427

Browse files
simonwsimonw
authored
Create markdown-math.html
https://gist.github.com/simonw/a6c23ba1c95613d41b98f432f273dd85
1 parent 4b7902d commit 112b427

File tree

1 file changed

+113
-0
lines changed

1 file changed

+113
-0
lines changed

‎markdown-math.html

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Markdown and Math Live Renderer</title>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.3/katex.min.js"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.3/contrib/auto-render.min.js"></script>
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.3/katex.min.css">
11+
<style>
12+
body {
13+
font-family: Arial, sans-serif;
14+
max-width: 800px;
15+
margin: 0 auto;
16+
padding: 20px;
17+
}
18+
textarea {
19+
width: 100%;
20+
height: 200px;
21+
margin-bottom: 20px;
22+
}
23+
#output, #html-output {
24+
border: 1px solid #ddd;
25+
padding: 10px;
26+
background-color: #f9f9f9;
27+
margin-bottom: 20px;
28+
}
29+
#html-output {
30+
height: 200px;
31+
overflow-y: auto;
32+
}
33+
button {
34+
padding: 10px 20px;
35+
background-color: #4CAF50;
36+
color: white;
37+
border: none;
38+
cursor: pointer;
39+
font-size: 16px;
40+
}
41+
button:hover {
42+
background-color: #45a049;
43+
}
44+
</style>
45+
</head>
46+
<body>
47+
<h1>Markdown and Math Live Renderer</h1>
48+
<textarea id="input" placeholder="Enter your Markdown and LaTeX here...">
49+
# Welcome to the Markdown and Math Renderer!
50+
51+
This example demonstrates how to use **Markdown** with inline and block *math* equations.
52+
53+
## Inline Math
54+
55+
The quadratic formula is $ax^2 + bx + c = 0$. Its solution is given by:
56+
57+
## Block Math
58+
59+
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
60+
61+
## List with Math
62+
63+
1. First item
64+
2. Second item with inline math: $E = mc^2$
65+
3. Third item
66+
67+
## Table with Math
68+
69+
| Operation | Symbol | Example |
70+
|-----------|--------|---------|
71+
| Addition | $+$ | $2 + 2 = 4$ |
72+
| Subtraction | $-$ | $5 - 3 = 2$ |
73+
| Multiplication | $\times$ | $3 \times 4 = 12$ |
74+
75+
Enjoy rendering your Markdown and Math!</textarea>
76+
<h2>Preview:</h2>
77+
<div id="output"></div>
78+
<h2>Generated HTML:</h2>
79+
<textarea id="html-output" readonly></textarea>
80+
<button id="copy-button">Copy HTML</button>
81+
82+
<script>
83+
const input = document.getElementById('input');
84+
const output = document.getElementById('output');
85+
const htmlOutput = document.getElementById('html-output');
86+
const copyButton = document.getElementById('copy-button');
87+
88+
function renderContent() {
89+
const markdown = input.value;
90+
const html = marked.parse(markdown);
91+
output.innerHTML = html;
92+
htmlOutput.value = output.innerHTML;
93+
renderMathInElement(output, {
94+
delimiters: [
95+
{left: "$$", right: "$$", display: true},
96+
{left: "$", right: "$", display: false}
97+
],
98+
throwOnError: false
99+
});
100+
}
101+
102+
input.addEventListener('input', renderContent);
103+
104+
copyButton.addEventListener('click', () => {
105+
htmlOutput.select();
106+
document.execCommand('copy');
107+
alert('HTML copied to clipboard!');
108+
});
109+
110+
renderContent();
111+
</script>
112+
</body>
113+
</html>

0 commit comments

Comments
 (0)