Title: Inserting code button on the comment area.
Last modified: August 20, 2016

---

# Inserting code button on the comment area.

 *  [M. S. Rosyidi](https://wordpress.org/support/users/msrosyidi/)
 * (@msrosyidi)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/)
 * Excuse me.
    Just a question: How about adding a code button in the comment area.
   I’m sorry and thanks.
 * [http://wordpress.org/extend/plugins/syntaxhighlighter-ckeditor-button/](http://wordpress.org/extend/plugins/syntaxhighlighter-ckeditor-button/)

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/page/2/?output_format=md)

 *  Plugin Author [solagirl](https://wordpress.org/support/users/solagirl/)
 * (@solagirl)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330061)
 * Hi,
 * 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,
    Sola
 *  Plugin Author [solagirl](https://wordpress.org/support/users/solagirl/)
 * (@solagirl)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330062)
 * Hi,
    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
                   });
                 </script>
           <?php
               }
           }
       }
       ```
   
 * 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](http://wordpress.org/extend/plugins/wp-syntaxhighlighter/)
   or [SyntaxHighlighter Evolved](http://wordpress.org/extend/plugins/syntaxhighlighter/).
 * 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.
 *  Thread Starter [M. S. Rosyidi](https://wordpress.org/support/users/msrosyidi/)
 * (@msrosyidi)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330063)
 * I used this [http://wordpress.org/extend/plugins/wp-syntaxhighlighter/](http://wordpress.org/extend/plugins/wp-syntaxhighlighter/).
   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](https://wordpress.org/support/users/solagirl/)
 * (@solagirl)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330064)
 * 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](https://wordpress.org/support/users/solagirl/)
 * (@solagirl)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330065)
 * Hi, I create a demo of ckeditor with code button in comment area [here](http://demo.solagirl.net/2013/01/10/test-syntaxhighlighter),
   check it out if you are interested.
 *  Thread Starter [M. S. Rosyidi](https://wordpress.org/support/users/msrosyidi/)
 * (@msrosyidi)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330067)
 * Many thanks for your answer.
    When I try using [http://wordpress.org/extend/plugins/syntaxhighlighter/](http://wordpress.org/extend/plugins/syntaxhighlighter/)
   and your code above works only for login user.
 * When I try using [http://wordpress.org/extend/plugins/wp-syntaxhighlighter/](http://wordpress.org/extend/plugins/wp-syntaxhighlighter/),
   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 >).
 * Why?
 *  Plugin Author [solagirl](https://wordpress.org/support/users/solagirl/)
 * (@solagirl)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330068)
 * 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
 *     ```
       add_filter('preprocess_comment','allow_tags_in_comments');
       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 [http://wordpress.org/extend/plugins/syntaxhighlighter/](http://wordpress.org/extend/plugins/syntaxhighlighter/)
   
   The button should also work for unregistered users.
 *  Thread Starter [M. S. Rosyidi](https://wordpress.org/support/users/msrosyidi/)
 * (@msrosyidi)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330070)
 * Many Thanks.
    Using [http://wordpress.org/extend/plugins/syntaxhighlighter/](http://wordpress.org/extend/plugins/syntaxhighlighter/)
   your code work as I need perfectly.
 * But using [http://wordpress.org/extend/plugins/wp-syntaxhighlighter/](http://wordpress.org/extend/plugins/wp-syntaxhighlighter/)
   still doesn’t work (all code is converted into hmtl entites) as before.
 * So maybe it’s better for me to to use [http://wordpress.org/extend/plugins/syntaxhighlighter/](http://wordpress.org/extend/plugins/syntaxhighlighter/).
 * I’m sorry and again many thanks for your kindness to help me.
    my best regards
   for You.
 *  Thread Starter [M. S. Rosyidi](https://wordpress.org/support/users/msrosyidi/)
 * (@msrosyidi)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330071)
 * Oh, one problem again I find it just now.
 * I try in the demo [page](http://demo.solagirl.net/2013/01/10/test-syntaxhighlighter),
   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](https://wordpress.org/support/users/solagirl/)
 * (@solagirl)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330075)
 * 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](http://demo.solagirl.net/2013/01/10/test-syntaxhighlighter/)
   page and also updated my demo, please take a look.
 *  Plugin Author [solagirl](https://wordpress.org/support/users/solagirl/)
 * (@solagirl)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330078)
 * Hi,
 * 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 ([http://wordpress.org/extend/plugins/wp-mollom/](http://wordpress.org/extend/plugins/wp-mollom/))
   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.
 *  Thread Starter [M. S. Rosyidi](https://wordpress.org/support/users/msrosyidi/)
 * (@msrosyidi)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330080)
 * 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](http://demo.solagirl.net/2013/01/10/test-syntaxhighlighter/#comment-15)
   page.
    I also have tried to activate three antispam plugin to check the compatibility
   between them and your solution, [Akismet](http://wordpress.org/extend/plugins/akismet/),
   [AntiSpamBee](http://wordpress.org/extend/plugins/antispam-bee/) and [Mollom](http://wordpress.org/extend/plugins/wp-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](https://wordpress.org/support/users/solagirl/)
 * (@solagirl)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330081)
 * I’m just glad the problem is solved, I learned a lot from helping you, thank 
   you.
 *  Thread Starter [M. S. Rosyidi](https://wordpress.org/support/users/msrosyidi/)
 * (@msrosyidi)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330082)
 * 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](https://wordpress.org/support/users/solagirl/)
 * (@solagirl)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/#post-3330083)
 * 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)

1 [2](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/page/2/?output_format=md)

The topic ‘Inserting code button on the comment area.’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/syntaxhighlighter-ckeditor-button.
   svg)
 * [SyntaxHighlighter CKEditor Button](https://wordpress.org/plugins/syntaxhighlighter-ckeditor-button/)
 * [Support Threads](https://wordpress.org/support/plugin/syntaxhighlighter-ckeditor-button/)
 * [Active Topics](https://wordpress.org/support/plugin/syntaxhighlighter-ckeditor-button/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/syntaxhighlighter-ckeditor-button/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/syntaxhighlighter-ckeditor-button/reviews/)

 * 18 replies
 * 2 participants
 * Last reply from: [M. S. Rosyidi](https://wordpress.org/support/users/msrosyidi/)
 * Last activity: [13 years, 5 months ago](https://wordpress.org/support/topic/inserting-code-button-on-the-comment-area/page/2/#post-3330086)
 * Status: not resolved