Question

I have installed prettyprint in my WordPress theme. Now in order to use it, I need to wrap my code in:

<pre class="prettyprint">
<code> 
     code here
</code>
</pre>

Now the code button on WordPress html editor provides only the <code></code> tag. Now is there a way to edit this so that I can add the extra span?

Answer 1

Add this in your functions.php:

function my_quicktags() {
  wp_enqueue_script( 'my_quicktags' , get_template_directory_uri() . '/js/quicktags.js' , array('quicktags') );
}

add_action('admin_enqueue_scripts' , 'my_quicktags');

Create a file called quicktags.js, place it into a js folder, in your theme directory.

Copy all the content of your /includes/js/quicktags.js file. You can edit/delete/add anything, specially the last strings, which are the corresponding to editor tags.

Now you can add your span:

edButtons[15] = new qt.TagButton('span-1','My Span','<span class="myClass">','</span>','X');

That means:

edButtons[position] = new qt.TagButton('ID','Display Name (value)','opening tag','ending tag','shortcut key');