<p>I don't have the code handy, but a simple workaround might be to setup Redactor to use just one of the tags (either <code>&lt;pre&gt;</code> or <code>&lt;code&gt;</code>) and then replace these tags on the fly within your Twig templates.</p>

<p>Replace <code>&lt;pre&gt;</code> with <code>&lt;pre&gt;&lt;code&gt;</code> and <code>&lt;/pre&gt;</code> with <code>&lt;/code&gt;&lt;/pre&gt;</code>.</p>

CC BY-SA 3.0
2018-01-11T04:10:39.153Z
2018-01-11T04:10:39.153Z
Simon East
<p>If it were me, I'd try to keep as much formatting cruft out of a wysiwyg as possible, it cleans things up down the road and keeps your content as structured as possible. If you ever change frameworks or anything else, that extra cruft can come back to haunt you because it's all stored in the database.</p>

<p>A better way is handle this with a couple <a href="http://buildwithcraft.com/docs/matrix-fields" rel="nofollow">Matrix blocks</a>. Set one up for text, and then another one for code snippets. Then in your template when you want to spit out a code snippet, you just wrap it using whatever extra bits you need like:</p>

<pre><code>{% for block in entry.myMatrixField %}

{% if block.type == "text" %}
    {# handle text #}
    {{ block.entryText }}

{% elseif block.type == "code" %}

    &lt;div class="code-snippet"&gt;
    &lt;pre&gt;&lt;code&gt;{{ block.codeBlock }}&lt;/code&gt;&lt;/pre&gt;
    &lt;/div.

{% endif %}

{% endfor %}
</code></pre>

<p>The upside here is that it's all built-in, you don't have to modify any redactor defaults to make this work. But the bigger upside is if let's say you're building a library of code snippets, it'd be super easy to query the Matrix fields and get just those snippets you want. </p>

<p>You could even completely reformat the page and just show the code snippets, since you have them already broken out.</p>

<p>IMO that's what makes Craft so powerful, it's easy to use more structured data unlike other solutions *cough* like WordPress *cough* that put everything in one "field."</p>

CC BY-SA 3.0
2015-01-04T02:43:15.743Z
Hi and thanks for your answer. I currently have it set up with Matrix fields as you described. Sometimes having too many matrix blocks is bit daunting and takes longer to write. Since I'll be showing a bunch of code snippets I wanted to try and see if I can do it inline. I guess the only other option for me configure the highlighting JS to work without it being nested.
julzmon
CC BY-SA 3.0
2017-04-19T06:03:32.307Z
FYI `<pre>` and `<code>` tags are not "formatting cruft" -- they are semantic tags which give meaning to the content. The style of them is determined by your CSS, and whether or not they are added in a wysiwyg editor has no bearing on the structure of your content.
Jordan Lev
CC BY-SA 3.0
2015-01-03T20:39:13.570Z
2015-01-03T20:39:13.570Z
RitterKnight
<p>Is it possible to set Redactor button to wrap my code snippets inside two tags?</p>

<pre><code>&lt;pre&gt;&lt;code&gt;...&lt;/code&gt;&lt;/pre&gt;
</code></pre>

<p>This is what I have so right now.</p>

<pre><code>formattingAdd: [
    {
        tag: 'code',
        title: 'Code Inline'
    },
    {
        tag: 'pre',
        title: 'Code Well'
    },
    {
        tag: 'mark',
        title: 'Marked'
    }
]
</code></pre>

<p>But some scripts and Bootstrap wants it wrapped in both of the tags.</p>

<redactor>
How do I set Redactor formatting button to wrap selected text in two tags? <pre><code>...</code></pre>
# How do I set Redactor formatting button to wrap selected text in two tags? <pre><code>...</code></pre>

(Asked by: username_0 on 2015-01-02)

Is it possible to set Redactor button to wrap my code snippets inside two tags?
...

This is what I have so right now.
formattingAdd: [
    {
        tag: 'code',
        title: 'Code Inline'
    },
    {
        tag: 'pre',
        title: 'Code Well'
    },
    {
        tag: 'mark',
        title: 'Marked'
    }
]

But some scripts and Bootstrap wants it wrapped in both of the tags.

**Tags:** redactor


---

## 2 answers

### Answer by username_1 on 2018-01-11. Score: 1

I don't have the code handy, but a simple workaround might be to setup Redactor to use just one of the tags (either  or ) and then replace these tags on the fly within your Twig templates.
Replace  with  and  with .


---

### Answer by username_2 on 2015-01-03. Score: 1

If it were me, I'd try to keep as much formatting cruft out of a wysiwyg as possible, it cleans things up down the road and keeps your content as structured as possible. If you ever change frameworks or anything else, that extra cruft can come back to haunt you because it's all stored in the database.
A better way is handle this with a couple Matrix blocks. Set one up for text, and then another one for code snippets. Then in your template when you want to spit out a code snippet, you just wrap it using whatever extra bits you need like:
{% for block in entry.myMatrixField %}

{% if block.type == "text" %}
    {# handle text #}
    {{ block.entryText }}

{% elseif block.type == "code" %}

    
    {{ block.codeBlock }}
    
The upside here is that it's all built-in, you don't have to modify any redactor defaults to make this work. But the bigger upside is if let's say you're building a library of code snippets, it'd be super easy to query the Matrix fields and get just those snippets you want. 
You could even completely reformat the page and just show the code snippets, since you have them already broken out.
IMO that's what makes Craft so powerful, it's easy to use more structured data unlike other solutions *cough* like WordPress *cough* that put everything in one "field."

> **Comments:**
> **username_0**: Hi and thanks for your answer. I currently have it set up with Matrix fields as you described. Sometimes having too many matrix blocks is bit daunting and takes longer to write. Since I'll be showing a bunch of code snippets I wanted to try and see if I can do it inline. I guess the only other option for me configure the highlighting JS to work without it being nested.  
> **username_3**: FYI `<pre>` and `<code>` tags are not "formatting cruft" -- they are semantic tags which give meaning to the content. The style of them is determined by your CSS, and whether or not they are added in a wysiwyg editor has no bearing on the structure of your content.  

---

