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.';
}
29 Responses to “Prettify Code Syntax”
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”.
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!
admin
Not sure if I understand this one. You can change anything using the custom style
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.
admin
Thanks for letting me know! I just fixed that and also added some new languages
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
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!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
John Evans
That obviously didn’t print but it printed out the script code <script> …</script>
admin
What is your shortcode supposed to print?
John Evans
I’ve put the code both in and out in a paste bin at
http://grandadevans.com/paste/1
I’m writing docs for my new plugin and want to put the shortcode in a code box
<pre class=”prettyprint”><code class=”language-Javascript”>
[tel-link-and-obfuscate]
</code></pre>
admin
Oh I see what you mean. Apparently to escape shortcodes you should use double brakets: http://wordpress.org/support/topic/how-do-you-escape-shortcodes
John Evans
Brilliant! Thanks very much for your help my good Man/Woman you are a Superstar :-) It looks like a basic thing but I’m still getting used to WP at the moment.
Thanks again,
John
Kenny
I can’t seem get ampersand working. & is coming out as ‘&’. Help?
Jesús Carrera
Ok I found the issue. I’ll update the plugin tomorrow. Watch out for that. Thanks for noticing!
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.
Jesús Carrera
Can you select the custom style? if so editing custom.css should work. If not, you need to edit default.css
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?
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.
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.)
Jesús Carrera
Ok I’ll add those for the next release. A 5 star review will encourage me to release faster :)
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?
Jesús Carrera
I know, that’s a known problem. I might fix that in the future if I find enough interest. Try using http://wordpress.org/extend/plugins/preserved-html-editor-markup/
Ricky
Yes please, i would love this!
Sadly I have tried using that plugin, and many others today. That plugin in particular didn’t do much at all. I think it bounces off pretty-code-syntax, like fights and eats each other.
Michael
I would be very happy if you solved this issue. Thanks for the awesome plugin.
Ricky
Yay!!! :D
Naeem
Great plugin, using it on http://www.cssreflex.com/snippets
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.
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.