How to create code blocks with syntax highlighting

Question

I'm deciding on the best way to have code blocks in my content. I'm doing something similar to Craft Docs. Do you have any best practices?

Currently I'm thinking about having a matrix field for the whole entry content - and then just add a Title block, a Rich text block and a Regular text with line breaks for code. I'd then use Prism.js in the frontend to format the code.

I guess I could use another field to identify language for syntax highlighting for each Regular text block. Has anyone seen a special field type dedicated for syntax highlighting? I'd love to have syntax highlighting already in the admin and also a better way to choose language type.

Thanks for any insights!

Answer 1

There is the Ace Freely plugin, which adds an Ace Editor Field Type that would work well in a Matrix field.

Answer 2

On Straight up Craft we use a Doxter Block for Markdown and Rainbow.js with a custom Craft-Twig extension for syntax highlighting.

Doxter allows you to identify the code block like so:

``` twig
{{ siteUrl }}
```

or

``` php
<?php echo "hello world"; ?>
```

And you can view the syntax in highlighting in the CP before you publish using Live Preview.