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

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

Home Forums Support Display "Coding Example" On A Page

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #282080
    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

    GP Premium 1.2.94
    #282147
    Leo
    Staff
    Customer Support

    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

    #285767
    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

    #285788
    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.

    #285814
    Leo
    Staff
    Customer Support

    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 🙂

    #285815
    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.

    #285818
    Leo
    Staff
    Customer Support

    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.

    #285821
    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?

    #285831
    Leo
    Staff
    Customer Support

    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.

    #285833
    Leo
    Staff
    Customer Support

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

    #285849
    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?

    #285937
    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

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #406960
    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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.