GitHub Markdown CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.css">

import "github-markdown-css/github-markdown.css";

<!-- Auto theme (switches between light/dark based on system preference) -->
<link rel="stylesheet" href="node_modules/github-markdown-css/github-markdown.css">

<!-- Light theme only -->
<link rel="stylesheet" href="node_modules/github-markdown-css/github-markdown-light.css">

<!-- Dark theme only -->
<link rel="stylesheet" href="node_modules/github-markdown-css/github-markdown-dark.css">

<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;
    }
  }
</style>
<article class="markdown-body">
  <h1>Your Markdown Content</h1>
  <p>All markdown elements will be styled to match GitHub's appearance.</p>
</article>

/* Auto theme file - switches based on system preference */
github-markdown.css

/* Light theme only */
github-markdown-light.css

/* Dark theme only */
github-markdown-dark.css

.markdown-body {
  /* Base typography and layout styles */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  /* Color scheme and theming */
  color-scheme: light; /* or dark in theme-specific files */
}

[data-theme="light"] {
  /* Forces light theme regardless of system preference */
}

[data-theme="dark"] {
  /* Forces dark theme regardless of system preference */
}

/* Base sizing variables */
--base-size-4: 0.25rem;
--base-size-8: 0.5rem;
--base-size-16: 1rem;
--base-size-24: 1.5rem;
--base-size-40: 2.5rem;

/* Font weight variables */
--base-text-weight-normal: 400;
--base-text-weight-medium: 500;
--base-text-weight-semibold: 600;

/* Font stack variables */
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

/* Color variables (theme-dependent) */
--fgColor-default: /* Primary text color */;
--fgColor-muted: /* Secondary text color */;
--fgColor-accent: /* Accent color (links, highlights) */;
--fgColor-success: /* Success state color */;
--fgColor-attention: /* Warning/attention color */;
--fgColor-danger: /* Error/danger color */;
--fgColor-done: /* Completed state color */;

--bgColor-default: /* Primary background color */;
--bgColor-muted: /* Secondary background color */;
--bgColor-neutral-muted: /* Neutral muted background */;
--bgColor-attention-muted: /* Muted attention background */;

--borderColor-default: /* Primary border color */;
--borderColor-muted: /* Secondary border color */;
--borderColor-accent-emphasis: /* Emphasized accent border */;
--borderColor-success-emphasis: /* Emphasized success border */;
--borderColor-attention-emphasis: /* Emphasized attention border */;
--borderColor-danger-emphasis: /* Emphasized danger border */;
--borderColor-done-emphasis: /* Emphasized done border */;

/* Syntax highlighting variables */
--color-prettylights-syntax-comment: /* Code comment color */;
--color-prettylights-syntax-constant: /* Code constant color */;
--color-prettylights-syntax-entity: /* Code entity color */;
--color-prettylights-syntax-keyword: /* Code keyword color */;
--color-prettylights-syntax-string: /* Code string color */;
--color-prettylights-syntax-variable: /* Code variable color */;
--color-prettylights-syntax-brackethighlighter-unmatched: /* Unmatched bracket color */;
--color-prettylights-syntax-brackethighlighter-angle: /* Angle bracket color */;
--color-prettylights-syntax-invalid-illegal-text: /* Invalid code text color */;
--color-prettylights-syntax-invalid-illegal-bg: /* Invalid code background color */;
--color-prettylights-syntax-carriage-return-text: /* Carriage return text color */;
--color-prettylights-syntax-carriage-return-bg: /* Carriage return background color */;

/* Typography elements */
.markdown-body h1, .markdown-body h2, .markdown-body h3, 
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  /* Heading styles with proper spacing and typography */
}

.markdown-body p {
  /* Paragraph styling with appropriate margins */
}

.markdown-body a {
  /* Link styling with hover states and focus indicators */
}

.markdown-body strong, .markdown-body b {
  /* Bold text styling */
}

.markdown-body em, .markdown-body i {
  /* Italic text styling */
}

.markdown-body code {
  /* Inline code styling with background and padding */
}

.markdown-body pre {
  /* Code block container styling */
}

.markdown-body pre code {
  /* Code block content styling with syntax highlighting support */
}

/* List elements */
.markdown-body ul, .markdown-body ol {
  /* Unordered and ordered list styling */
}

.markdown-body li {
  /* List item styling with proper indentation */
}

.markdown-body dl, .markdown-body dt, .markdown-body dd {
  /* Definition list styling */
}

/* Table elements */
.markdown-body table {
  /* Table styling with borders and spacing */
}

.markdown-body thead, .markdown-body tbody, .markdown-body tfoot {
  /* Table section styling */
}

.markdown-body tr {
  /* Table row styling with alternating backgrounds */
}

.markdown-body th, .markdown-body td {
  /* Table cell styling with padding and alignment */
}

/* Media elements */
.markdown-body img {
  /* Image styling with responsive behavior */
}

.markdown-body figure, .markdown-body figcaption {
  /* Figure and caption styling */
}

/* Interactive elements */
.markdown-body details, .markdown-body summary {
  /* Collapsible content styling */
}

.markdown-body input, .markdown-body textarea, 
.markdown-body select, .markdown-body button {
  /* Form element styling */
}

/* Special GitHub elements */
.markdown-body .octicon {
  /* GitHub icon styling */
}

.markdown-body .anchor {
  /* Heading anchor link styling */
}

.markdown-body .markdown-alert {
  /* Alert container styling */
}

.markdown-body .markdown-alert-note,
.markdown-body .markdown-alert-tip,
.markdown-body .markdown-alert-important,
.markdown-body .markdown-alert-warning,
.markdown-body .markdown-alert-caution {
  /* Different alert type styling */
}

.markdown-body .markdown-alert-title {
  /* Alert title styling */
}

/* Task list elements */
.markdown-body .task-list-item {
  /* Task list item styling with disabled list markers */
}

.markdown-body .task-list-item-checkbox {
  /* Checkbox styling for task lists with proper spacing */
}

.markdown-body .contains-task-list {
  /* Container for task lists with interactive behaviors */
}

/* Footnote elements */
.markdown-body [data-footnote-ref] {
  /* Footnote reference link styling with bracket indicators */
}

.markdown-body .footnotes {
  /* Footnote section styling with smaller font and top border */
}

/* Data display elements */
.markdown-body .csv-data {
  /* CSV/tabular data display styling */
}

.markdown-body .emoji {
  /* Emoji display styling */
}

@media (prefers-color-scheme: dark) {
  /* Automatic dark theme activation */
  .markdown-body, [data-theme="dark"] {
    color-scheme: dark;
    /* Dark theme color variable definitions */
  }
}

@media (prefers-color-scheme: light) {
  /* Automatic light theme activation */
  .markdown-body, [data-theme="light"] {
    color-scheme: light;
    /* Light theme color variable definitions */
  }
}

@media (max-width: 767px) {
  /* Responsive adjustments for mobile devices */
  .markdown-body {
    /* Reduced padding and adjusted spacing for mobile */
  }
}

.markdown-body .task-list-item {
  list-style-type: none;
}

.markdown-body .task-list-item-checkbox {
  margin: 0 .2em .25em -1.4em;
  vertical-align: middle;
}

.markdown-body .contains-task-list {
  /* Container for interactive task list behaviors */
}

[data-footnote-ref]::before {
  content: "[";
}

[data-footnote-ref]::after {
  content: "]";
}

.markdown-body .footnotes {
  font-size: 12px;
  color: var(--fgColor-muted);
  border-top: 1px solid var(--borderColor-default);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GitHub Markdown CSS Example</title>
  <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;
      }
    }
  </style>
</head>
<body>
  <article class="markdown-body">
    <h1>Sample Document</h1>
    <p>This content will be styled to match GitHub's Markdown appearance.</p>
    
    <h2>Code Example</h2>
    <pre><code class="language-javascript">
function hello() {
  console.log("Hello, world!");
}
    </code></pre>
    
    <h2>Table Example</h2>
    <table>
      <thead>
        <tr>
          <th>Feature</th>
          <th>Supported</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Typography</td>
          <td>✅</td>
        </tr>
        <tr>
          <td>Code Highlighting</td>
          <td>✅</td>
        </tr>
      </tbody>
    </table>
  </article>
</body>
</html>

<!-- Force light theme -->
<article class="markdown-body" data-theme="light">
  <h1>Always Light Theme</h1>
  <p>This content will always use the light theme.</p>
</article>

<!-- Force dark theme -->
<article class="markdown-body" data-theme="dark">
  <h1>Always Dark Theme</h1>
  <p>This content will always use the dark theme.</p>
</article>

<!-- Auto theme (default behavior) -->
<article class="markdown-body">
  <h1>Auto Theme</h1>
  <p>This content will switch themes based on system preference.</p>
</article>

.markdown-body {
  /* Override specific color variables */
  --fgColor-accent: #ff6b6b; /* Custom accent color */
  --borderColor-default: #e1e8ed; /* Custom border color */
}

.custom-theme.markdown-body {
  /* Create a completely custom theme */
  --fgColor-default: #2c3e50;
  --bgColor-default: #ecf0f1;
  --fgColor-accent: #3498db;
}

// Using with marked.js
import { marked } from 'marked';
import 'github-markdown-css/github-markdown.css';

const markdown = '# Hello World\nThis is **bold** text.';
const html = marked(markdown);

document.getElementById('content').innerHTML = `
  <div class="markdown-body">
    ${html}
  </div>
`;

import React from 'react';
import 'github-markdown-css/github-markdown.css';

function MarkdownRenderer({ children, theme = 'auto' }) {
  const dataTheme = theme !== 'auto' ? { 'data-theme': theme } : {};
  
  return (
    <div 
      className="markdown-body"
      {...dataTheme}
      style={{
        boxSizing: 'border-box',
        minWidth: '200px',
        maxWidth: '980px',
        margin: '0 auto',
        padding: '45px',
      }}
      dangerouslySetInnerHTML={{ __html: children }}
    />
  );
}

// Gatsby gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-postcss',
      options: {
        postCssPlugins: [
          require('postcss-import')({
            path: ['node_modules/github-markdown-css']
          })
        ]
      }
    }
  ]
};

// In your CSS file
@import 'github-markdown.css';

.content {
  @apply markdown-body;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
}

<article class="markdown-body">
  <h2>Todo List</h2>
  <ul class="contains-task-list">
    <li class="task-list-item">
      <input type="checkbox" class="task-list-item-checkbox" checked disabled> 
      Completed task
    </li>
    <li class="task-list-item">
      <input type="checkbox" class="task-list-item-checkbox" disabled> 
      Pending task
    </li>
    <li class="task-list-item enabled">
      <label>
        <input type="checkbox" class="task-list-item-checkbox"> 
        Interactive task (can be clicked)
      </label>
    </li>
  </ul>
</article>

<article class="markdown-body">
  <p>
    This is a paragraph with a footnote reference<a href="#footnote-1" data-footnote-ref>1</a>.
  </p>
  
  <section class="footnotes">
    <ol>
      <li id="footnote-1">This is the footnote content with detailed explanation.</li>
    </ol>
  </section>
</article>