π¨ ShowdownCSS: The Stylish Way to Showcase Your Markdown Content! π
Hey Dev Community! π
Looking for a seamless way to style your Markdown content with beautiful CSS? Look no further! π
SH20RAJ
/
ShowdownCSS
Hey there! Welcome to ShowdownCSS, the CSS library made for styling Markdown content parsed by Showdown! π
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:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">
Usage π€
-
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β¦
What is ShowdownCSS?
ShowdownCSS is a lightweight CSS library designed specifically for styling Markdown content parsed by Showdown. With ShowdownCSS, you can effortlessly enhance your Markdown files with stylish themes and elegant designs, making your content truly stand out. π₯
Features:
- Easy Integration: Simply include ShowdownCSS in your project using a CDN link.
- Multiple Themes: Choose from a variety of themes or create your own to match your style.
- Customizable: Tweak the styles to fit your project's unique aesthetic.
- Responsive: Designed to look great on all devices, from desktops to mobile screens.
Getting Started:
- Include ShowdownCSS in your HTML file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">
- 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!
Example:
Here's a quick example of how to use ShowdownCSS:
<!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>
Themes:
ShowdownCSS offers a range of themes to choose from, including a default theme and a dark theme. You can easily switch themes by including the respective CSS file.
- Default Theme: Automatically applied when you include
showdown.css. - Dark Theme: Include the dark theme CSS file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/themes/dark-theme.css">
Get Started Today!
Ready to make your Markdown content shine? Get started with ShowdownCSS today! Visit our GitHub repository to learn more, explore the themes, and contribute your own ideas. π
Live Demo:
Check out the live demo on CodePen or visit our GitHub repository to learn more, explore the themes, and contribute your own ideas. π
About the Creator:
ShowdownCSS is created with β€οΈ by Sh Raj. Feel free to reach out on Twitter @sh20raj with any feedback, suggestions, or questions!
Try it Out!
Check out the live demo here to see ShowdownCSS in action!
Let's elevate your Markdown content with ShowdownCSS! πβ¨
Top comments (0)