Systems

Markdown to HTML Converter in One Click from Clipboard to Clipboard

Clicking on the Markdown box pastes text from the clipboard, automatically converts it to HTML, and copies the resulting HTML back to the clipboard.

Head Section

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Markdown to HTML Converter</title>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>

Body Section

<body>

 <h2>Markdown to HTML Converter</h2>

 <!-- Input area for Markdown text -->
 <textarea id="markdown-input" placeholder="Click here to paste from clipboard..." rows="10" style="width: 100%;" onclick="pasteAndConvert()"></textarea>

 <!-- Output area for HTML result -->
 <h3>HTML Output (automatically copied):</h3>
 <textarea id="html-output" readonly rows="10" style="width: 100%;"></textarea>

 <script>
 // Function to paste content from the clipboard, convert to HTML, and copy HTML to clipboard
 async function pasteAndConvert() {
 try {
 // Paste clipboard text into the Markdown input
 const text = await navigator.clipboard.readText();
 const markdownInput = document.getElementById("markdown-input");
 markdownInput.value = text;

 // Convert the pasted Markdown to HTML
 const htmlOutput = marked.parse(text);

 // Display the HTML in the output box
 document.getElementById("html-output").value = htmlOutput;

 // Copy the HTML output to the clipboard
 await copyToClipboard(htmlOutput);

 // Notify the user
 alert("HTML output has been copied to clipboard!");
 } catch (err) {
 alert("Failed to read clipboard contents: " + err);
 }
 }

 // Helper function to copy text to clipboard
 async function copyToClipboard(text) {
 try {
 await navigator.clipboard.writeText(text);
 } catch (err) {
 console.error("Failed to copy text to clipboard: ", err);
 }
 }
 </script>

</body>

Explanation

pasteAndConvert(): This function runs when you click on the Markdown input box.

  • It reads the clipboard content and pastes it into the Markdown box.

  • It converts the pasted Markdown to HTML using marked.parse(text).

  • It copies the converted HTML back to the clipboard and alerts the user.

copyToClipboard(): A helper function that copies text to the clipboard, used to ensure that the HTML output is copied back smoothly.

Now, you can click on the Markdown box, and it will:

  • Paste clipboard content into the Markdown box.

  • Convert it to HTML.

  • Automatically copy the HTML output back to the clipboard and notify you that it’s done.