PrismJS Darcula Theme

A syntax highlighting theme for PrismJS based on the Darcula theme from the JetBrains IDEs.

Examples

Check out more examples and other languages on GitHub pages.

Usage

HTML

Download and include the compiled stylesheet in the head of your html:

<link href="darcula.css" rel="stylesheet" />

Astro

Install the package:

npm install prismjs-darcula-theme

Ensure you are using the prism syntax highlighting mode in astro.config.mjs:

import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    syntaxHighlight: 'prism',
  },
});

Add this to your component:

import 'prismjs-darcula-theme/darcula.css';

Gatsby

This theme can be used in Gatsby with gatsby-remark-prismjs. Install the package using:

npm install prismjs-darcula-theme

Add this import to gatsby-browser.js:

import 'prismjs-darcula-theme/darcula.css';

Development

Run npm run docs:watch to watch darcula.scss for file changes, compiling it to docs/darcula.css. To compile the file without watching for changes, use npm run docs. Open docs/index.html in your browser to view the results.