How do I set up the Rich Text Editor Field (Redactor) for code snippets?

Question

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

Answer 1

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:

<pre><code>{{ block.code|e }}</code></pre>

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