JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 15434
  • Score
    100M100P100Q130796F
  • License MIT

A Showdown extension for highlight the code blocks.

Package Exports

  • showdown-highlight
  • showdown-highlight/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (showdown-highlight) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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, 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>

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

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