Skip to content

Commit 77911b1

Browse files
b64encodeb64encode
authored
Create html-to-markdown
1 parent 6ea0239 commit 77911b1

1 file changed

Lines changed: 150 additions & 0 deletions

File tree

‎html-to-markdown‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
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>HTML to Markdown Converter</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>body {
9+
font-family: 'Arial', sans-serif;
10+
background-color: #f4f4f4;
11+
margin: 0;
12+
padding: 20px;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
min-height: 100vh;
17+
}
18+
19+
.container {
20+
background-color: white;
21+
border-radius: 10px;
22+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23+
width: 100%;
24+
max-width: 800px;
25+
padding: 30px;
26+
}
27+
28+
h1 {
29+
text-align: center;
30+
color: #333;
31+
margin-bottom: 20px;
32+
}
33+
34+
.converter-box {
35+
display: flex;
36+
flex-direction: column;
37+
}
38+
39+
.input-section, .output-section {
40+
margin-bottom: 20px;
41+
}
42+
43+
textarea {
44+
width: 100%;
45+
min-height: 200px;
46+
resize: vertical;
47+
padding: 10px;
48+
border: 1px solid #ddd;
49+
border-radius: 5px;
50+
font-family: monospace;
51+
}
52+
53+
.button-section {
54+
display: flex;
55+
justify-content: center;
56+
gap: 10px;
57+
margin-bottom: 20px;
58+
}
59+
60+
button {
61+
background-color: #4CAF50;
62+
color: white;
63+
border: none;
64+
padding: 10px 20px;
65+
border-radius: 5px;
66+
cursor: pointer;
67+
transition: background-color 0.3s ease;
68+
}
69+
70+
button:hover {
71+
background-color: #45a049;
72+
}
73+
74+
#copyBtn {
75+
background-color: #2196F3;
76+
margin-top: 10px;
77+
}
78+
79+
#copyBtn:hover {
80+
background-color: #1E88E5;
81+
}
82+
83+
@media (max-width: 600px) {
84+
.container {
85+
width: 95%;
86+
padding: 15px;
87+
}
88+
}
89+
90+
</style>
91+
</head>
92+
<body>
93+
<div class="container">
94+
<h1>HTML to Markdown Converter</h1>
95+
<div class="converter-box">
96+
<div class="input-section">
97+
<h2>Input HTML</h2>
98+
<textarea id="htmlInput" placeholder="Paste your HTML here..."></textarea>
99+
</div>
100+
<div class="button-section">
101+
<button id="convertBtn">Convert →</button>
102+
<button id="clearBtn">Clear</button>
103+
</div>
104+
<div class="output-section">
105+
<h2>Markdown Output</h2>
106+
<textarea id="markdownOutput" readonly placeholder="Markdown will appear here..."></textarea>
107+
<button id="copyBtn">Copy Markdown</button>
108+
</div>
109+
</div>
110+
</div>
111+
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
112+
<script src="script.js">document.addEventListener('DOMContentLoaded', () => {
113+
const htmlInput = document.getElementById('htmlInput');
114+
const markdownOutput = document.getElementById('markdownOutput');
115+
const convertBtn = document.getElementById('convertBtn');
116+
const clearBtn = document.getElementById('clearBtn');
117+
const copyBtn = document.getElementById('copyBtn');
118+
119+
// Initialize Turndown converter
120+
const turndownService = new TurndownService();
121+
122+
// Convert HTML to Markdown
123+
convertBtn.addEventListener('click', () => {
124+
try {
125+
const html = htmlInput.value;
126+
const markdown = turndownService.turndown(html);
127+
markdownOutput.value = markdown;
128+
} catch (error) {
129+
alert('Error converting HTML to Markdown: ' + error.message);
130+
}
131+
});
132+
133+
// Clear inputs
134+
clearBtn.addEventListener('click', () => {
135+
htmlInput.value = '';
136+
markdownOutput.value = '';
137+
});
138+
139+
// Copy Markdown to clipboard
140+
copyBtn.addEventListener('click', () => {
141+
markdownOutput.select();
142+
document.execCommand('copy');
143+
alert('Markdown copied to clipboard!');
144+
});
145+
});
146+
147+
</script>
148+
</body>
149+
</html>
150+

0 commit comments

Comments
 (0)