Log In  


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

2


1

Well, if there wasn't, there is now:

http://computing.codes/test/pico8.html


Holy heck, this is good! :D
Is this something others can use?


1

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]