Newlyweds Proposing Marriage

    TypeScript icon, indicating that this package has built-in type declarations

    3.1.0 • Public • Published


    Version Downloads

    A Showdown extension for highlight the code blocks.

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

    ☁️ Installation

    # Using npm
    npm install --save showdown-highlight
    # Using yarn
    yarn add showdown-highlight

    📋 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:
    function sayHello (msg, who) {
        return \`\${who} says: msg\`;
    sayHello("Hello World", "Johnny");
    // <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>

    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. 🐛

    📝 Documentation


    Highlight the code in the showdown input.


    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 })]

    😋 How to contribute

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

    💫 Where is this library used?

    If you are using this library in one of your projects, add it in this list.

    • 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

    📜 License

    MIT © Bloggify


    npm i showdown-highlight

    DownloadsWeekly Downloads






    Unpacked Size

    9.88 kB

    Total Files


    Last publish


    • ionicabizau