Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bloggify/showdown-highlight

:art: A Showdown extension for highlighting code blocks.
https://github.com/bloggify/showdown-highlight

hacktoberfest highlight markdown showdown

Last synced: 5 days ago
JSON representation

:art: A Showdown extension for highlighting code blocks.

Awesome Lists containing this project

README

        

# showdown-highlight

[![Version](https://img.shields.io/npm/v/showdown-highlight.svg)](https://www.npmjs.com/package/showdown-highlight) [![Downloads](https://img.shields.io/npm/dt/showdown-highlight.svg)](https://www.npmjs.com/package/showdown-highlight)

> A Showdown extension for highlight the code blocks.

This package uses [`highlight.js`](https://highlightjs.org) to highlight code blocks in [Showdown](https://github.com/showdownjs/showdown) output. :rocket:

## :cloud: Installation

```sh
# Using npm
npm install --save showdown-highlight

# Using yarn
yarn add showdown-highlight
```

## :clipboard: Example

```js
const showdown = require('showdown')
, showdownHighlight = require("showdown-highlight")
;

// After requiring the module, use it as extension
let converter = new showdown.Converter({
// That's it
extensions: [showdownHighlight({
// Whether to add the classes to the

 tag, default is false

pre: true
// Whether to use hljs' auto language detection, default is true
, auto_detection: true
})]
});

// Now you can Highlight code blocks
let html = converter.makeHtml(`
## Highlighting Code with Showdown

Below we have a piece of JavaScript code:

\`\`\`js
function sayHello (msg, who) {
return \`\${who} says: msg\`;
}
sayHello("Hello World", "Johnny");
\`\`\`
`);

console.log(html);
//

Highlighting Code with Showdown


//
//

Below we have a piece of JavaScript code:


//
//
function sayHello (msg, who) {

// return `${who} says: msg`;
// }
// sayHello("Hello World", "Johnny");
//

```

## :question: Get Help

There are few ways to get help:

1. Please [post questions on Stack Overflow](https://stackoverflow.com/questions/ask). You can open issues with questions, as long you add a link to your Stack Overflow question.
2. For bug reports and feature requests, open issues. :bug:

## :memo: Documentation

### `showdownHighlight()`
Highlight the code in the showdown input.

Examples:

```js
let converter = new showdown.Converter({
extensions: [showdownHighlight]
})
```

Enable the classes in the `

` element:

```js
let converter = new showdown.Converter({
extensions: [showdownHighlight({ pre: true })]
})
```

If you want to disable language [auto detection](https://highlightjs.org/usage/)
feature of hljs, change `auto_detection` flag as `false`. With this option
turned off, `showdown-highlight` will not process any codeblocks with no
language specified.

```js
let converter = new showdown.Converter({
extensions: [showdownHighlight({ auto_detection: false })]
})
```

## :yum: How to contribute
Have an idea? Found a bug? See [how to contribute][contributing].

## :dizzy: Where is this library used?
If you are using this library in one of your projects, add it in this list. :sparkles:

- `mdpdf`
- `bloggify-markdown-highlight`
- `github-readme-to-html`
- `md-toy-blog`
- `@kev_nz/publisher`
- `@etermind/alex`
- `@siradoc/siradoc`
- `@web-native-js/chtml-cli`
- `swanky`
- `md-srv`
- `docset-tools-markdown`
- `callete`
- `teroshdl2`
- `ui_kitchenadmincenter`
- `trumpdoc`
- `@peersky/next-web3-chakra`
- `mdpdf_jm`
- `textbase`
- `teroshdl`
- `showdown-html`
- `busi-ui`
- `md-browse`
- `markdown2dash`
- `tutors-reader-lib`
- `tutors-html-beta`
- `tutors-html`
- `examma-ray`
- `steelsky`
- `chimpsky`
- `ember-showdown-highlight`
- `showit`
- `tutors-html-alpha`

## :scroll: License

[MIT][license] © [Bloggify][website]

[license]: /LICENSE
[website]: https://bloggify.org
[contributing]: /CONTRIBUTING.md
[docs]: /DOCUMENTATION.md