showdown-highlight

A Showdown extension for highlight the code blocks.

This package uses highlight.js to highlight code blocks in Showdown output. :rocket:

:cloud: Installation

# Using npm
npm install --save showdown-highlight

# Using yarn
yarn add showdown-highlight

:clipboard: Example

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 <pre> 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);
// <h2 id="highlightingcodewithshowdown">Highlighting Code with Showdown</h2>
//
// <p>Below we have a piece of JavaScript code:</p>
//
// <pre><code class="js language-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span> (<span class="hljs-params">msg, who</span>) </span>{
//     <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${who}</span> says: msg`</span>;
// }
// sayHello(<span class="hljs-string">"Hello World"</span>, <span class="hljs-string">"Johnny"</span>);
// </code></pre>

:question: Get Help

There are few ways to get help:

1. Please post questions on Stack Overflow. 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:

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

Enable the classes in the <pre> element:

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

If you want to disable language auto detection 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.

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

:yum: How to contribute

Have an idea? Found a bug? See how to contribute.

: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 © Bloggify