gatsby-syntax-highlight-dracula

Dracula syntax highlighting theme for Gatsby


Keywords
gatsby, gatsby-remark-prismjs, prism, prism-line-numbers, prism-line-highlight, theme, dark-theme, dracula, dracula-theme, syntax-highlighting, styles, sass, scss, css, prismjs
License
ISC
Install
npm install gatsby-syntax-highlight-dracula@0.1.1

Documentation

Gatsby

Dracula syntax highlighting theme for Gatsby

Gatsby

Dark syntax highliting theme for gatsby-remark-prismjs plugin with pre-configured line numbers and line highlights.

Installation

  1. Assumed you are using gatsby-sass and gatsby-remark-prismjs.
  2. npm install gatsby-syntax-highlight-dracula
  3. import gatsby-syntax-highlight-dracula in gatsby-browser.js.
  • In order to show line numbers add showLineNumbers: true in gatsby-remark-prismjs config.
  • If you don't use gatsby-plugin-sass then you have to import gatsby-syntax-highlight-dracula/lib/styles.css in gatsby-browser.js for step #3.

Screenshots

CSS

CSS

Inline code

Inline code

Line highlight

Line highlight

Code Selection

Code selection