Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/bloggify/showdown-highlight
- Owner: Bloggify
- License: mit
- Created: 2017-06-28T14:30:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-09-18T11:22:59.000Z (about 2 years ago)
- Last Synced: 2024-10-28T13:57:00.296Z (16 days ago)
- Topics: hacktoberfest, highlight, markdown, showdown
- Language: JavaScript
- Homepage:
- Size: 93.8 KB
- Stars: 54
- Watchers: 4
- Forks: 18
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
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