Real World Performance: lazy loading, optimizing media, faster analytics join us Wednesday

ContactSign Up
Community Plugin
View plugin on GitHub


Dracula Theme for Gatsby


All in one dark theme for gatsby-remark-prismjs plugin with syntax and line highlighting, line numbers, file title and copy button.


npm install gatsby-prismjs-dracula
// gatsby-browser.js
import 'gatsby-prismjs-dracula';


  • To show line numbers add {showLineNumbers: true} in the code block, like this or set them globally by adding showLineNumbers: true in gatsby-remark-prismjs options.

  • To add line highlights check out this article

  • To add button text, tooltip text or to change icon refer to gatsby-remark-code-buttons options section.

PRs are welcome :octocat:

© 2023 Gatsby, Inc.