ShowdownCSS: Style HTML created by ShowdownJS
Tags: showdown, markdown, showdowncss, css
Published: 2024-04-14 12:53:03

🎨 **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! 🌟

{% github https://github.com/SH20RAJ/ShowdownCSS %}



### 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:

1. Include ShowdownCSS in your HTML file:

   ```html
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">
   ```

2. Wrap your Markdown content in a div with the class `.showdowncontainer`:

   ```html
   <div class="showdowncontainer">
     <!-- Your Markdown content goes here! -->
   </div>
   ```

3. 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:

```html
<!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:

   ```html
   <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](https://github.com/SH20RAJ/ShowdownCSS) to learn more, explore the themes, and contribute your own ideas. 🌈

### 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) to learn more, explore the themes, and contribute your own ideas. 🌈

### About the Creator:

ShowdownCSS is created with ❤️ by [Sh Raj](https://twitter.com/SH20RAJ). Feel free to reach out on Twitter [@sh20raj](https://twitter.com/SH20RAJ) with any feedback, suggestions, or questions!

### Try it Out!

Check out the live demo [here](https://sh20raj.github.io/ShowdownCSS/) to see ShowdownCSS in action!

{% codepen https://codepen.io/SH20RAJ/pen/vYMapOr %}

Let's elevate your Markdown content with ShowdownCSS! 🚀✨