Have ideas to improve npm?Join in the discussion! »

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

    2.1.8 • Public • Published

    showdown-highlight

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

    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

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

    😋 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
    • @kev_nz/publisher
    • md-toy-blog
    • markdown2dash
    • ember-showdown-highlight
    • trumpdoc
    • md-srv
    • md-browse
    • showit
    • showdown-html
    • callete
    • swanky
    • textbase
    • chimpsky
    • tutors-html
    • @etermind/alex
    • @webqit/oohtml-cli
    • docset-tools-markdown
    • examma-ray
    • steelsky

    📜 License

    MIT © Bloggify

    Install

    npm i showdown-highlight

    DownloadsWeekly Downloads

    4,067

    Version

    2.1.8

    License

    MIT

    Unpacked Size

    8.19 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar