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 additiona…


This content originally appeared on DEV Community and was authored by Sh Raj

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>

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.


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.


This content originally appeared on DEV Community and was authored by Sh Raj


Print Share Comment Cite Upload Translate Updates
APA

Sh Raj | Sciencx (2024-06-26T15:15:54+00:00) How to Add Custom CSS to Plain HTML Generated by ShowdownJS Using ShowdownCSS. Retrieved from https://www.scien.cx/2024/06/26/how-to-add-custom-css-to-plain-html-generated-by-showdownjs-using-showdowncss-3/

MLA
" » How to Add Custom CSS to Plain HTML Generated by ShowdownJS Using ShowdownCSS." Sh Raj | Sciencx - Wednesday June 26, 2024, https://www.scien.cx/2024/06/26/how-to-add-custom-css-to-plain-html-generated-by-showdownjs-using-showdowncss-3/
HARVARD
Sh Raj | Sciencx Wednesday June 26, 2024 » How to Add Custom CSS to Plain HTML Generated by ShowdownJS Using ShowdownCSS., viewed ,<https://www.scien.cx/2024/06/26/how-to-add-custom-css-to-plain-html-generated-by-showdownjs-using-showdowncss-3/>
VANCOUVER
Sh Raj | Sciencx - » How to Add Custom CSS to Plain HTML Generated by ShowdownJS Using ShowdownCSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/26/how-to-add-custom-css-to-plain-html-generated-by-showdownjs-using-showdowncss-3/
CHICAGO
" » How to Add Custom CSS to Plain HTML Generated by ShowdownJS Using ShowdownCSS." Sh Raj | Sciencx - Accessed . https://www.scien.cx/2024/06/26/how-to-add-custom-css-to-plain-html-generated-by-showdownjs-using-showdowncss-3/
IEEE
" » How to Add Custom CSS to Plain HTML Generated by ShowdownJS Using ShowdownCSS." Sh Raj | Sciencx [Online]. Available: https://www.scien.cx/2024/06/26/how-to-add-custom-css-to-plain-html-generated-by-showdownjs-using-showdowncss-3/. [Accessed: ]
rf:citation
» How to Add Custom CSS to Plain HTML Generated by ShowdownJS Using ShowdownCSS | Sh Raj | Sciencx | https://www.scien.cx/2024/06/26/how-to-add-custom-css-to-plain-html-generated-by-showdownjs-using-showdowncss-3/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.