Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including markdown-it-prism with all npm packages installed. Try it out:

var markdownItPrism = require("markdown-it-prism")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

markdown-it-prism v2.1.0

Highlights code blocks in markdown-it using Prism.

markdown-it-prism Build Status npm version Bower version

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:

NameDescriptionDefault
pluginsArray 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).[]
initA function called after setting up prism. Will receive the prism instance as only argument. Useful for plugins needing further intialisation.() => {}
defaultLanguageForUnknownThe 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
defaultLanguageForUnspecifiedThe language to use for code block that do not specify a language. No default will be used if this option is undefined.undefined
defaultLanguageShorthand 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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free