packages/hook-frontmatter/index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Marked hook frontmatter</title>
  </head>
  <body>
    <div id="content"></div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked-sequential-hooks/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moo/moo.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked-hook-frontmatter/dist/index.umd.min.js"></script>
    <script>
      const md = `---
title: Hello, world!
author: John Doe
---

# {title}

This is the main content of your Markdown file autored by **{author}**.
`

      document.getElementById("content").innerHTML = new marked.Marked()
        .use(
          markedSequentialHooks({
            markdownHooks: [markedHookFrontmatter()],
            htmlHooks: [
              (html, data) => {
                console.log(data)

                return html
                  .replace("{title}", data.title)
                  .replace("{author}", data.author)
              }
            ]
          })
        )
        .parse(md)
    </script>
  </body>
</html>