matcha.css provides classes that can be used to create a simple code editor with syntax highlighting.

Required structure:
Elements marked with * are required.

These extra styles does not actually perform syntax highlighting, it is only for styling the code editor. It is required to include a syntax highlighting library like highlight.js. See the example code above for a simple implementation.

Use with matcha.css's syntax highlighting classes for a extra synergy!