Javascript Turndown.js Example to Build HTML to Markdown Converter in Browser Full Web App

index.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>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="my-4">HTML to Markdown Converter</h1>
        
        <div class="row">
            <!-- HTML Input Section -->
            <div class="col-md-6">
                <h4>Enter HTML:</h4>
                <textarea id="htmlInput" class="form-control" rows="10" placeholder="Enter HTML code here..."></textarea>
            </div>
            
            <!-- Markdown Output Section -->
            <div class="col-md-6">
                <h4>Markdown Output:</h4>
                <textarea id="markdownOutput" class="form-control" rows="10" placeholder="Markdown output will appear here..." readonly></textarea>
            </div>
        </div>
    </div>

    <!-- Include Turndown for HTML to Markdown conversion -->
    <script src="https://unpkg.com/turndown/dist/turndown.js"></script>

    <script>
        // Initialize Turndown service
        var turndownService = new TurndownService();

        // Function to convert HTML to Markdown and update the output
        function convertHTMLtoMarkdown() {
            const htmlInput = document.getElementById('htmlInput').value;
            const markdownOutput = turndownService.turndown(htmlInput);
            document.getElementById('markdownOutput').value = markdownOutput;
        }

        // Event listener for live preview
        document.getElementById('htmlInput').addEventListener('input', convertHTMLtoMarkdown);
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTML to Markdown Converter</title>

</head>

<body>

<h1 class="my-4">HTML to Markdown Converter</h1>

<h4>Enter HTML:</h4>

</div>

<h4>Markdown Output:</h4>

</div>

// Initialize Turndown service

var turndownService = new TurndownService();

// Function to convert HTML to Markdown and update the output

function convertHTMLtoMarkdown() {

const htmlInput = document.getElementById('htmlInput').value;

const markdownOutput = turndownService.turndown(htmlInput);

document.getElementById('markdownOutput').value = markdownOutput;

}

// Event listener for live preview

document.getElementById('htmlInput').addEventListener('input', convertHTMLtoMarkdown);

</script>

</body>

</html>

Javascript Turndown.js Example to Build HTML to Markdown Converter in Browser Full Web App

Comments

Leave a Reply Cancel reply

Archives