Improve Emacs Markdown Preview Styling
Improve Emacs Markdown Preview Styling
Agent
Claude Code
Model
Claude Opus 4.6
Shared
Feb 13, 4:34 PM
Messages35
this directory contains my emacs configuration. the template for my emacs config is @dotemacs_template
a thing that i have set up is applying some custom CSS when I generate HTML previews of markdown documents. the github-like CSS was done shabbily (by me!) and I would like to use the CSS from https://github.com/sindresorhus/github-markdown-css instead.
can you hook it all up please
Let me look at the current CSS and fetch the replacement.
Let me check the current CSS file and how markdown-mode generates its HTML.
Now I understand the setup. The sindresorhus CSS targets .markdown-body class, but markdown-mode puts content directly in <body>. I need to:
<article class="markdown-body">Now update the emacs config to wrap the markdown preview content in a <article class="markdown-body"> element so the CSS selectors match.
Done. Here's what I changed:
github.css - Replaced the old hand-rolled CSS (normalize.css v3 + custom GitHub-ish styles) with the full sindresorhus/github-markdown-css. This includes light/dark mode support via prefers-color-scheme. I added a small body { padding: 30px } rule at the top so the preview isn't edge-to-edge.
dotemacs_template (lines 364-366) - Added markdown-xhtml-body-preamble and markdown-xhtml-body-epilogue to wrap the preview content in <article class="markdown-body">, which is what the sindresorhus CSS targets. The CSS file path (markdown-css-paths) was already correct.
hmm this is really good!!! one thing: in dark mode, there is a 30px padding that is still white (which I think is from the browser reset). any way to fix that?
Sure, just need to set the body background to match the dark mode background.
That sets the body background to match the --bgColor-default values from the dark (#0d1117) and light (#ffffff) themes, so the padding area blends seamlessly.
holy shit, that's tight. nice work.
Thanks! Enjoy the upgraded markdown previews.
are there any other options you'd recommend I use with cmark-gfm?
You're missing two useful extensions that cmark-gfm supports:
strikethrough - renders ~~text~~ as tasklist - renders - [ ] / - [x] as actual checkboxes (and the sindresorhus CSS you just added already has styles for .task-list-item)Want me to add them?
yes!
Done.
TIGHT
🤘