or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-github-markdown-css

CSS library that replicates GitHub's Markdown rendering styles with automatic, light, and dark theme variants

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/github-markdown-css@5.8.x

To install, run

npx @tessl/cli install tessl/npm-github-markdown-css@5.8.0

GitHub Markdown CSS

GitHub Markdown CSS provides CSS stylesheets that replicate GitHub's Markdown rendering styles for use in web applications and static sites. It offers three theme variations: an automatic theme that switches between light and dark modes, a dedicated light theme, and a dedicated dark theme.

Package Information

Package Name: github-markdown-css
Package Type: npm
Language: CSS
Installation: npm install github-markdown-css

Core Imports

HTML Import (CDN)

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

Module Import (Bundlers)

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

Direct CSS Files

<!-- 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">

Basic Usage

<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>

Architecture

GitHub Markdown CSS is built around several key components:

Core Class: .markdown-body container class that scopes all styling
CSS Custom Properties: Extensive use of CSS variables for theming and consistency
Media Queries: Automatic theme switching using prefers-color-scheme
Data Attributes: Manual theme override with [data-theme] attributes
Responsive Design: Built-in mobile optimizations and responsive behavior

Capabilities

CSS Files

Three CSS files providing different theming approaches for GitHub Markdown styling.

/* 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

Primary Container Class

The main CSS class that must be applied to HTML elements containing Markdown content.

.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 */
}

Theme Control

Manual theme selection using data attributes.

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

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

CSS Custom Properties (Variables)

Comprehensive theming system using CSS custom properties.

/* 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 */;

Styled HTML Elements

Comprehensive styling for all standard Markdown HTML elements when used within .markdown-body.

/* 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 Queries

Automatic theme switching and responsive design.

@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 */
  }
}

Task Lists

GitHub-style task lists with interactive checkboxes for todo items and completed tasks.

.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 */
}

Footnotes

GitHub-style footnotes with reference links and footnote sections.

[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);
}

Usage Examples

Basic Implementation

<!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>

Theme Selection

<!-- 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>

CSS Variable Customization

.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;
}

Integration with Markdown Parsers

// 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>
`;

React Integration

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 }}
    />
  );
}

Static Site Generator Integration

// 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;
}

Task Lists

<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>

Footnotes

<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>

Version

Tile

Files

tessl/npm-github-markdown-css

To install, run

index.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

GitHub Markdown CSS

Package Information

Core Imports

HTML Import (CDN)

Module Import (Bundlers)

Direct CSS Files

Basic Usage

Architecture

Capabilities

CSS Files

Primary Container Class

Theme Control

CSS Custom Properties (Variables)

Styled HTML Elements

Media Queries

Task Lists

Footnotes

Usage Examples

Basic Implementation

Theme Selection

CSS Variable Customization

Integration with Markdown Parsers

React Integration

Static Site Generator Integration

Task Lists

Footnotes

index.mddocs/