how can I edit the code button in wordpress

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?

Related posts

Leave a Reply

1 comment

  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');