DEV Community

Sh Raj
Sh Raj

Posted on • Originally published at article.shade.cool

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

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:

<!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>
Enter fullscreen mode Exit fullscreen mode

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:

# Hello, Markdown!

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

## Lists

- Item 1
- Item 2
- Item 3

> This is a blockquote.

Enter fullscreen mode Exit fullscreen mode


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:

Enter fullscreen mode Exit fullscreen mode


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:

Enter fullscreen mode Exit fullscreen mode


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.
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
sh20raj profile image
Sh Raj