Md-reader

About

Md-reader — is an HTML template that lets you use Markdown for writing the content of the page. It uses markdown-it library to parse the content and convert it to HTML right on the client's browser. Also since the markdown is written inside pre and noscript tags, browser will show the raw markdown if javascript is turned off. Here is the template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Md-reader example</title>
    <meta name="color-scheme" content="light dark">
    <link
      rel="stylesheet"
      href="https://800147.github.io/document/src/document.css"
    >
    <script
      type="module"
      src="https://800147.github.io/document/src/md-reader.js"
    ></script>
  </head>
  <body>
    <pre>
      <noscript>

# Title

Some text with [link](./) or _other formatting_

      </noscript>
    </pre>
  </body>
</html>

And the short one that excludes optional tags:

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Md-reader example</title>
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="https://800147.github.io/document/src/document.css">
<script type="module" src="https://800147.github.io/document/src/md-reader.js"></script>
<pre><noscript>

# Title

Some text with [link](./) or _other formatting_

</noscript></pre>

As you can see, the Document.css styles are applied here. Md-reader works with it properly (sets Document class on body tag)

How it looks

Here is the example of how it looks in browser:

example page

Sources

The sources can be found on Github:

sources on Github