md-to-html

MichaelVessia's avatarfrom MichaelVessia

Convert markdown to styled HTML for pasting into Google Docs. Use when the user wants to copy markdown (with tables, images, code blocks) into Google Docs or similar.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 9, 2026
[Document Processing]

When & Why to Use This Skill

This Claude skill streamlines the workflow between developer-centric Markdown files and collaborative platforms like Google Docs. It converts Markdown into professionally styled, self-contained HTML, ensuring that complex elements—including bordered tables, syntax-styled code blocks, and base64-embedded images—maintain their visual integrity and formatting during the copy-paste process.

Use Cases

  • Technical Documentation Sharing: Seamlessly transfer README files or technical specifications from a codebase into Google Docs for stakeholder review while preserving code block formatting and table structures.
  • Collaborative Content Drafting: Convert blog posts or articles written in Markdown into a rich-text format suitable for real-time editing, commenting, and collaboration within Google Workspace.
  • Internal Reporting: Transform data-heavy Markdown reports into visually polished documents with embedded images and clean CSS for professional presentations to non-technical teams.
  • Cross-Platform Formatting: Ensure consistent styling (fonts, margins, and accents) when moving content from local Markdown editors to web-based document editors via Safari or Chrome.
namemd-to-html
descriptionConvert markdown to styled HTML for pasting into Google Docs. Use when the user wants to copy markdown (with tables, images, code blocks) into Google Docs or similar.
allowed-toolsBash, Read

Markdown to HTML

Converts markdown files to self-contained, styled HTML optimized for copying into Google Docs. Tables get proper borders, code blocks are styled, and images are embedded.

Usage

Run the script via bunx:

bunx ~/nixos-config/modules/programs/claude-code/skills/md-to-html/md-to-html.ts "<markdown-file>"

What it does

  1. Converts markdown to HTML via pandoc (uses nix run if not installed)
  2. Applies clean, modern CSS (system fonts, bordered tables, styled code blocks)
  3. Embeds all images as base64 (self-contained)
  4. Opens the result in the default browser
  5. User can then Cmd+A, Cmd+C, paste into Google Docs

Output

  • Creates /tmp/<filename>.html
  • Opens in browser automatically

CSS Features

  • System fonts (SF Pro, Segoe UI, etc.)
  • Tables: auto-width, 1px borders, grey headers
  • Code blocks: light grey background, rounded corners
  • Blockquotes: left border accent
  • Images: max-width 100%
  • Reasonable max-width container (900px)

Notes

  • Requires pandoc (script will use nix run nixpkgs#pandoc as fallback)
  • Images in markdown must be accessible from the markdown file's directory
  • Best results when copying from Safari/Chrome to Google Docs