Adding class to pre and code element in redactor?

Question

I have been trying for several days now to figure out how I can add a class to a fotmatting option element within Redactor.

By default the formatting option for "Code" wraps the content in the <pre></pre> or <code></code> html elements. However I need to make redactor use <pre class="prettyprint linenums"></pre> or <code class="prettyprint linenums"></code> instead.

Does anyone know of an easy way to do this? I have been emailing Redactor support back and forth for days and have tried the one link they provided me to their documentation (http://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd), but it just breaks the entire thing...

PS: I am pretty much javascript retarded, I can't get a grasp or understand how it works and have trouble doing anything related to js.

How can I add a class to redactor's "Code" formatting option which wraps content in a pre HTML element?

PAEz PAEz · Accepted Answer · 2015-08-16T17:25:02

Only just noticed you answered yourself, did you ever get this working?
I implemented it real quick to see what would happen and by your other post I think you might know how that turned out.
Heres what I got...
http://plnkr.co/edit/B5F3bn6I0ofqTaY7NkZg?p=preview

   $(function() {
    $('#redactor').redactor({
      focus: true,
      buttonSource: true,
      //        formatting: ['p', 'blockquote', 'h1', 'h2'],
      formattingAdd: [{
        tag: 'pre',
        title: 'Pretty Print',
        class: 'prettyprint linenums'
      }],
        syncCallback: function()
{
    prettyPrint();
}
    });
  });

...That adds an option to format that will wrap the selected in a pre with that class and then run prettyPrint after to convert it.....then the problems start ;)
Oh well, if you figured it out Id love to know and atleast this shows the how to add a format option.

Adding class to pre and code element in redactor?

2 Answers