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:
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.
Initial design sketches