How to include markdown (.md) files inside html files

My complete answer using Node.js

1. First install the marked markdown converter:

$ npm install --save-dev marked

2. Then in a new file called generateReadMe.js, compile the markdown to HTML and write it to a new README.html file:

var marked = require('marked');
var fs = require('fs');

var readMe = fs.readFileSync('README.md', 'utf-8');
var markdownReadMe = marked(readMe);

fs.writeFileSync('./site/README.html', markdownReadMe);

3. Then inside the index.html where the README.md content is wanted, add an <object> tag:

<object data="README.html" type="text/html"></object>

4. Then run this on the command line to make it happen:

$ node path/to/generateReadMe.js

The whole process was pretty simple and painless. I added the whole thing to my npm start script. Now any time I make a change to my README.md file, the changes will register on my gh-pages website.

I am using <zero-md> web component.

<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>

<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>

<!-- Simply set the `src` attribute to your MD file and win -->
<zero-md src="README.md"></zero-md>