I have an HTML file and a text in markdown. There is a way to import this markdown into the HTML file and mantaining the markdown format? I've tried with iframe,emble and import tags inside the main tag and it didn`t work. Does anybody knows how to solve this problem ? None of the proposed solutions here in stackoverflow solved my problem someone could help-me ?

Thanks guys

Edited: I'm using: markdown-it, showdown. https://github.com/markdown-it/markdown-it

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>

   

      <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
      <script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js" integrity="sha512-L03kznCrNOfVxOUovR6ESfCz9Gfny7gihUX/huVbQB9zjODtYpxaVtIaAkpetoiyV2eqWbvxMH9fiSv5enX7bw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.js" integrity="sha512-bvV1V1YSjP1fbfKJjTlNmdnUO2XpsLYUdKwmz5UXBi5U x40rx9JpA0ooQUMZfpz1MaaBC0ydNLoC6r0sitPUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  </head>
  <body>
    <header></header>
    <main>
      <pre class="hljs"><code>
    <embed type="text/txt" src="markdown.txt" height="100%"> 
         <link rel="text/txt" href="markdown.txt"    height="100%">
      </code></pre>
    </main>
    <footer></footer>
  </body>
</html>

CodePudding user response：

Problem

You have two sub-problems here:

How do you get the Markdown content from the external resource?
How do you convert the Markdown content into HTML and render it into the page?

For your first problem, it looks like you've attempted to use iframe, embed and object to fetch the Markdown content. Ignoring the specific problems of each element, the common problem between them is you can't convert the fetched content into HTML. I'm not actually certain as to what the browser will try to do when the source is specified as a Markdown file – they'll probably all just try to render the plain text, but I haven't read the spec or tested this.

The second problem doesn't require any additional explanation.

Solution

You can use fetch to fetch your Markdown content and read the response stream into text (response.text()). With this text you can pass it to your Markdown library and render the output HTML to your page. Below is a demo:

const md = window.markdownit();

fetch('https://raw.githubusercontent.com/markdown-it/markdown-it/master/README.md')
  .then((response) => response.text())
  .then((text) => {
    document.getElementById('output').innerHTML = md.render(text);
  })

<link href="https://unpkg.com/@picocss/[email protected]/css/pico.slim.min.css" rel="stylesheet"/>
<div id="output"></div>
<script src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script>