Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sh20raj/showdowncss
Hey there! Welcome to ShowdownCSS, the CSS library made for styling Markdown content parsed by Showdown! 🚀
https://github.com/sh20raj/showdowncss
markdowncss sh20raj showdown showdowncss showdownjs
Last synced: 16 days ago
JSON representation
Hey there! Welcome to ShowdownCSS, the CSS library made for styling Markdown content parsed by Showdown! 🚀
- Host: GitHub
- URL: https://github.com/sh20raj/showdowncss
- Owner: SH20RAJ
- License: mit
- Created: 2024-04-14T12:26:31.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-06-28T16:35:31.000Z (6 months ago)
- Last Synced: 2024-06-28T18:01:19.213Z (6 months ago)
- Topics: markdowncss, sh20raj, showdown, showdowncss, showdownjs
- Language: CSS
- Homepage: https://sh20raj.github.io/ShowdownCSS/
- Size: 20.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ShowdownCSS 🎨
[](https://github.com/SH20RAJ/ShowdownCSS/blob/main/LICENSE)
[](https://github.com/SH20RAJ/ShowdownCSS/stargazers)
[](https://github.com/SH20RAJ/ShowdownCSS/issues)
[](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2FSH20RAJ%2FShowdownCSS)
[](https://www.jsdelivr.com/package/gh/SH20RAJ/ShowdownCSS)
Hey there! Welcome to ShowdownCSS, the CSS library made for styling Markdown content parsed by Showdown! 🚀
Spice up your Markdown content! 🔥
## Features
- Styling for Markdown elements like headers, paragraphs, lists, code blocks, blockquotes, tables, links, and horizontal rules.
- Different themes available, with the default one provided.
## Installation
You can include ShowdownCSS in your project using a CDN:
```html
```
## Usage 🤓
1. First, make sure you have a Markdown file ready to go! 📄
2. Include ShowdownCSS in your HTML file:
```html
```
3. Wrap your Markdown content in a div with the class `.showdowncontainer`:
```html
```
4. That's it! 🎉 Your Markdown content inside `.showdowncontainer` will now be styled beautifully by ShowdownCSS!
## Example 🌈
Here's a quick example of how to use ShowdownCSS:
> You can also use version specific cdn like `https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@d13e0cf619eaf668450c40fcf71afb9691f7e051/showdown.css` -> Create it from [jsDelivr](https://www.jsdelivr.com/github).
```html
ShowdownCSS Example
Hello, Markdown! 👋
This is **bold** and this is *italic*.
- Item 1
- Item 2
- Item 3
This is a blockquote. 🗣️
function hello() {
console.log("Hello, World!");
}
That's it! Your Markdown is now styled! 🎉
```
## Themes 🎨
ShowdownCSS comes with different themes for your Markdown content. You can easily switch themes by including the theme CSS file:
### Default Theme
The default theme is applied automatically when you include `showdown.css`.
### Dark Theme
To use the Dark Theme, include the following CSS file:
See Demo on [Codepen](https://codepen.io/SH20RAJ/pen/QWRrvBj)
```html
```
### Custom Themes
ShowdownCSS welcomes contributions! If you're eager to add your own theme, feel free to contribute to the project by adding your theme file to the `themes` directory.
### Live Demo:
Check out the live demo on [CodePen](https://codepen.io/SH20RAJ/pen/vYMapOr?editors=1000) or visit our [GitHub repository](https://github.com/SH20RAJ/ShowdownCSS) or [Dev.to post](https://dev.to/sh20raj/showdowncss-style-html-created-by-showdownjs-2lia) to learn more, explore the themes, and contribute your own ideas. 🌈
### Demo 🌐
Check out the [demo](https://sh20raj.github.io/ShowdownCSS/) to see ShowdownCSS in action! - (https://sh20raj.github.io/ShowdownCSS/)_
## About the Author 💡
ShowdownCSS is created with ❤️ by [Sh Raj](https://twitter.com/SH20RAJ).
If you have any feedback, suggestions, or questions, feel free to reach out on Twitter [@sh20raj](https://twitter.com/SH20RAJ)!
Enjoy your beautifully styled Markdown with ShowdownCSS! 🌟