How to Add Custom CSS to Plain HTML Generated by ShowdownJS Using ShowdownCSS
Tags: showdowncss, showdownjs
Published: 2024-06-26 15:15:54

# How to Add Custom CSS to Plain HTML Generated by ShowdownJS Using ShowdownCSS

Markdown is a popular markup language among developers for its simplicity and ease of use. However, turning Markdown into well-styled HTML often requires additional CSS to make it visually appealing. ShowdownJS is a powerful JavaScript library that converts Markdown to HTML. ShowdownCSS is a CSS library designed to enhance the styling of HTML generated by ShowdownJS. In this article, we'll explore how to add custom CSS to plain HTML generated by ShowdownJS using ShowdownCSS.

## Prerequisites

Before we get started, ensure you have the following:

1. Basic understanding of HTML, CSS, and JavaScript.
2. A text editor or IDE (such as VSCode).
3. A web browser to test your HTML files.

## Step 1: Setting Up Your Project

Create a new directory for your project and open it in your text editor. Inside this directory, create an `index.html` file and a `styles.css` file.

## Step 2: Include ShowdownJS and ShowdownCSS

To use ShowdownJS and ShowdownCSS, you need to include them in your HTML file. You can do this by adding the following CDN links to the `<head>` section of your `index.html` file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown to HTML with ShowdownJS and ShowdownCSS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/ShowdownCSS@main/showdown.css">
    <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="showdowncontainer" id="content"></div>
    <script src="script.js"></script>
</body>
</html>
```

In this example, we include the CDN for ShowdownJS and ShowdownCSS, as well as our custom `styles.css` for additional styling.

## Step 3: Write Your Markdown Content

Create a new file named `content.md` and add your Markdown content to it. For example:

```markdown
# Hello, Markdown!

This is **bold** text and this is *italic* text.

## Lists

- Item 1
- Item 2
- Item 3

> This is a blockquote.

```javascript
function hello() {
    console.log("Hello, World!");
}
```

## Step 4: Convert Markdown to HTML Using ShowdownJS

Create a new file named `script.js` and add the following JavaScript code to convert the Markdown content to HTML using ShowdownJS:

```javascript
document.addEventListener('DOMContentLoaded', function () {
    fetch('content.md')
        .then(response => response.text())
        .then(markdown => {
            const converter = new showdown.Converter();
            const html = converter.makeHtml(markdown);
            document.getElementById('content').innerHTML = html;
        });
});
```

This script fetches the Markdown content from `content.md`, converts it to HTML using ShowdownJS, and inserts the generated HTML into the `div` with the class `.showdowncontainer`.

## Step 5: Adding Custom CSS

Open your `styles.css` file and add your custom styles. These styles will be applied on top of the styles provided by ShowdownCSS. For example:

```css
/* Custom styles for Markdown content */
.showdowncontainer {
    font-family: 'Arial, sans-serif';
    line-height: 1.6;
}

.showdowncontainer h1 {
    color: #3498db;
}

.showdowncontainer blockquote {
    border-left: 4px solid #3498db;
    padding-left: 10px;
    color: #7f8c8d;
}

.showdowncontainer pre {
    background: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
}

.showdowncontainer code {
    font-family: 'Courier New', Courier, monospace;
    background: #f4f4f4;
    padding: 2px 4px;
    border-radius: 3px;
}
```

These custom styles will enhance the appearance of your Markdown content. You can modify these styles or add more to suit your design preferences.

## Step 6: Testing Your Setup

Open the `index.html` file in your web browser. You should see your Markdown content converted to HTML and styled according to both ShowdownCSS and your custom CSS.

## Conclusion

By combining ShowdownJS and ShowdownCSS, you can easily convert Markdown to well-styled HTML. Adding custom CSS allows you to further customize the appearance of your content to match your project's design. This setup provides a flexible and powerful way to manage and style Markdown content on your web pages.