code pane

A very rough POC I created in order to create PNG files of code snippets for presentations

Why?

It's very common to show code within presentations, in which you'd like to highlight specific lines.

This project takes inspiration from the amazing https://carbon.now.sh/. It has many things that I like, but also some that I would like to improve. The syntax highlighting is often broken, the line highlighting functionality is not working correctly, it's impossibly to remove the rounded corners.

I feel that I want to create something simpler and more refined. While it's cool to edit the code and than export it, I think it would be a bit simpler to paste the code in one place and preview in another.

Future plans

  • Support multiple themes
  • Support multiple languages
  • Design appropriatly
  • Support multiple export sizes
  • Support multiple export formats (SVG/JPEG)
  • Configure file name
  • Support copy to clipboard
  • ctrl+a should capture only the code
  • Export for twitter
  • Round corners (configured)
  • Remove line numbers (configured)
  • Support multiple fonts/sizes/line-heights
  • Support adjusting pane width
  • Support presets & saved configuration + local storage
  • Support drop shadow
  • Support better code editing experience
  • Support shift + click for highlighting multiple lines