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:
- Basic understanding of HTML, CSS, and JavaScript.
- A text editor or IDE (such as VSCode).
- 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.
Top comments (0)