Add <pre> tag button in TinyMce 4
<p>I'm tying to add code into a tinymce textarea and I'm planning to hightlight it using <a href="https://highlightjs.org/" rel="nofollow">highlight.js</a></p>

<p>In order to to so, I just need to wrap the code between the tags <code>&lt;pre&gt;&lt;/pre&gt;</code> and highlight.js will do the rest.</p>

<p>I tried using the <a href="https://www.tinymce.com/docs/plugins/code/" rel="nofollow">code plugin</a> in tinymce, which opens a popup where the user can paste the code. But to my surprise it does actually <strong>nothing</strong> with that text. It only allows you to see the HTML code for it, which will basically just show the text between <code>&lt;/p&gt;</code> tags.</p>

<p>I would prefer not to use <a href="https://www.tinymce.com/docs/plugins/codesample/" rel="nofollow">codesample plugin</a> because I just want to add the <code>pre</code> tag and do not apply any codesample styles to it. I do not want either to have a list of languages to select from or to treat the whole code text as a block that has to be removed in a whole.</p>

<p>Any ideas of how to do this?</p>