npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

markdown-it-prism

v2.3.0

Published

Highlights code blocks in markdown-it using Prism.

Downloads

36,126

Readme

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:

| Name | Description | Default | |---------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------| | highlightInlineCode | Whether to highlight inline code. | false | | 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 |

Inline Code

When highlightInlineCode is set, inline code will be highlighted just like fenced code blocks are. To specifiy the language of inline code, add {language=<your-language>} after the code segment:

`class Demo { };`{language=cpp}

This syntax is compatible with markdown-it-attrs: The language=<x> part will be stripped, but everything else between { and } will work with markdown-it-attrs as usual.

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.