<p>Not sure if it helps, but I accomplished this using a <strong>plain text</strong> field (with multi-line enabled). Then I just used CSS to format the field in a way to make it look like a code snippet...</p>

<p><strong>Screenshot of field in the Control Panel:</strong></p>

<p><img src="https://i.sstatic.net/ekOwr.png" alt="example code"></p>

<p>I used the <a href="https://github.com/lindseydiloreto/craft-cpcss" rel="noreferrer">Control Panel CSS</a> plugin to add this CSS:</p>

<pre class="lang-css prettyprint-override"><code>#fields-myfieldhandle textarea.nicetext {
    font-size: 13px;
    font-family: Menlo, Monaco, monospace, sans-serif;
    color: #cccccc;
    background-color: #222222;
    padding: 14px 16px;
}
</code></pre>

<p>Then, in my Twig template, I display it like this:</p>

<pre class="lang-html prettyprint-override"><code>&lt;pre&gt;&lt;code&gt;{{ block.code|e }}&lt;/code&gt;&lt;/pre&gt;
</code></pre>

<p>May or may not be the solution you're looking for, but I've been very satisfied with it!</p>

CC BY-SA 3.0
2014-10-17T13:17:25.783Z
Thanks yes I have tested various ways and this works the best.
julzmon
CC BY-SA 3.0
2014-10-09T19:28:01.610Z
2014-10-09T19:28:01.610Z
Lindsey D
<p>I'm trying to set us the Rich Text Editor for inputting code snippets. I've almost got it working except when I go back to edit the entry Redactor removes spaces I entered to format the code. Also setting the tabAsSpaces doesn't seem to work. It still adds tab space.</p>

<p>Here is what I have in Redactor config.json</p>

<pre><code>{
    toolbar: false,
    visual: false,
    tabAsSpaces: 2,
    cleanOnPaste: false,
    cleanSpaces: false,
    cleanStyleOnEnter: true,
    paragraphize: false,
    minHeight: 200
}
</code></pre>

<p>And in the template</p>

<pre><code>{% spaceless %}
&lt;pre&gt;
  &lt;code&gt;
    {{- block.html|replace({'&amp;':'&amp;amp;', '&lt;':'&amp;lt;', '&gt;':'&amp;gt;'})|raw -}}
  &lt;/code&gt;
&lt;/pre&gt;
{% endspaceless %}
</code></pre>

<templating><redactor><richtext><editor>
How do I set up the Rich Text Editor Field (Redactor) for code snippets?
# How do I set up the Rich Text Editor Field (Redactor) for code snippets?

(Asked by: username_0 on 2014-10-09)

I'm trying to set us the Rich Text Editor for inputting code snippets. I've almost got it working except when I go back to edit the entry Redactor removes spaces I entered to format the code. Also setting the tabAsSpaces doesn't seem to work. It still adds tab space.
Here is what I have in Redactor config.json
{
    toolbar: false,
    visual: false,
    tabAsSpaces: 2,
    cleanOnPaste: false,
    cleanSpaces: false,
    cleanStyleOnEnter: true,
    paragraphize: false,
    minHeight: 200
}

And in the template
{% spaceless %}

  
    {{- block.html|replace({'&':'&', '<':'<', '>':'>'})|raw -}}
  

{% endspaceless %}

**Tags:** templating, redactor, richtext, editor

---

## 1 answers

### Answer by username_1 on 2014-10-09. Score: 6 | Accepted answer

Not sure if it helps, but I accomplished this using a plain text field (with multi-line enabled). Then I just used CSS to format the field in a way to make it look like a code snippet...
Screenshot of field in the Control Panel:

I used the Control Panel CSS plugin to add this CSS:
#fields-myfieldhandle textarea.nicetext {
    font-size: 13px;
    font-family: Menlo, Monaco, monospace, sans-serif;
    color: #cccccc;
    background-color: #222222;
    padding: 14px 16px;
}

Then, in my Twig template, I display it like this:
{{ block.code|e }}

May or may not be the solution you're looking for, but I've been very satisfied with it!

> **Comments:**
> **username_0**: Thanks yes I have tested various ways and this works the best.  

---

