JS Markdown Rendering
By rendering markdown in the browser, you can maintain a single index.html while serving dozens of dynamic "pages."
Core Workflow
- Fetching: Use the
fetch()API to retrieve.mdfiles from relative paths. - Parsing: Use a lightweight parser like
marked.jsto convert markdown strings to HTML. - Injection: Set the
innerHTMLof 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.jsorHighlight.jsfor 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.