https://github.com/jcbhmr/ghmd.css

🎨 Make your webpage look like a GitHub Markdown document
https://github.com/jcbhmr/ghmd.css

css css-theme dark-theme gfm github github-markdown light-theme markdown style theme

Last synced: 23 days ago
JSON representation

🎨 Make your webpage look like a GitHub Markdown document

• Host: GitHub
• URL: https://github.com/jcbhmr/ghmd.css
• Owner: jcbhmr
• License: mit
• Created: 2023-09-21T14:59:29.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-22T20:49:26.000Z (over 2 years ago)
• Last Synced: 2025-06-13T11:58:05.071Z (11 months ago)
• Topics: css, css-theme, dark-theme, gfm, github, github-markdown, light-theme, markdown, style, theme
• Language: SCSS
• Homepage: https://jcbhmr.me/ghmd.css
• Size: 623 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# `ghmd.css`

🎨 Make your webpage look like a GitHub Markdown document



  



## Installation

The recommended way to use this project is on an existing HTML page to apply a

basic GitHub-like style to Markdown-like HTML content. This is similar to other

[classless CSS themes] like [MVP.css], [Water.css], [new.css], etc.

```html

```

You can also install this CSS theme as a dependency in your project using npm,

[pnpm], [Yarn] or your favorite Node.js package manager. Note that all the

styles are **global** and will affect all elements on the page. You can mitigate

this by using a [shadow root] if you do want to scope the CSS to a specific

component.

```sh

npm install ghmd.css

```

## Usage

Just write normal HTML! `
`, `
`, `
`, etc. all get styled to match the

GitHub Markdown style.


```html

Hello world!

This is a list of things:



  
One

  
Two

  
Three



```


![](https://i.imgur.com/iNrqPQX.png)

If you're feeling adventurous, you can use a Markdown ➡ HTML converter like

[marked] to dynamically show Markdown content on your page in the GitHub

Markdown style.

```html

  import { marked } from "https://esm.run/marked@9";

  const response = await fetch("https://example.com/README.md");

  const text = await response.text();

  const html = marked(text);

  document.body.innerHTML = html;

```

For more advanced usage, you can scope the globally applied CSS using the

[shadow DOM] with a [shadow root].

```html



  
Hello world!

  
This is a list of things:

  


    
One

    
Two

    
Three

  



  const div = document.getElementById("markdown");

  const shadow = div.attachShadow({ mode: "open" });

  const link = document.createElement("link");

  link.rel = "stylesheet";

  link.href = "https://unpkg.com/ghmd.css@1";

  shadow.append(link);

  shadow.append(...div.childNodes);

```

If you're using [React], [react-shadow-root] is good abstraction over the manual

JavaScript shown above. For [Vue], you can use the [vue-shadow-dom].

[marked]: https://marked.js.org/

[classless CSS themes]: https://github.com/topics/classless

[MVP.css]: https://andybrewer.github.io/mvp/

[Water.css]: https://watercss.kognise.dev/

[new.css]: https://newcss.net/

[pnpm]: https://pnpm.io/

[Yarn]: https://yarnpkg.com/

[shadow DOM]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

[shadow root]: https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

[React]: https://reactjs.org/

[Vue]: https://vuejs.org/

[react-shadow-root]: https://apearce.github.io/react-shadow-root/

[vue-shadow-dom]: https://npmjs.com/package/vue-shadow-dom