Improve Emacs Markdown Preview Styling

Summary

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

Now I understand the setup. The current CSS targets body directly because markdown-mode generates HTML with content directly in the <body> tag. The sindresorhus CSS targets .markdown-body class.

The cleanest approach is to:

Replace the CSS file with the sindresorhus version
Configure markdown-mode to wrap content in a <div class="markdown-body"> by setting markdown-xhtml-body-preamble and matching epilogue
Add some padding/margin on the body so it's not edge-to-edge

Let me also add a small wrapper CSS rule. Actually, looking at it more carefully, the simplest approach is:

I'll swap in the sindresorhus CSS file, add custom padding rules for the body, and configure the markdown-mode variables to wrap the content in an <article class="markdown-body"> element with the appropriate preamble and epilogue settings in the emacs config.

Now I understand the setup. The sindresorhus CSS targets .markdown-body class, but markdown-mode puts content directly in <body>. I need to:

Replace the CSS file with the sindresorhus version (plus a small body wrapper style)
Configure markdown-mode to wrap content in <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.

The user wants to replace their current github.css file with the CSS from the sindresorhus/github-markdown-css project. Let me look at what they currently have and understand the setup.

From the template file, I can see on line 363:

elisp

So the markdown preview uses a CSS file at __DIR__/github.css in the dotemacs directory.

Let me first check what the current github.css looks like, and then fetch the CSS from the sindresorhus repo.

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?

The user is asking about cmark-gfm options. Let me check what extensions and options are available. Currently they're using:

cmark-gfm --unsafe -e footnotes -e autolink -e table

cmark-gfm supports these extensions:

table - GFM tables (already enabled)
autolink - auto-linking URLs (already enabled)
footnotes - footnotes (already enabled)
strikethrough - ~~strikethrough~~ syntax
tagfilter - filters certain HTML tags
tasklist - GFM task list checkboxes (- [ ] and - [x])
strikethrough and tasklist would be the most useful additions since they're commonly used in markdown and the tasklist option would render checkboxes that work well with existing CSS stylesheets, while tagfilter is redundant given the --unsafe flag already allows all HTML through.

You're missing two useful extensions that cmark-gfm supports:

strikethrough - renders ~~text~~ as ~~strikethrough~~
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?

Let me look at the current CSS and fetch the replacement.

yes!

Done.

TIGHT

🤘

Now let me look at the current github.css to understand what's there, and also understand how the markdown preview works. The CSS from sindresorhus uses .markdown-body as the class selector. I need to check how markdown-mode generates HTML previews to make sure the class will be applied correctly.

Let me check the current github.css file and also think about how this integrates. The markdown-command is set to cmark-gfm --unsafe -e footnotes -e autolink -e table which generates HTML. The markdown-css-paths points to the CSS file. But the HTML generated by cmark-gfm won't have a markdown-body class on the body element by default.

I need to decide between wrapping the generated content in a div with the markdown-body class or modifying the CSS selectors. Since markdown-mode generates a full HTML page with the content in the body and links the CSS file, the simplest fix is to update the CSS to target body instead of .markdown-body, or add body as an additional selector alongside it.

Actually, the cleanest solution is to download the CSS as-is and use markdown-xhtml-body-preamble and markdown-xhtml-body-epilogue in the Emacs config to wrap the content with the markdown-body div—that way the CSS works exactly as intended without modification. Let me check the current github.css first to see what I'm working with.

Let me check the current CSS file and how markdown-mode generates its HTML.

Improve Emacs Markdown Preview Styling

Improve Emacs Markdown Preview StylingPublic

Summary

Full Raw CSS Content