Log inSign up
yawnxyz avatar
Public
HTTP
Fork
0 Likes
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Readme

HTML to Markdown Converter

This is a simple web application that converts HTML to Markdown. It provides a clean and efficient way to transform HTML content into Markdown format, which is widely used for documentation and content creation.

Features

  • Easy-to-use Interface: Simple textarea inputs for HTML and Markdown output.
  • Real-time Conversion: Converts HTML to Markdown instantly upon clicking the convert button.
  • Clean Output: Removes scripts, styles, and other non-content elements from the HTML before conversion.
  • Copy to Clipboard: One-click copying of the converted Markdown text.

How It Works

  1. The application uses the Hono framework to create a simple web server.
  2. HTMX is used for handling AJAX requests without writing JavaScript.
  3. Alpine.js provides reactivity for the clipboard functionality.
  4. The Turndown library is used to convert HTML to Markdown.

Usage

  1. Paste your HTML content into the "HTML Input" textarea.
  2. Click the "Convert to Markdown" button.
  3. The converted Markdown will appear in the "Markdown Output" textarea.
  4. Use the "Copy to Clipboard" button to easily copy the result.

Technical Details

  • The server removes <script>, <style>, and other non-content tags before conversion.
  • HTML comments are also stripped out.
  • The Markdown output is cleaned to remove excessive whitespace and newlines.

View Source

You can view the source code of this application by clicking the "View Source" link at the bottom of the page.

Limitations

  • The converter may not handle extremely complex HTML structures perfectly.
  • Some HTML elements might not have a direct Markdown equivalent.

Future Improvements

  • Add options for customizing the Markdown output format.
  • Implement file upload for HTML conversion.
  • Add support for converting Markdown back to HTML.

Feel free to use and modify this converter for your HTML to Markdown conversion needs!

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
/**
* This val creates a simple web interface using Hono framework to convert HTML to Markdown.
* It uses HTMX for dynamic updates and Alpine.js for reactivity.
* The Turndown library is used for HTML to Markdown conversion.
* The interface includes two text areas (input and output) and buttons for conversion and copying.
*/
import { Hono } from "https://esm.sh/hono";
import { html } from "https://esm.sh/hono/html";
import TurndownService from "https://esm.sh/turndown";
const app = new Hono();
app.get("/", (c) => {
return c.html(html`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML to Markdown Converter</title>
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
<script src="https://unpkg.com/alpinejs@3.12.2/dist/cdn.min.js" defer></script>
</head>
<body>
<div x-data="{ markdown: '' }">
<h1>HTML to Markdown Converter</h1>
<div>
<h2>HTML Input</h2>
<textarea id="html-input" name="html-input" rows="10" cols="50"></textarea>
</div>
<button hx-post="/convert" hx-trigger="click" hx-target="#markdown-output" hx-include="#html-input">
Convert to Markdown
</button>
<div>
<h2>Markdown Output</h2>
<textarea id="markdown-output" x-model="markdown" rows="10" cols="50" readonly></textarea>
</div>
<button @click="navigator.clipboard.writeText(markdown)">Copy to Clipboard</button>
<p>
<a href="${import.meta.url.replace("esm.town", "val.town")}">View Source</a>
</p>
</div>
</body>
</html>
`);
});
app.post("/convert", async (c) => {
try {
const body = await c.req.text();
const params = new URLSearchParams(body);
let html = params.get("html-input");
if (typeof html !== "string") {
return c.text("Invalid input: HTML must be a string");
}
// Remove script tags and their contents
html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
// Remove style tags and their contents
html = html.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, "");
// Remove other non-content tags
html = html.replace(/<(meta|link|input|br|hr)[^>]*>/gi, "");
// Remove comments
html = html.replace(/<!--[\s\S]*?-->/g, "");
const turndownService = new TurndownService();
const markdown = turndownService.turndown(html);
// Trim whitespace and remove extra newlines
const cleanedMarkdown = markdown.trim().replace(/\n{3,}/g, "\n\n");
return c.text(cleanedMarkdown);
} catch (error) {
console.error("Error in /convert:", error);
return c.text(`An error occurred: ${error.message}`);
}
});
export default async function server(req: Request): Promise<Response> {
return app.fetch(req);
}
yawnxyz-turnitdown.web.val.run
August 23, 2024