JS Markdown Rendering

Dynamically fetching and rendering markdown content in the browser.

jcorpac 2488d01 937 B Updated

File contents

JS Markdown Rendering

By rendering markdown in the browser, you can maintain a single index.html while serving dozens of dynamic "pages."

Core Workflow

  1. Fetching: Use the fetch() API to retrieve .md files from relative paths.
  2. Parsing: Use a lightweight parser like marked.js to convert markdown strings to HTML.
  3. Injection: Set the innerHTML of a container element to display the result.

Performance

  • Lazy Fetching: Only load the markdown file when the user clicks its link.
  • Syntax Highlighting: Use Prism.js or Highlight.js for beautiful code snippets.

Best Practices

  • Routing: Sync the rendered content with the URL hash (e.g., #/git-mastery/atomic-commits).
  • Escaping: Ensure untrusted markdown is sanitized if coming from external sources.

jcorpac/ai-skills-library/tree/main/ui/js-markdown-rendering commit 2488d011c6

Frequently asked questions

npx skillmds@latest add jcorpac/js-markdown-rendering