Although markdown is a fantastic markup language out-of-the-box, there are times when one needs to be able to target specific sections of markdown output via css classes, primarily for more fine-tuned styling. classify is an extension created for ShowdownJS - a fantastic open-source, javascript-based markdown parser - that gives you the ability to wrap markdown text in a <div> with a class while still being able to process markdown inside the <div>.
Begin by including classify inside your website's <head> tag, after showdown.js
<script type="text/javascript" src="js/showdown.js"></script>
<script type="text/javascript" src="js/showdown-classify.js"></script>Once the extension is included, you can enable it when a new showdown Converter is initialized:
var converter = new showdown.Converter({
extensions: ['classify'],
// optionA: true,
// optionB: false
});This extension introduces a new piece of syntax to markdown itself. Using this will allow you to wrap markdown input inside a <div> with an identifying class of your choosing. The markdown inside the new tags will be rendered as well.
The syntax looks like this:
[tasty--]
## Header
1. Toast some bread
2. Scrape fresh garlic onto bread
3. Dip into olive oil
[--tasty]
Example input:
var converter = new showdown.Converter({extensions: ['classify']}),
markdownInput = `
[tasty--]
## Garlic Toast
1. Toast some bread
2. Scrape fresh garlic onto bread
3. Dip into olive oil
[--tasty]
`,
html = converter.makeHtml(markdownInput);This should output:
<div class="tasty">
<h2>Garlic Toast</h2>
<ol>
<li>Toast some bread</li>
<li>Scrape fresh garlic onto bread</li>
<li>Dip into olive oil</li>
</ol>
</div>You are free to use, re-use, modify, integrate, incorporate, get angry at, ponder, or jump for joy at the thought of this code in any way you see fit :)