https://github.com/timelytree/showdown-classify

Extension for ShowdownJS that wraps markdown input with syntax that outputs a <div /> with a class while still rendering the inner markdown formatting
https://github.com/timelytree/showdown-classify

javascript showdown

Last synced: 8 days ago
JSON representation

Extension for ShowdownJS that wraps markdown input with syntax that outputs a <div /> with a class while still rendering the inner markdown formatting

• Host: GitHub
• URL: https://github.com/timelytree/showdown-classify
• Owner: timelytree
• Created: 2017-03-31T00:30:50.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-01T00:51:42.000Z (almost 8 years ago)
• Last Synced: 2024-12-09T16:15:15.320Z (24 days ago)
• Topics: javascript, showdown
• Language: JavaScript
• Homepage:
• Size: 1.95 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
### classify

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](https://github.com/showdownjs) - a fantastic open-source, javascript-based markdown parser - that gives you the ability to wrap markdown text in a `
` with a class while still being able to process markdown inside the `
`.


### How to use

Begin by including classify inside your website's `` tag, after showdown.js

```html

```

### Enabling the extension

Once the extension is included, you can enable it when a new showdown Converter is initialized:

```javascript

var converter = new showdown.Converter({

  extensions: ['classify'],

  // optionA: true,

  // optionB: false

});

```

### Example use case

This extension introduces a new piece of syntax to markdown itself. Using this will allow you to wrap markdown input inside a `
` 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:

```javascript

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:

```html



  
Garlic Toast

  


    
Toast some bread

    
Scrape fresh garlic onto bread

    
Dip into olive oil

  



```


## License

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 :)