Marked.js Markdown Parser Tutorial to Compile MD to HTML & PDF Using PDFMake.js in Javascript

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 id="markdownInput" class="form-control" rows="10"></textarea>
        </div>
        <button id="button" class="btn btn-primary">Export to PDF</button>
    </div>


    <!-- Include marked for Markdown Parsing -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.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>
</body>
<script>
    document.getElementById('button').addEventListener('click',() => {
        let markdownInput = document.getElementById('markdownInput').value

        // use the marked.js parser library

        const htmlContent = marked.parse(markdownInput)

        console.log(htmlContent)
        
        const pdfContent = htmlToPdfmake(htmlContent)

        const docDefinition = {
            content:pdfContent
        }

        pdfMake.createPdf(docDefinition).open()

    })
</script>
</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 id="button" class="btn btn-primary">Export to PDF</button>

</div>

</body>

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

let markdownInput = document.getElementById('markdownInput').value

// use the marked.js parser library

const htmlContent = marked.parse(markdownInput)

console.log(htmlContent)

const pdfContent = htmlToPdfmake(htmlContent)

const docDefinition = {

content:pdfContent

}

pdfMake.createPdf(docDefinition).open()

})

</script>

</html>

Marked.js Markdown Parser Tutorial to Compile MD to HTML & PDF Using PDFMake.js in Javascript

Comments

Leave a Reply Cancel reply

Archives