[Support request] Display "Coding Example" On A Page

[John]

I am building a couple of pages that are tutorials on coding (for Arduino). I am looking for a way to have the coding examples wrapped in a coding-type window. I have tried the “SyntaxHighlighter Evolved” plugin, but was having troubles with it.

We did notice on the Optimizing GeneratePress from July 2016, there are some coding examples which is exactly what we are looking to do. Was this a plugin to do this?

Can anyone suggest another tool that could be useful for including source code on to a page?

Thanks… John

[Leo]

Hi John,

You are talking about the code on this page? https://generatepress.com/fastest-wordpress-theme/

Looks like it’s done with this: https://github.com/google/code-prettify

[Markus]

Hi Leo,

I would also like to display code on my homepage but, like John, I would really like to use “SyntaxHighlighter Evolved”.

Frankly, I haven’t even tried installing the plugin yet. Anyway, should it be compatible with GP Premium in principle? Also, I noted the following warning message here:

Make sure your theme’s footer.php file has <?php wp_footer(); ?> somewhere inside of it, otherwise the plugin won’t be able to do it’s thing.

Could you walk me through how to do that in WordPress with GP activated? I am not quite sure where to start. I faintly remember from a previous problem that one has to be careful about how to go about these things in order not to have the line removed when the GP Premium plugin is next updated.

If you know another/better WordPress plugin to highlight code syntax (for R) that reconciles better with GP, please free to let me know and I’ll consider it as an alternative, particularly if “SyntaxHighlighter Evolved” does not work well with GP, for one reason or another.

Thanks,
Markus

[Markus]

Me again 🙂 I have now actually given Code Prettify a try and installed it. Anyway, it does not seem to be working with GP premium. Is that possible? Is it generally hard to use cody syntax highlighter tools with GP premium?

Thanks,
Markus

P.S.: This here is why I think GP premium may cause the trouble.

[Leo]

Hi Markus,

The plugin you tried is actually different than this one right here: https://github.com/google/code-prettify which is developed by Google.

Definitely confusing as they have the same name…Can you give that one a shot?
You can download it from Github (Clone or download) then upload it through the plugin page.

Let me know if this helps 🙂

[Markus]

Hi Leo,

unfortunately, that attempt ended with an error message:

Installing Plugin from uploaded file: code-prettify-master.zip
Unpacking the package…
Installing the plugin…
The package could not be installed. No valid plugins were found.
Plugin install failed.

[Leo]

ahh my bad. It’s actually not a plugin. Never used it before myself…

Checkout their Doc page: https://github.com/google/code-prettify/blob/master/docs/getting_started.md

Let me know.

[Markus]

So when writing a blog post including code, I should just add this line

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

at the top (in the text tab)? Is that it?

[Leo]

I think you can either add it to your child theme if you are using one.

If not try adding it to Appearance > GP Hooks > wp_head.

Let me know if that works.

[Leo]

Actually scratch that. Load it in Appearance > GP Hooks > wp_footer 🙂

[Markus]

Actually, now it is my time to scratch something. I had somehow assumed that the code would be highlighted already in the visual tab. After saving the draft and previewing the post, the Code Prettify plugin actually worked :/

I have also tried entering the script in wp_head, as you suggested, and that also worked. So now people having the same problem as me will find two solutions in this thread… there is always a silver lining, I guess 😉

Anyway, I am now thinking it is somehow ‘redundant’ to load the script on every page, which I guess both solutions do. It seems to me that being able to load the script only for posts where I actually need to highlight code would be more elegant.

I am trying to tweak Advanced Custom Fields as described here to do the job, but I am not sure where to add <?php the_field(‘header_script'); ?> and <?php the_field(‘footer_script'); ?> (point 6 in method three). I have tried going through GP Hooks but could not get it to work. Perhaps you could give it a try and let me know? Or couldn’t this be implemented through GP Hooks?

[Lyle]

Hi John, Markus, Leo,

I tried pretty much every plugin of this type from the WP repo and this is the plugin that I now use and it works very nicely:

https://wordpress.org/plugins/pastacode/

Here is a page from my site with it in action 🙂

http://snifflevalve.com/tutorials/elementor-generatepress-gp-premium-anywhere-elementor-switch-site-header/

Cheers!
Lyle

[Mike]

Thanks Lyle, this is exactly what I have been looking for. I was using embeds from github and they kept being removed from my blog posts.

[Author]

Posts