<p>On Straight up Craft we use a <a href="https://github.com/selvinortiz/craft.doxter" rel="nofollow">Doxter</a> Block for Markdown and <a href="http://craig.is/making/rainbows" rel="nofollow">Rainbow.js</a> with a custom <a href="https://github.com/BarrelStrength/Craft-Twig-Rainbow.js" rel="nofollow">Craft-Twig extension</a> for syntax highlighting.</p>

<p>Doxter allows you to identify the code block like so:</p>

<pre><code>``` twig
{{ siteUrl }}
```
</code></pre>

<p>or</p>

<pre><code>``` php
&lt;?php echo "hello world"; ?&gt;
```
</code></pre>

<p>And you can view the syntax in highlighting in the CP before you publish using Live Preview.</p>

CC BY-SA 3.0
2015-03-20T16:25:07.033Z
But you don't have syntax highlighting in the CP, do you? I think that's what the OP is after.
carlcs
CC BY-SA 3.0
2015-03-20T20:15:26.363Z
We just use Live Preview.  I can see where the OP might mean what you're describing.  In any case, this is one workflow to consider.
Ben Parizek
CC BY-SA 3.0
2015-03-21T18:47:22.083Z
Thanks, Ben - this is already a great solution. Ideally it would be nice to have syntax highlighting in the field, but live preview definitely helps. What I'd like most is the ability to use the TAB key - and maybe even to select a few lines and tab them together. If anyone gets that working, it would be great. I'll look into turning that into a custom-field/block plugin at some point.
Jure Srpcic
CC BY-SA 3.0
2015-03-22T09:05:52.537Z
@enorog I think indenting with the tab key should be possible with Doxter plugin, as it implements behave.js for text fields.
carlcs
CC BY-SA 3.0
2015-03-20T15:52:05.103Z
2015-03-20T20:11:29.480Z
2015-03-20T20:11:29.480Z
Ben Parizek
<p>There is the <a href="https://github.com/httpster/Ace-Freely/">Ace Freely</a> plugin, which adds an Ace Editor Field Type that would work well in a Matrix field.</p>

CC BY-SA 3.0
2015-03-23T09:27:56.463Z
Well that is exactly what I was looking for. Thanks, Mike!
Jure Srpcic
CC BY-SA 3.0
2015-03-21T23:38:26.347Z
2015-03-21T23:38:26.347Z
Mike Pepper
<p>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?</p>

<p>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.</p>

<p>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.</p>

<p>Thanks for any insights!</p>

CC BY-SA 3.0
2015-03-20T10:00:02.617Z
The Matrix approach with different block types, and prism.js is essentially what we're doing on experiencehq.net. More information here: https://experiencehq.net/blog/craft-with-markdown-and-matrix
Stephen Lewis
<matrix><custom-fieldtype><block-types>
How to create code blocks with syntax highlighting
# How to create code blocks with syntax highlighting

(Asked by: username_0 on 2015-03-20)

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!

**Tags:** matrix, custom-fieldtype, block-types
> **Comments:**
> **username_1**: The Matrix approach with different block types, and prism.js is essentially what we're doing on experiencehq.net. More information here: https://experiencehq.net/blog/craft-with-markdown-and-matrix  

---

## 2 answers

### Answer by username_4 on 2015-03-21. Score: 6 | Accepted answer

There is the [Ace Freely](https://github.com/httpster/Ace-Freely/) plugin, which adds an Ace Editor Field Type that would work well in a Matrix field.

> **Comments:**
> **username_0**: Well that is exactly what I was looking for. Thanks, Mike!  

---

### Answer by username_2 on 2015-03-20. Score: 4

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

```

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

> **Comments:**
> **username_3**: But you don't have syntax highlighting in the CP, do you? I think that's what the OP is after.  
> **username_2**: We just use Live Preview.  I can see where the OP might mean what you're describing.  In any case, this is one workflow to consider.  
> **username_0**: Thanks, Ben - this is already a great solution. Ideally it would be nice to have syntax highlighting in the field, but live preview definitely helps. What I'd like most is the ability to use the TAB key - and maybe even to select a few lines and tab them together. If anyone gets that working, it would be great. I'll look into turning that into a custom-field/block plugin at some point.  
> **username_3**: @enorog I think indenting with the tab key should be possible with Doxter plugin, as it implements behave.js for text fields.  

---

