Syntax Highlighting Themes

Process sketch

We've added a new component for designing custom syntax highlighting themes for Prism.js and Highlight.js.

Exploring what's possible with a set of custom colors can be tedious and time consuming, especially when accounting for accessibility. With our latest component, generate accessible designs with a single click. Cycle through a seemingly endless array of visual options.

Here's a few we generated from the color system we use in our app:

Creating a theme

Choose your preferred syntax highlighting library by selecting for Prism or HighlightJS. Press the skip or right arrow on your keyboard to generate a new design option. Save any designs you want to use or revisit later. If you're logged in, press the left arrow to navigate back through previously generated designs. Extend styling capabilities by declaring your own scopes and tokens. By default, color selection is limited to the current theme. Uncheck this property to use random colors as the potential input.

Process sketch

Initial design sketches


We currently support 200 programming languages, including Javascript, HTML, Markdown, and CSS. Export as CSS to use with your current Highlight.js or Prism.js setup. With our latest Publisher updates, you can apply any saved themes to code blocks and publish directly from our app.

Try it out here