Hey there! Welcome to ShowdownCSS, the CSS library made for styling Markdown content parsed by Showdown! 🚀
Spice up your Markdown content! 🔥
- Styling for Markdown elements like headers, paragraphs, lists, code blocks, blockquotes, tables, links, and horizontal rules.
- Different themes available, with the default one provided.
You can include ShowdownCSS in your project using a CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">-
First, make sure you have a Markdown file ready to go! 📄
-
Include ShowdownCSS in your HTML file:
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css"> </head>
-
Wrap your Markdown content in a div with the class
.showdowncontainer:<div class="showdowncontainer"> <!-- Your Markdown content goes here! --> </div>
-
That's it! 🎉 Your Markdown content inside
.showdowncontainerwill now be styled beautifully by ShowdownCSS!
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ShowdownCSS Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">
</head>
<body>
<div class="showdowncontainer">
<h1>Hello, Markdown! 👋</h1>
<p>This is **bold** and this is *italic*.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<blockquote>This is a blockquote. 🗣️</blockquote>
<pre><code class="language-javascript">function hello() {
console.log("Hello, World!");
}</code></pre>
<p>That's it! Your Markdown is now styled! 🎉</p>
</div>
</body>
</html>ShowdownCSS comes with different themes for your Markdown content. You can easily switch themes by including the theme CSS file:
The default theme is applied automatically when you include showdown.css.
To use the Dark Theme, include the following CSS file:
See Demo on Codepen
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/themes/dark-theme.css">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.
Check out the live demo on CodePen or visit our GitHub repository or Dev.to post to learn more, explore the themes, and contribute your own ideas. 🌈
Check out the demo to see ShowdownCSS in action! - (https://sh20raj.github.io/ShowdownCSS/)_
ShowdownCSS is created with ❤️ by Sh Raj.
If you have any feedback, suggestions, or questions, feel free to reach out on Twitter @sh20raj!
Enjoy your beautifully styled Markdown with ShowdownCSS! 🌟