DOCSEARCHbyAlgolia
Submit Docs

github-markdown-css

repository·main·Indexed 27 days ago

https://github.com/sindresorhus/github-markdown-css

A minimal CSS library (version 5.9.0) to replicate the GitHub Markdown style on any website. It provides seven different themes, including light, dark, and colorblind options, and supports GitHub-style alerts and syntax highlighting classes. Styles are applied by adding the .markdown-body class to a container element.

Tokens
1.2K
Snippets
3
Records
9
Agent score
44%

What's inside github-markdown-css

  2. Use github-markdown-css in your project

    main

    To apply GitHub-style Markdown styling, import github-markdown.css and add the markdown-body class to the container element holding your rendered Markdown.

    Note: You must manually set the width and padding for the .markdown-body container to match GitHub's layout (typically 980px max-width and 45px padding, with 15px padding for mobile).

    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="github-markdown.css">
<style>
	.markdown-body {
		box-sizing: border-box;
		min-width: 200px;
		max-width: 980px;
		margin: 0 auto;
		padding: 45px;
	}

	@media (max-width: 767px) {
		.markdown-body {
			padding: 15px;
		}
	}

	@media (prefers-color-scheme: dark) {
		body {
			background-color: #0d1117;
		}
	}
</style>
<article class="markdown-body">
	<h1>Unicorns</h1>
	<p>All the things</p>
</article>

  4. Customize themes using [data-theme]

    main

    The stylesheet supports explicit light and dark themes via the data-theme attribute. This allows you to force a specific theme regardless of the user's system preference.

    • Use [data-theme="light"] for light mode.
    • Use [data-theme="dark"] for dark mode.

    Alternatively, the styles automatically respond to the user's system settings via the prefers-color-scheme media query.

  5. Fix styling issues by avoiding quirks mode

    main

    If you encounter styling issues (e.g., tables in dark mode rendering black fonts), ensure your HTML document is not running in quirks mode. Always include a <!doctype html> declaration at the very top of your page.

    <!doctype html>
<html lang="en"><head></head><body
></body></html>

  6. Available CSS themes

    main

    The package provides 7 different themes depending on your color scheme requirements:

    • github-markdown.css: (default) Automatically switches between light and dark using @media (prefers-color-scheme).
    • github-markdown-light.css: Light-only theme.
    • github-markdown-dark.css: Dark-only theme.
    • github-markdown-dark-dimmed.css: Dark dimmed theme.
    • github-markdown-dark-high-contrast.css: Dark high contrast theme.
    • github-markdown-dark-colorblind.css: Dark theme optimized for Protanopia & Deuteranopia.
    • github-markdown-light-colorblind.css: Light theme optimized for Protanopia & Deuteranopia.

  7. Reference syntax highlighting classes

    main

    The stylesheet provides specific classes for syntax highlighting, compatible with many common highlighters (like Prism or Highlight.js). These classes are prefixed with .markdown-body .pl-:

    • .pl-c: Comment
    • .pl-k: Keyword
    • .pl-s: String
    • .pl-v: Variable
    • .pl-ent: Entity/Tag
    • .pl-mi: Italic
    • .pl-mb: Bold
    • .pl-md: Deleted text (with background)
    • .pl-mi1: Inserted text (with background)
    • .pl-mc: Changed text (with background)

  8. Use Markdown Alert styles

    main

    The stylesheet includes support for GitHub-style alerts (admonitions). These are styled using the .markdown-alert class and specific modifier classes to indicate the type of alert:

    • .markdown-alert-note: Uses accent colors.
    • .markdown-alert-important: Uses 'done' (purple) colors.
    • .markdown-alert-warning: Uses attention (yellow/orange) colors.
    • .markdown-alert-tip: Uses success (green) colors.
    • .markdown-alert-caution: Uses danger (red) colors.

    Each alert should contain a child element with the class .markdown-alert-title for the header text.

  9. Override styles using CSS variables

    main

    You can customize the appearance of the Markdown content by overriding the CSS custom properties (variables) defined within .markdown-body.

    Commonly used variables include:

    • --fgColor-default: The primary text color.
    • --bgColor-default: The primary background color.
    • --fgColor-accent: The color for links and accents.
    • --borderColor-default: The color for borders (e.g., in tables or horizontal rules).
    • --fontStack-sansSerif: The font stack for standard text.
    • --fontStack-monospace: The font stack for code blocks.

    Note that many variables change values depending on whether the theme is light or dark.