<p>You could do this using the <a href="https://imperavi.com/redactor/plugins/clips/" rel="nofollow noreferrer">Clips plugin</a> with the following config:</p>
<pre class="lang-json prettyprint-override"><code>&quot;plugins&quot;: [&quot;clips&quot;],
&quot;clips&quot;: [
    [&quot;PHP code&quot;, &quot;&lt;pre&gt;&lt;code class=\&quot;language-php\&quot;&gt;Type here&lt;/code&gt;&lt;/pre&gt;&quot;]
],
</code></pre>
<p>This would insert what you need then highlight <em>Type here</em> and add your code!</p>

CC BY-SA 4.0
2022-02-15T10:55:11.667Z
2022-02-15T10:55:11.667Z
Oli
<p>I would like my Redactor's content to include some code snippets but I don't know where to start. I just switched to CraftCMS from WordPress.</p>
<p>My intuition says that there should be a way to add a custom button to Redactor that wraps the selected content with custom tags (like <code>&lt;pre&gt;&lt;code&gt;</code>) and then use a highlighter like for example <a href="https://prismjs.com/" rel="nofollow noreferrer">prism</a>, but I don't know if that is the Craft way to do it.</p>
<p>The closest I've found is <a href="https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd" rel="nofollow noreferrer">fomattingAdd</a>, but this doesn't allow me to create a format with multiple tags, like: <code>&lt;pre&gt;&lt;code&gt; ... &lt;/code&gt;&lt;/pre&gt;</code></p>
<p>It would allow one single wrapper:</p>
<pre><code>&quot;formattingAdd&quot;: {
 &quot;my-code&quot;: {
 &quot;title&quot;: &quot;Just code&quot;,
 &quot;api&quot;: &quot;module.block.format&quot;,
 &quot;args&quot;: {
   &quot;tag&quot;: &quot;code&quot;,
   &quot;class&quot;: &quot;language-php&quot;
 }
},
</code></pre>
<p>How can I achieve multiple wrapper tags for one single format? Do you know a better way to get this done?</p>

CC BY-SA 4.0
2022-02-14T11:40:23.293Z
This doesn't directly answer your question, but I would guess that many Craft devs would implement this as a dedicated block type in a "body builder" matrix, rather than mixing the content directly into an existing Redactor field. I'm not suggesting that this is necessarily a "better" way - there are pros and cons either way - just putting it out there in case it's a valid option for you.
James Smith
CC BY-SA 4.0
2022-02-14T11:51:39.020Z
@JamesSmith Thanks for your kind input. Makes total sense. But in this channel, probably not even a 5% of entries will include code snippets, only a few ones. Your solution seems a perfect fit for a development blog with tutorials where code snippets play a fundamental role, to have cleaner control of the body content. But in this case I prefer a code block inside Redactor, if that's possible.
Álvaro Franz
<redactor>
Native syntax highlighting with Redactor
# Native syntax highlighting with Redactor

(Asked by: username_0 on 2022-02-14)

I would like my Redactor's content to include some code snippets but I don't know where to start. I just switched to CraftCMS from WordPress.
My intuition says that there should be a way to add a custom button to Redactor that wraps the selected content with custom tags (like ) and then use a highlighter like for example prism, but I don't know if that is the Craft way to do it.
The closest I've found is fomattingAdd, but this doesn't allow me to create a format with multiple tags, like:  ... 
It would allow one single wrapper:
"formattingAdd": {
 "my-code": {
 "title": "Just code",
 "api": "module.block.format",
 "args": {
   "tag": "code",
   "class": "language-php"
 }
},

How can I achieve multiple wrapper tags for one single format? Do you know a better way to get this done?

**Tags:** redactor

> **Comments:**
> **username_1**: This doesn't directly answer your question, but I would guess that many Craft devs would implement this as a dedicated block type in a "body builder" matrix, rather than mixing the content directly into an existing Redactor field. I'm not suggesting that this is necessarily a "better" way - there are pros and cons either way - just putting it out there in case it's a valid option for you.  
> **username_0**: @JamesSmith Thanks for your kind input. Makes total sense. But in this channel, probably not even a 5% of entries will include code snippets, only a few ones. Your solution seems a perfect fit for a development blog with tutorials where code snippets play a fundamental role, to have cleaner control of the body content. But in this case I prefer a code block inside Redactor, if that's possible.  

---

## 1 answers

### Answer by username_2 on 2022-02-15. Score: 3 | Accepted answer

You could do this using the Clips plugin with the following config:
"plugins": ["clips"],
"clips": [
    ["PHP code", "Type here"]
],

This would insert what you need then highlight Type here and add your code!


---

