The theme engine has breathed life!
You can play with it here and check out the code on github!
I go into detail on what this app does in Part 1, but if you want a quick refresher, I got you.
What’s the problem?
On the blog you’re currently reading, I’m using a library called prismjs to render + highlight my code snippets.
// example highlighted code const add5 = (x) => x + 5;
Unfortunately, prismjs is limited to only 8 themes so I want to make new themes! This app helps me do just that.
Who was this made for?
This theme engine was made for those using
gatsby-remark-prismjs and want to make their own theme.
If you made your gatsbyjs site with any of these popular starters, you’re probably still using
gatsby-remark-prismjs to render your code snippets and could benefit from this app!
What does it do?
It lets you assign colors to certain keyword types in your code
For example you could make all function calls light blue and all numbers dark green, etc.
Once you’ve styled your theme the way you would like, you can export the theme into a css file that can be used with prismjs.
Here it is in action! 🔥🔥🔥
It’s still a prototype
My vision is to empower anyone to create and share themes powered by prismjs.
This is just v0.0.1 and there are a few features I want to add in the future such as:
- Code snippets from other languages
- More granular control over highlighting
- Guidance on what colors work together well
- A store with most popular
- many more!
Built with ❤️ & ReasonML