Add action button in WordPress code editor toolbar

Most of my website posts that include code use syntaxhighlighter to nicely format code. Unfortunately, you have to manually tag the piece of text as code. I thought it would be nice to have one or more buttons in the classical editor toolbar that will automatically surround the code with needed tags to be displayed in the format I want.

In WordPress this can be achieved with Quicktags API. The sytnax is:

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

public function __add_sh_code_buttons()
    {
        add_action('admin_print_footer_scripts', array($this, '__sh_code_buttons'));
    }

    function __sh_code_buttons()
    {
        if (wp_script_is('quicktags')) :
?>
            <script type="text/javascript">
                window.onload = function() { // foarte important să fie în onload
                    // fix here: https://wordpress.org/support/topic/quicktags-addbutton-not-working/
                    //QTags.addButton('eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraph tag', 1);
                    //QTags.addButton('eg_hr', 'hr', '<hr />', '', 'h', 'Horizontal rule line', 201);
                    QTags.addButton('ap_sh_debugger', 'debugger', '[debugger]', '[/debugger]', '2', 'debugger code', 301);
                    QTags.addButton('ap_sh_console', 'console', '[console]', '[/console]', '3', 'console code', 302);
                }
            </script>

        <?php
        endif;
    }

The code above is my implementation for the toolbar ribbon in the image. I removed the line for “code” button because it interfered with the syntaxhighlighter code. I have to find a way to properly escape matching tags.

Hope it helps.

Bye