https://github.com/jean-tinland/html-markdown.css
An HTML-to-Markdown CSS framework
https://github.com/jean-tinland/html-markdown.css
css framework html markdown
Last synced: 8 months ago
JSON representation
An HTML-to-Markdown CSS framework
- Host: GitHub
- URL: https://github.com/jean-tinland/html-markdown.css
- Owner: Jean-Tinland
- License: gpl-3.0
- Created: 2025-08-14T14:25:02.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-08-15T07:47:09.000Z (9 months ago)
- Last Synced: 2025-08-29T02:35:37.089Z (8 months ago)
- Topics: css, framework, html, markdown
- Language: HTML
- Homepage: https://www.jeantinland.com/toolbox/html-markdown-css/
- Size: 252 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# html-markdown.css
This simple CSS library provides a basic stylesheet making simple HTML elements look like Markdown.
It uses CSS `::before` and `::after` pseudo-elements to add the Markdown-like syntax around the elements.
Everything can be customized with CSS variables. Dark and light modes are supported by default thanks to the `light-dark()` CSS function and the `color-scheme` property.
Changelog is available [here](https://github.com/Jean-Tinland/html-markdown.css/blob/main/CHANGELOG.md).
## Preview
## Usage
Load the `html-markdown.css` stylesheet in your HTML file.
```html
```
Wrap your HTML iside a `main` element if you want to contain your content inside a centered layout.
```html
Title
This is a paragraph with bold and italic text.
```
## Customization
You can customize the styles by overriding the CSS variables provided by `html-markdown.css`.
Here are all the available CSS variables:
```css
:root {
--md-layout-width: 800px; /* Width of the main content area */
--md-layout-padding: 20px; /* Padding around the main content area */
--md-spacing: 1em; /* Spacing between elements */
/* Font */
--md-font-family: monospace; /* Font family for the content */
--md-font-size: 16px; /* Base font size */
--md-font-weight: 400; /* Base font weight */
--md-line-height: 1.65; /* Base line height for better readability */
/* Colors */
--md-background-light: #f8f8f2; /* Light background color */
--md-background-dark: #1e1e1e; /* Dark background color */
--md-background: light-dark(
var(--md-background-light),
var(--md-background-dark)
); /* Background color that adapts to light/dark mode */
--md-foreground-light: #1e1e1e; /* Light foreground color */
--md-foreground-dark: #f8f8f2; /* Dark foreground color */
--md-foreground: light-dark(
var(--md-foreground-light),
var(--md-foreground-dark)
); /* Foreground color that adapts to light/dark mode */
--md-grey: #7e7e7e; /* Neutral grey color */
--md-red: #e78482; /* Red color */
--md-green: #8fc8bb; /* Green color */
--md-yellow: #e0b972; /* Yellow color */
--md-orange: #ffb374; /* Orange color */
--md-blue: #6db3ce; /* Blue color */
--md-magenta: #ad82cb; /* Magenta color */
--md-cyan: #2fc2c3; /* Cyan color */
/* Content color customization */
--md-heading-color: var(--md-grey); /* Color for headings */
--md-strikethrough-color: var(--md-grey); /* Color for strikethrough text */
--md-code-color: var(--md-grey); /* Color for inline code */
--md-blockquote-color: var(--md-grey); /* Color for blockquotes */
--md-bold-color: var(--md-magenta); /* Color for bold text */
--md-italic-color: var(--md-cyan); /* Color for italic text */
--md-anchor-color: var(--md-yellow); /* Color for anchor links */
```