Prettify Code Syntax

Code syntax highlighter using Google Prettify, supporting the HTML5 recommendation, and caching plugins.

Info and Download

Read the info and Download from the WordPress Plugin Repository.

DEMO

With line numbers:

<div>
	<h1>Hello</h1>
	This is an <b>example</b>.
	<style>
		.class {
			border: 1px;
			font-family: 'My Font';
		}
		#id { background: url(my-image.png);}
	</style>
</div>

Without line numbers and without language class:

class Voila {
	public:
		// Voila
		static const string VOILA = "Voila";
		echo 'This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long line.';
}

34 Responses to “Prettify Code Syntax”

  1. Darren Krape

    Thanks for making this!

    One issue: in the plugin code the CSS class needed to call the formatting is “prettyprint” but in your documentation it is “prettify”.

    Reply
  2. Darren Krape

    Oh, and you can see it in use here: http://www.darrenkrape.com/use-the-wordpress-image-uploader-in-your-plugin/

    I adjusted the prettify.css file to remove the border and add more padding. It would be great if these, and some more of the formatting CSS, could be changed using the custom style.

    Again, thanks for the plugin!

    Reply
    • admin

      Not sure if I understand this one. You can change anything using the custom style

      Reply
      • Darren Krape

        Oh, sorry, nevermind. Me being thick. I tried using the custom CSS but it looked like the PRE border was hard-coded. But I now see it is simple to override.

        Reply
  3. admin

    Thanks for letting me know! I just fixed that and also added some new languages

    Reply
  4. John Evans

    Hi,
    I shall look into it myself but if I get an answer on here sooner it would be great (even if I don’t I’ll post the conclusion in case anybody else has the same issue).

    I’m trying to output a shortcode in the pretty code.
    I’ve tried the usual
    [tel-link-and-obf]
    and
    [tel-link-and-obf]
    but no luck. I have a feeling it is something really obvious that I’m overlooking.

    Thanks in advance in anticipation of an anwer and thanks for a great plugin.
    John

    Reply
    • admin

      I haven’t tested with shortcodes and I don’t have a lot of time right now. Can you help me? Try to replace in the file prettify-code-syntax.php the line 71 for add_filter('the_content', array($this, 'content_filter'), 12);. Let me know if that works and I’ll update the plugin. Thanks!

      Reply
      • John Evans

        Hi, no that didn’t work but what it did do is push the stdout to the inside of the prettycode box
        eg
        …… inside the box

        I have tried changing from language-html to language-Javascript but that had no effect. Thanks again for your help. If there’s anything else I can do to help you help me then please just let me know :-)
        John

        Reply
  5. Kenny

    I can’t seem get ampersand working. & is coming out as ‘&’. Help?

    Reply
    • Jesús Carrera

      Ok I found the issue. I’ll update the plugin tomorrow. Watch out for that. Thanks for noticing!

      Reply
  6. Szabolcs

    On my setup, PHP is not allowed to write on disk and I cannot change this. I’m getting errors like this when trying to switch styles:

    failed to open stream: Permission denied in wp-content/plugins/prettify-code-syntax/prettify-code-syntax.php on line 111

    Is there perhaps a manual way to set styles or some workaround? I tried overwriting stylesheets/custom.css, but this doesn’t actually change the style of code blocks.

    Reply
    • Jesús Carrera

      Can you select the custom style? if so editing custom.css should work. If not, you need to edit default.css

      Reply
      • Szabolcs

        Thanks for the reply! (I’m replying only now because for some reason I didn’t get the email notification.) Your’s is the best prettify plugin I found so far, all the rest had some problems. I needed prettify because it’s the only syntax highlighter that has good support for Mathematica. Do you think it’d be possible to make the plugin work even without write-to-disk access?

        Reply
        • Jesús Carrera

          It should work without write access, but you will need to stick to the default options. The custom option needs write access.

          Reply
  7. Szabolcs

    Also, it would be nice if you could include this prettify plugin as well for Mathematica:

    https://github.com/halirutan/Mathematica-Source-Highlighting/

    and this one for MATLAB:

    https://github.com/amroamroamro/prettify-matlab

    (Just the lang-mma.js and lang-matlab.js files are needed.)

    Reply
    • Jesús Carrera

      Ok I’ll add those for the next release. A 5 star review will encourage me to release faster :)

      Reply
  8. Ricky

    Hey, thanks for great plugin.
    One problem`o though is switching to the visual editor and having my and tags stripped and puzzled.
    Any clues on how to fix this?

    Reply
  9. Martin Andersson

    Okay nice plugin. But as I could not find any setting somewhere to add every line number and not just every fifth line number, and because the XML language is supposed to be included, but apparently wasn’t, I have to go look for a substitute. Great work though! I’m sure this plugin fits the bill for other people.

    Reply
    • Jesús Carrera

      Line numbers can be shown for every line. 2 themes already do it: Sons of Obsidian and Bootstrap. If you don’t like any of those you can modify the CSS (in the L0, L1, etc. classes).

      XML is supported by default. Doesn’t work for you? If you can send me a code example and screenshot I can have a look.

      Reply
  10. isaced

    Want to support Objective-C!!!

    Reply
    • Jesús Carrera

      Well, not an Objective-C expert but in theory it supports “C and friends”, so it should look fairly ok, but if you find an Objective-C mode for Google Code Prettify I’ll happily incorporate it

      Reply
  11. Mohan

    this plugin does not work as it should be.

    Reply

Leave a Reply