Hi,
I was wondering if anyone knew if there exists CSS code that I could use to post code on a website and have it look like the Pico-8 code editor?
Thanks
-Mike
Well, if there wasn't, there is now:
Holy heck, this is good! :D
Is this something others can use?
Sure, it uses prismjs as a code highlighter:
https://prismjs.com/
I then started with the font from this thread:
https://www.lexaloffle.com/bbs/?tid=3760
and edited it so that the special symbols were in the right place.
Created a custom syntax definition for prismjs that has all the built-in functions listed and a .css file to define all the colours.
It's part of a stupid website I use to put stuff online for my students, but you're more than welcome to steal what I've done. Props to @RhythmLynx who made the original font.
Website Repo: https://github.com/MalphasWats/computing.codes
Modified font:
https://github.com/MalphasWats/computing.codes/blob/gh-pages/style/assets/fonts/pico-8.ttf
Css File:
https://github.com/MalphasWats/computing.codes/blob/gh-pages/style/prism-pico-8.css
Prism & syntax definition:
https://github.com/MalphasWats/computing.codes/blob/gh-pages/script/prism.js
HTML Template:
https://github.com/MalphasWats/computing.codes/blob/gh-pages/_layouts/pico8.html
Example page:
https://raw.githubusercontent.com/MalphasWats/computing.codes/gh-pages/test/pico8.markdown
it's all a bit fiddly because it's part of a github pages website. If you get stuck, I could probably separate it out into its own repository to make things a little more obvious.
Thanks a lot for sharing the info.
I'm sure this will come in handy!
[Please log in to post a comment]