Kinopio makes it easy to save code snippets and give them context for reference spaces, engineering diagrams, and decision trees.
When you paste code into cards between triple backticks
, your code will get syntax highlighting. You can either type the language name after the backticks (e.g. ```js), or select it from the list.
Relatedly, to accommodate larger code snippets, cards with ``` triple backticks can hold more characters (2000).
(Also new is a Copy code button for easily pasting code into your text editor)
Backstory
Implementing syntax highlighting was not straightforward. Initially, I thought I had two choices:
- Use a robust syntax highlighting library that runs in the browser. Which is the fastest and most-straightforward solution, but these libraries are usually 250kb or more – so significantly larger than the rest of Kinopio (and computationally heavy).
- Use that library on the server instead. This would keep the bloat out of the browser, but I'd have to deal with the lag-time between updating code and having it's highlighted syntax. This would also put more strain on the server.
I didn't love either solution, but was leaning towards #2 because it kept things fastest for the user. Design is often about choosing the least bad tradeoffs.
Then, I received an email from David Francisco, whom I'd once interviewed for a job at Glitch. I'm glad he kept in touch because he gave me a suggestion that led me to macrolight, a tiny and not-at-all robust syntax highlighting library.
This made me rethink my whole approach.
Syntax highlighting in Kinopio doesn't need the vscode-level accuracy that the popular libraries provide – speed and size matter more here.
So combined with some of my own custom language grammers, I was able to add the good enough + very fast syntax highlighting support that I didn't know I was looking for.