Support » Plugin: SyntaxHighlighter CKEditor Button » Inserting code button on the comment area.

Viewing 15 replies - 1 through 15 (of 18 total)
  • Plugin Author solagirl



    Thank you for the question. Auto syntaxhighlighter plugin doesn’t check the content of comments, so even the button is added, there could be no syntaxhighlighter effect.

    Switch to another syntaxhighlighter plugin might do, I will try to work it out. Please be patient with me.

    Best regards,

    Plugin Author solagirl


    CKEditor For WordPress plugin provide no easy way to load external plugins in the comment area, so I’m not sure if it is a good idea to add the code button at default.

    Here is a quick method if you need the code button in the comment area.

    Copy and paste the code below into your theme’s functions.php

    add_action('wp_footer', 'custom_comment_editor_button',100);
    function custom_comment_editor_button(){
        if( !is_admin() && (is_page() || is_single()) && comments_open() ){
            $options = get_option('ckeditor_wordpress');
            if( $options['appearance']['comment_editor'] == 't'){
              <script type="text/javascript">
                  CKEDITOR.config.extraPlugins += ( CKEDITOR.config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight' );
                  CKEDITOR.plugins.addExternal('syntaxhighlight', '<?php echo WP_PLUGIN_URL; ?>/syntaxhighlighter-ckeditor-button/syntaxhighlight/');
                  CKEDITOR.replace( 'comment', {
                        toolbar: [
                            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
                            { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
                            { name: 'links', items: [ 'Link', 'Unlink' ] },
                            { name: 'insert', items: [ 'Image', 'SpecialChar','Code' ] }
                        height:'160px',//The height of the comment editor
                        uiColor:'#ffffff' //The ui color of the comment editor

    I have to redefine the toolbar button in order to insert the code button. You can change the editor’s height and toolbar color by setting ‘height‘ and ‘uiColor‘ in the code. And if you use the code above, you will define ‘comment toolbar‘ and ‘editor height for comment‘ here instead of CKEditor->Basic Settings.

    Now you should have the code button in the comment area, however, if you also want the syntaxhighlighter effect, Auto Syntaxhighlighter couldn’t do the job.

    You might consider removing that plugin and install WP SyntaxHighlighter or SyntaxHighlighter Evolved.

    For WP SyntaxHighlighter, choose when to load the brushes at settings->WP SyntaxhigHlighter

    For SyntaxHighlighter Evolved, go to settings->SyntaxHighlighter and select “Load All Brushes”.

    I do not recommended to do this as brush files will be loaded even though they might be useless for the current page. You can just style the pre tag in your style.css to give it a nice look and most of the themes have already done the job.

    I’m sorry for all the trouble, I’m not sure it is best to merge the code into my plugin as it breaks CKEditor For WordPress plugin’s function.

    I used this This plugin give a text link to insert the code above the comment area. But when I install CKEditor the text link don’t work in the comment area. The code itselt is work by typing manually.
    I’m so glad if your plugin also give the button to do that.

    I’m sorry and thanks.

    Plugin Author solagirl


    Hi, If you use the code I gave you, you can get the Code button, it works exactly the same as in the back end. For WP SyntaxHighlighter, Select Higlight your code in comments, then remove the text link.

    I’m sorry if you’d prefer a plugin, it needs more thinking before implementing it, as CKEditor For WordPress plugin is the real boss.

    Plugin Author solagirl


    Hi, I create a demo of ckeditor with code button in comment area here, check it out if you are interested.

    Many thanks for your answer.
    When I try using and your code above works only for login user.

    When I try using, your code above works only for all user (there is a setting to enable special filtering in this plugin setting), but all code is converted into hmtl entites (> become >).


    Plugin Author solagirl


    Thanks for finding the problem.
    I missed one important factor that WordPress does not allow pre tag in comment, to fix this, put the code below into functions.php

    function allow_tags_in_comments($data) {
    	global $allowedtags;
    	$allowedtags['pre'] = array('class'=>true);
    	return $data;

    I have updated my demo, you can try again.

    My solution is
    The button should also work for unregistered users.

    Many Thanks.
    Using your code work as I need perfectly.

    But using still doesn’t work (all code is converted into hmtl entites) as before.

    So maybe it’s better for me to to use

    I’m sorry and again many thanks for your kindness to help me.
    my best regards for You.

    Oh, one problem again I find it just now.

    I try in the demo page, when I click “Reply” (I want to try writing code under your example), the code button disappears. I click afterward “Cancel reply” the button still disappears. When I refresh the browser the button appears again.

    I’m sorry and again many thanks for your kindness to help me.

    Plugin Author solagirl


    Hi there,

    I have no success with wp syntaxhighlighter plugin as well, so just leave it.

    For the last problem you mentioned, ckeditor plugin destroyed the editor instance and then reinitialized it when reply link is clicked. This makes my method stop working unless threaded comment is disabled which in my mind is not what you desire. So the only way I found is to modify CKEditor plugin’s config file, CKEditor plugin doesn’t provide a way to use user custom config file, this is what makes simple things complicated.

    I have detailed the method on my demo page and also updated my demo, please take a look.

    Plugin Author solagirl



    I’m sorry but I’ve never heard of Mollom, let alone use it. From what you described, I think the plugin might have filtered comment content which we can’t control. Are you using its WordPress Plugin ( BTW? I can see it is an out-of-date plugin, the newest version is on github. I always use Akismet alone to fight spam comments. If you truly need that plugin, the best way is to get help from its author, ask how the plugin filtered the comment content.

    Oh, what can I say. Many-many thanks for your efforts to help me.

    I have tried those step by step guidance on your demo page.
    I also have tried to activate three antispam plugin to check the compatibility between them and your solution, Akismet, AntiSpamBee and Mollom.
    Only using the last plugin some code is lost.

    But I actually do not use the last plugin in my live blog, that is only in my local experimental blog. So I think the problem with the last antispam plugin can be ignored.

    I’m sorry and my best thanks for your kindness to help me finding what I need. It really really helps me after 1 years and more I looked for this solution.

    Best Regards for You.

    Plugin Author solagirl


    I’m just glad the problem is solved, I learned a lot from helping you, thank you.

    About Mollom, I’m sorry, I activate it in my local computer only because of my habit to try manything before actually work on my live blog.
    I’m sorry and many thanks.

    Plugin Author solagirl


    Hey, never mind. That’s a good habit to help getting the best choice. If you have any interesting problem to solve, don’t forget to leave a message on my blog.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Inserting code button on the comment area.’ is closed to new replies.