The Palos Publishing Company

Categories We Write About

Render Markdown previews in browser

Written by

Bernardo Palos

in

To render Markdown previews in a browser, you can follow these steps depending on what you’re using:

1. Using Markdown Preview in Text Editors (VS Code, Sublime, etc.):

  • VS Code:

    1. Open your .md file.

    2. Click on the “Open Preview to the Side” button on the top-right of the editor, or press Ctrl+Shift+V.

    3. You’ll see a live-rendered preview of your Markdown document.

  • Sublime Text:

    1. You can install the MarkdownEditing plugin to enable Markdown support.

    2. Then, use a Markdown preview plugin, like MarkdownPreview, to view the file in your browser.

2. Online Markdown Previewers:

  • Websites like Dillinger or StackEdit allow you to write and preview Markdown directly in the browser.

3. Using Browser Extensions:

You can use browser extensions that automatically render Markdown files:

  • Markdown Viewer (available for Chrome and Firefox) will render .md files as you open them in the browser.

4. GitHub or GitLab:

If your Markdown file is hosted on a Git repository, you can simply open the .md file in GitHub or GitLab to view it rendered. These platforms render Markdown files automatically.

5. Render with JavaScript (for custom solutions):

If you need to render Markdown on a personal webpage, you can use libraries like Showdown.js or Marked.js to convert Markdown into HTML on the fly.

Example using Marked.js:

html
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
  <textarea id="markdown" placeholder="Write Markdown here..."></textarea>
  <div id="preview"></div>

  <script>
    document.getElementById('markdown').addEventListener('input', function() {
      const markdownText = this.value;
      document.getElementById('preview').innerHTML = marked(markdownText);
    });
  </script>
</body>
</html>

In this example, you write the Markdown in a textarea, and as you type, the content is rendered into HTML in real-time in the div with the id “preview”.

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About