1. markdown-it-prism
Highlights code blocks in markdown-it using Prism.
markdown-it-prism
Package: markdown-it-prism
Created by: jGleitz
Last modified: Tue, 30 Aug 2022 17:38:27 GMT
Version: 2.3.0
License: MIT
Downloads: 22,124
Repository: https://github.com/jGleitz/markdown-it-prism

Install

npm install markdown-it-prism
yarn add markdown-it-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:

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.

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code