Mardown insertion in the mardown previewer project

Hello , I would like to know how insert the marked link in my html code that here is:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <textarea id="editor"></textarea>
    <div id="preview"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/lib/marked.esm.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
  • add these on “head” section

happy coding :slight_smile:

with link rel because with script it doesn’t work

You are using the esm build. With that you should be able to use your script as type="module" and then import the lib inside the script.

index.html

<script type="module" src="./script.js"></script>

script.js

import { marked } from "https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/lib/marked.esm.js";
console.log(marked);

Or just use the normal or umd versions.

I do like you have showed me but it doesn’ t work

Please be more specific than that. What isn’t working for you?

You have to serve the page. Use something like the Live Server VS Code extension.


Example code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Markdown</title>
  </head>
  <body>
    <textarea name="" id="markdown"></textarea>
    <div id="html"></div>
    <script type="module" src="./script.js"></script>
  </body>
</html>
import { marked } from "https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/lib/marked.esm.js";
const markdown = document.querySelector("#markdown");
const html = document.querySelector("#html");

markdown.addEventListener("input", () => {
  html.innerHTML = marked(markdown.value);
});

thank you it work now I forgot some items