Crayon Syntax Highlighter for WordPress looks bad on AMP pages

Question

I have a WordPress blog about computer science and the problem is that the Crayon Syntax Highlighter sequences look like this on AMP pages:

So they are doubled. How can I remove the first part (this one which is resizable)? I saw this thing on almost all AMP websites that are using this plug-in, and I think it's a big problem. Thanks!

Answer 1

That first part is the plain version of the code that you're syntax-highlighting, and it's in a textarea box/field inside a div with the class crayon-plain-wrap:

<div class="crayon-plain-wrap">
  <textarea wrap="soft" class="crayon-plain ..." ...>
    plain/non-formatted code here...
  </textarea>
</div>

How to disable that box

1. Easiest option: Just visit the plugin settings page (Settings -> Crayon), find the "Enable plain code view and display" field under the General -> Code section on that page, and just uncheck the option/checkbox..

2. Use custom CSS to hide the div when the request is the AMP version of the current page.

   • If you use the AMP plugin, you can add the CSS programmatically like so: (add this to the theme's functions.php file)

     add_action( 'amp_post_template_css', function(){
         echo '.crayon-plain-wrap { display: none; }';
     } );
     

     or copy just the CSS code (i.e. .crayon-plain-wrap { display: none; }) and put it in an appropriate place.

Using other AMP plugin?

Just try to implement the second option above with that plugin...

But do let me know if you need further help.