Javascript CommonMark.js Markdown Parser to HTML & PDF Using PDFMake Library in Browser

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown to PDF App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Markdown to PDF App</h1>
        <div class="form-group">
            <label for="markdownInput">Enter Markdown:</label>
            <textarea class="form-control" id="markdownInput" rows="10"></textarea>
        </div>
        <button class="btn btn-primary" id="button">Convert to PDF</button>
    </div>

    <!-- Include CommonMark for Markdown Parsing -->
    <script src="https://cdn.jsdelivr.net/npm/commonmark/dist/commonmark.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>

    <script>
        document.getElementById('button').addEventListener('click', () => {
            // Get the Markdown input
            const markdownInput = document.getElementById('markdownInput').value;

            // Use CommonMark to convert Markdown to HTML
            const reader = new commonmark.Parser();
            const writer = new commonmark.HtmlRenderer();
            const parsed = reader.parse(markdownInput); // Parse the Markdown content
            const htmlContent = writer.render(parsed); // Convert parsed content to HTML

            // Convert the HTML to a format that pdfMake understands using html-to-pdfmake
            const pdfContent = htmlToPdfmake(htmlContent);

            // Generate PDF content using pdfMake
            const docDefinition = {
                content: pdfContent
            };

            // Create and open the PDF
            pdfMake.createPdf(docDefinition).open();
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Markdown to PDF App</title>

</head>

<body>

<h1>Markdown to PDF App</h1>

<label for="markdownInput">Enter Markdown:</label>

</div>

<button class="btn btn-primary" id="button">Convert to PDF</button>

</div>

document.getElementById('button').addEventListener('click', () => {

// Get the Markdown input

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

// Use CommonMark to convert Markdown to HTML

const reader = new commonmark.Parser();

const writer = new commonmark.HtmlRenderer();

const parsed = reader.parse(markdownInput); // Parse the Markdown content

const htmlContent = writer.render(parsed); // Convert parsed content to HTML

// Convert the HTML to a format that pdfMake understands using html-to-pdfmake

const pdfContent = htmlToPdfmake(htmlContent);

// Generate PDF content using pdfMake

const docDefinition = {

content: pdfContent

};

// Create and open the PDF

pdfMake.createPdf(docDefinition).open();

});

</script>

</body>

</html>

Javascript CommonMark.js Markdown Parser to HTML & PDF Using PDFMake Library in Browser

Comments

Leave a Reply Cancel reply

Archives