mcpField
M
md-render

md-render

github.com/hjewkesDocuments468 installsUpdated 36w ago
Repository

About md-render

A CLI skill that renders Markdown files as dark-mode HTML and can open the result in a browser. It supports configurable styling, diagrams, code highlighting, and standalone HTML output for agent-generated documents.

Key features

  1. 01Render Markdown to HTML
  2. 02Open rendered pages in a browser
  3. 03Save HTML or read stdin
  4. 04Configurable colors, fonts, and layout
  5. 05Mermaid diagrams and code highlighting
  6. 06Responsive layout and interactive contents

Use cases

  1. 01Previewing plans and reports
  2. 02Saving Markdown as an HTML file
  3. 03Viewing documents with diagrams and code

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hjewkes/agent-skills --skill md-render

After installing, type/md-renderin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

package-lock.json
package.json
defaults/
config.json
scripts/
md-render
src/
render.mjs
templates/
page.html

Details

From the project README

Markdown Renderer

Render markdown files as beautiful dark-mode HTML and open them in the browser. Designed for viewing agent-generated documents (design docs, plans, reports).

Quick Reference

SituationAction
User asks to render/preview markdownRun md-render <file>
User wants HTML output savedRun md-render <file> -o output.html
User wants to customize stylingEdit ~/.config/agent-skills/md-render/config.json
User asks to pipe markdownecho "# Title" | md-render -

CLI Reference

CommandDescription
md-render file.mdRender and open in browser
md-render - < file.mdRender from stdin
md-render file.md -o out.htmlSave HTML to file
md-render file.md --no-openGenerate HTML without opening browser
md-render -c path.json file.mdUse alternate config
md-render --helpShow usage

Exit codes: 0 = success, 1 = error

Rendering Features

  • Dark-mode aesthetic with configurable colors, fonts, and sizing
  • Collapsible table of contents (inline and slide-out panel)
  • Syntax-highlighted code blocks with copy-to-clipboard button
  • Copy full markdown source button (top-right)
  • Clickable heading anchors (hover to reveal)
  • Mermaid diagram rendering (flowcharts, sequence diagrams, state diagrams, pie charts)
  • Task list checkboxes, footnotes, ==highlights==, subscript/super^script^
  • Emoji shortcodes (:rocket: :white_check_mark:)
  • Custom attributes via {#id .class}
  • Responsive layout
  • Self-contained HTML (mermaid uses CDN when enabled)

Configuration

Config location: ~/.config/agent-skills/md-render/config.json

Created automatically on first run from defaults. Edit to customize:

  • theme — colors, fonts, sizing, max-width
  • features — toggle toc, syntax highlighting, heading anchors, mermaid, browser open

Comments

Markdown supported