Syntax Highlighting Themes
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.
Publish/Export
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.
Roadmap
- Support for VS Code, Monaco, Vim, Atom, and other IDEs
- Curated presets
- Filters for generating light and dark modes
- Animated transitions between generated designs