WordPress – Crayon Syntax Highlighter plugin and AMP pages A small tutorial explaining how to make the Crayon Syntax Highlighter WordPress plugin work with AMP pages

Come aggiungere gli annunci automatici AMP AdSense (e/o altro codice HTML AMP-only) su Wordpress

Here’s a nasty issue I notice a while ago but never had time to fix… until today! If you’ve stumbled upon this post, it most likely mean that you’re in the same shoes as I was, hence there’s a good chance you’ll find the following lines useful enough.

As you might already know, Crayon Syntax Highlighter is one of the best syntax highlighting plugins available for WordPress: it supports a lot of customizable languages and themes, has a nice interface, and we used it in this blog since the day one… way before the AMP Project landed.

Unfortunately, the plugin performs really bad on AMP pages, as the following screenshot clearly shows:

Wordpress - Crayon Syntax Highlighter plugin and AMP pages

Pretty sad, isn’t it?

Well, luckily enough, I was able to find a neat way to avoid this – and turn such uglyness to something decent – thanks to this StackOverflow thread.

In very short words, you have two way to get out of this mess:

#1: Disable the Plain Code View

Go to the the plugin settings page (Settings > Crayon), then navigate to General > Code section and turn off the Enable plain code view and display option: this will get rid of that ugly textbox within the AMP pages. The good thing about this workaround is that it’s dead simple to pull off; however, it comes with a major flaw: since you will disable the plain code view on non-AMP pages as well, you’ll lose some functionality there – the “copy” button and the “switch to code view” feature.

#2: AMP Action Hook

If you’re using the “official” AMP plugin for WordPress, you can use the great css action hook it provides to programmatically add some CSS styles for AMP pages only.

In order to do that, go to WP AdminAppearance > Editor and add the following lines to your theme’s functions.php file:

Once done, refresh your cache plugin and/or proxy cache (if you use one) and reload the AMP page. You should be able to see something like this:

Wordpress - Crayon Syntax Highlighter plugin and AMP pages

Much better, right?

Needless to say, you can customize your CSS styles even further to match your tastes.

#3: Custom CSS

If you’re using a different AMP plugin – such as AMP for WP, All in One SEO Pack and so on – you will need to use the action hook provided by that plugin: you’ll probably find it by looking at the plugin official documentation. In the unlikely case it doesn’t provide any relevant hooks, you can also put the CSS styles within the “custom styles”, “custom HTML” or any other custom content supported by the plugin – as long as it will be rendered on AMP pages only.

Conclusion

That’s it! I hope that this post will help other developers who are struggling about this issue.

 

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.