markdown-it-prism

markdown-it plugin to highlight code blocks using Prism

Usage

const md = require('markdown-it')();
const prism = require('markdown-it-prism');

md.use(prism, options);

The plugin will insert the necessary markup into all code blocks. Include one of Prism’s stylesheets in your HTML to get highlighted code.

Options

The options object may contain:

Name | Description | Default -------|-------------|-------- plugins | Array of Prism Plugins to load. The names to use can be found here. Please note that some prism plugins (notably line-numbers) rely on the DOM being present and can thus not be used with this package (see #1). | [] init | A function called after setting up prism. Will receive the prism instance as only argument. Useful for plugins needing further intialisation. | () => {} defaultLanguageForUnknown | The language to use for code blocks that specify a language that Prism does not know. No default will be used if this option is undefined. | undefined defaultLanguageForUnspecified | The language to use for code block that do not specify a language. No default will be used if this option is undefined. | undefined defaultLanguage | Shorthand to set both defaultLanguageForUnknown and defaultLanguageForUnspecified to the same value. | undefined

Usage with Webpack

If you want to use this plugin together with Webpack, you need to import all languages you intend to use:

import MarkdownIt from 'markdown-it';
import prism from 'markdown-it-prism';

import "prismjs/components/prism-clike"
import "prismjs/components/prism-java"

function component() {
  const md = new MarkdownIt();
  md.use(prism);
  const element = document.createElement('div');
  element.innerHTML = md.render(`
Here is some *code*:
\`\`\`java
public class Test {
  public void foo() {}
}
\`\`\`
`);

  return element;
}

document.body.appendChild(component());

Beware: Prisms languages have dependencies onto each other. You need to import the languages together with their dependencies in the correct order.