Getting Started

Prism code editor has a rehype plugin, markdown-it plugin, and marked extension you can use to create editors (or highlighted code blocks) from fenced code blocks in markdown. This is much more convenient than using the SSR API directly. All code blocks on this page are rendered by the rehype plugin.

Installation

These markdown plugins have prism-code-editor version 4.0.0 or greater as a peer dependency, so be sure to also install that.


npm i prism-code-editor
npm i rehype-prism-code-editor


npm i prism-code-editor
npm i markdown-it-prism-code-editor
npm i @olets/markdown-it-wrapperless-fence-rule


npm i prism-code-editor
npm i marked-prism-code-editor

Demo

To write markdown and view the resulting editors and code blocks, check the demo running marked.

Usage


import rehype from "rehype"
import prismCodeEditor from "rehype-prism-code-editor"
import "prism-code-editor/prism/languages/common"

rehype().use(prismCodeEditor, {
  // More on configuration later
}).process(/* some html */)

With Next.js:

next.config.mjs


import createMDX from "@next/mdx"
import prismCodeEditor from "rehype-prism-code-editor"
import "prism-code-editor/prism/languages/common"

/** @type {import("rehype-prism-code-editor").PcePluginOptions} */
const rehypePrismCodeEditorOptions = {
  // More on configuration later
}
 
/** @type {import("next").NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
}
 
const withMDX = createMDX({
  options: {
    rehypePlugins: [
      [prismCodeEditor, rehypePrismCodeEditorOptions]
    ],
  },
})
 
export default withMDX(nextConfig)

With Astro:

astro.config.mjs


import { defineConfig } from "astro/config"
import prismCodeEditor from "rehype-prism-code-editor"
import "prism-code-editor/prism/languages/common"

/** @type {import("rehype-prism-code-editor").PcePluginOptions} */
const rehypePrismCodeEditorOptions = {
  // More on configuration later
}

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [prismCodeEditor, rehypePrismCodeEditorOptions]
    ]
  }
})


import MarkdownIt from "markdown-it"
import prismCodeEditor from "markdown-it-prism-code-editor"
import markdownItWrapperlessFenceRule from "@olets/markdown-it-wrapperless-fence-rule"

const md = MarkdownIt()

md.renderer.rules.fence = markdownItWrapperlessFenceRule
md.use(prismCodeEditor, {
  // More on configuration later
})

md.render(/* some markdown */)

markdown-it will enforce <pre><code> as the outermost elements of fenced code blocks. Since the editors don’t use <pre><code>, @olets/markdown-it-wrapperless-fence-rule is recommended.


import { marked } from "marked"
import { markedPrismCodeEditor } from "marked-prism-code-editor"
import "prism-code-editor/prism/languages/common"

marked.use(markedPrismCodeEditor({
  // More on configuration later
}))

marked.parse(/* Some markdown */)

Markdown syntax

To create editors, add the editor meta property to the code block. The meta properties use HTML-attribute-like syntax.


```js editor
// Some code
```

These plugins will also highlight code blocks without the editor property as static code blocks, but this can be disabled in the config if you want to use a different plugin for code blocks.

Editor properties

The following meta properties can change the behavior or appearance of an editor: tabSize, insertSpaces, lineNumbers, readOnly, wordWrap, rtl, and class. They have the same defaults as when creating editors with createEditor().

Code block properties

Static code blocks can be modified with meta properties like tabSize, lineNumbers, lineNumberStart, wordWrap, preverveIndent, guideIndents, rtl, and class. These have the same defaults as when creating code blocks with renderCodeBlock(). Additionally, code blocks support highlighting lines with the highlight, ins, and del properties. More about these on the features page.

Making editors interactive

These plugins don’t inject any JavaScript to make the editors interactive. This means you have full control over when and how they’re mounted and which extensions are added. To mount them, run mountEditorsUnder() in client-side JavaScript. See the SSR guide for more info.

Code block extensions

With JavaScript on the client, you can add features like a copy button, bracket/tag highlighting and hover descriptions using forEachCodeBlock(). The code blocks guide tells you how.

Styling

These plugins don’t inject any CSS into the page, allowing full customization of the editors’ and code blocks’ appearance. See the styling guide and the code blocks guide for more info.

Supported languages

By default, zero languages have syntax highlighting and you must import the languages you want to support. The examples shown on this page all import prism-code-editor/prism/languages/common for 42 common languages, but you can import prism-code-editor/prism/languages for all languages, or import individual languages. See the working with Prism guide.