Skip to content

Hey there! Welcome to ShowdownCSS, the CSS library made for styling Markdown content parsed by Showdown! πŸš€

License

Notifications You must be signed in to change notification settings

SH20RAJ/ShowdownCSS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

10 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

ShowdownCSS 🎨

License GitHub stars GitHub issues Visitors

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 πŸ€“

  1. First, make sure you have a Markdown file ready to go! πŸ“„

  2. Include ShowdownCSS in your HTML file:

    <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">
    </head>
  3. Wrap your Markdown content in a div with the class .showdowncontainer:

    <div class="showdowncontainer">
      <!-- Your Markdown content goes here! -->
    </div>
  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.

<!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 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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/themes/dark-theme.css">

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 or visit our GitHub repository or Dev.to post to learn more, explore the themes, and contribute your own ideas. 🌈

Demo 🌐

Check out the demo to see ShowdownCSS in action! - (https://sh20raj.github.io/ShowdownCSS/)_

About the Author πŸ’‘

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

About

Hey there! Welcome to ShowdownCSS, the CSS library made for styling Markdown content parsed by Showdown! πŸš€

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages