Crayon Syntax Highlighter

Crayon is a neat little plugin for WordPress that boasts an appetising set of functionality. Check it out!

Crayon – WordPress Plugins

Using the Tag Editor

The Tag Editor makes adding code, changing settings and all that much easier with a simple dialog. I’d recommend it over the manual approach, since you can fine-tune the Crayon after the editor generates it :)

Using the Shortcode

You can use the legacy  [crayon attributes] some code [/crayon] but I’d recommend using <pre> tags instead (see below). You can optionally provide the following attributes:

Attribute Description Example
lang Specify a Language ID, these are the folders in the langs directory and appears in the list of Languages in Settings. lang="java"
url Load a file from the web or a local path. You give a relative local path instead of absolute (see Files). You can use a closed tag when giving a url: [crayon url="java/code.java" /]. For languages with defined extensions (see Languages in Settings) you don’t even need to provide the lang attribute, as this will be detected if your file ends with it, as in the example. url="http://example.com/code.java"
url="java/code.java"
title Give a title for your code snippet. Appears in the toolbar. title="Sample"
mark Mark some lines as important so they appear highlighted. You can specify single numbers, comma separted, a range, or a combination. mark="5-10,12"

Pre-formatted Tags

You can also use <pre class="attributes" title="something">...</pre> so that the code can be reused by other plugins even if you disable Crayon, and so it’s HTML 5 compliant if you disable Crayon. The Tag Editor generates tags like these. Attributes names are separated from values by either : (default) or _.

E.g. <pre class="lang:php theme:twilight mark:1,2-4" title="something">...</pre>

Mini Tags

You can even use Mini Tags like:

[html]<strong>some code</strong>[/html]
[php]echo "whassup?";[/php]

The short name in brackets you use are called IDs and Aliases. For example, xml and hxml are Aliases to the language ID xhtml. The IDs and their Aliases are under:

Settings > Crayon > Languages > Show Languages

Mixed Highlighting

You can even mix code together like on a real HTML page, by having <script>, <style> and <?php...?> tags all in a single Crayon and setting the language to HTML. Find out more here.

Settings

Crayon is versatile so you can override global settings for individual Crayons with attributes. The Tag Editor lets you do all this using a simple dialog!

Setting Allowed Value Description
theme string ID of the theme to use
font string ID of the font to use
font-size number > 0 Custom font size in pixels
min-height/max-height number > 0 followed by px/% Minimum/maximum height in units
height number > 0 followed by px/% Height in units
min-width/max-width number > 0 followed by px/% Minimum/maximum width in units
width number > 0 followed by px/% Width in units
toolbar true/false/”always” Show or hide the toolbar. “always” shows always (without mouseover).
top-margin number >= 0 Top margin in pixels
bottom-margin number >= 0 Bottom margin in pixels
left-margin number >= 0 Left margin in pixels
right-margin number >= 0 Right margin in pixels
h-align “none/left/right/center” Horizontal alignment
float-enable true/false Allow floating elements to surround Crayon
toolbar-overlay true/false Overlay the toolbar on code rather than push it down when possible
toolbar-hide true/false Toggle the toolbar on single click when it is overlayed
toolbar-delay true/false Delay hiding the toolbar on MouseOut
show-title true/false Display the title when provided
show-lang “found/always/never” When to display the language.
striped true/false Display striped code lines
marking true/false Enable line marking for important lines
nums true/false Display line numbers by default
nums-toggle true/false Enable line number toggling
plain true/false Enable plain code. Disabling will also disable plain toggling and copy/paste which use the plain code.
plain-toggle true/false Enable plain code toggling
show-plain-default true/false Show the plain code by default instead of the highlighted code
copy true/false Enable code copy/paste
popup true/false Enable opening code in a window
scroll true/false Show scrollbar on mouseover
tab-size number >= 0 Tab size
trim-whitespace true/false Trim the whitespace around the code
mixed true/false Enable mixed highlighting (multiple languages in code)
show_mixed true/false Show the mixed highlighting plus sign
start-line number >= 0 When to start line numbers from
fallback-lang string ID of the language to use when none is detected
local-path string Local path to load file from
touchscreen true/false Disable mouse gestures for touchscreen devices (eg. MouseOver)
disable-anim true/false Disable animations
runtime true/false Disable runtime stats
error-log true/false Log errors for individual Crayons
error-log-sys true/false Log system-wide errors
error-msg-show true/false Display custom message for errors
error-msg string The error message to show for errors
mixed true/false Allow mixed languages using delimiters and tags

Here’s a simple example of attributes:

[crayon lang="html" font-size="20" mark="1" width="200px" toolbar="false"] <strong>This is great!</strong> [/crayon]

If you want to prevent the [crayon] shortcode from turning into a Crayon, use: [crayon]...[/crayon]. If you want to prevent a [/crayon] from ending a Crayon (say if you wanted to have the Crayon shortcode appear in a Crayon itself), then use [crayon]...[/crayon]$. The same applies to <pre> and Mini Tags.

Themes

Crayon comes with built-in Themes to style your code. You can learn how to create your own and download more from here. Themes are structured /themes/theme-name/theme-name.css. If you know CSS, take a look at /themes/default/default.css to get an idea of how they work and how you can change/create them.

Languages

You can customize and create new languages and define how to capture each element (keywords, comments, strings, etc.) with regular expressions. Languages are structured /langs/lang-name/lang-name.txt. Take a look at /langs/default/default.txt and check out the neat regex of the default/generic language. I’ve also spent considerable time putting together a quick guide in /langs/readme.txt that will be added to the online docs. If your language is missing, send me an email. There will be more languages added over time, of course.

Internationalization

Crayon comes translated in several languages already, and if yours is included it will translate Crayon given you’ve followed instructions about how to show WordPress in Your Language. If Crayon doesn’t support your language or you’d like to help improve it:

  • Download Codestyling Localization (awesome plugin btw)
  • Go to Tools > Localization and click rescan on Crayon, then add/edit a language
  • From the edit screen you can edit all translatable strings
  • Send the .po file to me at crayon.syntax@gmail.com and give me your name and a URL for credit

Fonts

You can define fonts and font-sizes within Themes, but you can also override the theme’s font with those inside /fonts/ and also provide @font-face fonts just like in themes – it’s just CSS after all.

Disabling Highlight

You can temporarily disable highlighting for a piece of code using the highlight="false" attribute.

Use in Other Environments

If you’re planning to use Crayon somewhere other than WordPress: Using Crayon Manually in PHP

  • Pingback: epicgeeks.netgaming, development, and life. -

    • admin

      Thanks heaps for the support :)

  • cris

    So i used your plug in and i loved it, but i had to stop using it immediately because when i defined a code the rest of the post or page would lose all formatting. It got really messy really fast and I’m using another plugin syntax highlighter at the moment and I’m not happy with it at all.

    • admin

      Hey there, this was reported as well by another user and has been fixed a few versions back.

  • http://www.jeremyiglehart.com/ Jeremy Iglehart

    I am interested in seeing SQL make it into the supported languages. I prefer the T-SQL dialect of highlighting. I would be more than happy to send you a sample of what this looks like, but I have not yet found a complete set of definitions for T-SQL, as there are two different sets of keywords it uses.

    • admin

      Thanks for your interest, you can have a crack at the language files yourself if you like, they’re very easy if you know regex, that’s the hard bit. I’ll look into it when next I find some time.

  • Edwin Dalorzo

    Current version of the plugin only support ascii characters in the code, it does not even support extended ascii. I have cases of code comments in Spanish where invalid characters are displayed.

    • admin

      I was aware of this when someone else sent me code, I’ll look into it and give an update.

  • kaffekop

    Great plugin :)

    I’m having problems getting it to work in my loop.php, I’m using
    $dat = new WP_Query( 'cat=-13' );
    while ( $dat->have_posts() ){
    $dat->the_post();
    }

    instead of the normal have_posts()/the_post(), and here wp just renders the crayon]my code[/crayon instead of highlighting it :\

    What have i missed ?? :)

    • admin

      You shouldn’t have to touch any code to get it working. Just enable it in settings, then take a look at the settings screen.

  • kaffekop

    The 1.5.3 update fixed it \o/

    Thanks :)

    • Aram

      Oh, glad to hear it :P

  • Andrei

    Great plugin :)
    However, I encountered a problem when I activated this plugin on a blog using the Big Square theme (http://wordspop.com/themes/big-square/). Any page that contained something related to the crayon plugin, the top navigation menu of the blog would not work.

    I’m pretty sure it’s not the best fix, but in the end I removed the jquery.js include from crayon so that there is only one include line. This was the best fix I could get before I can post this here.

    • Aram

      That’s very odd :| Could you send me your log.txt file from the crayon settings page, or in the plugin folder on your FTP? I don’t think it would help much though, because if it was a js issue it would appear in your js console and not in the log file. Also, try to update to 1.5.4 if you haven’t done so already. One possibility could be that the menu uses js but the double importing of jquery causes a namespace clash.

  • http://www.htmlandphp.com Tellez

    Great Plugin! I’ve ran into a small issue, I thought you’d like to have a look…the inside my original code is ending the plugins textbox, and the remainder of my file is being rendered instead of the code being displayed…http://www.htmlandphp.com/scripts/simple-php-flat-file-shoutbox.html

    Cheers!

    • Aram

      Thanks for using it! I’m not quite sure what you meant, I’ll email you now. The string issue has been fixed, but I don’t think that’s what you meant.

  • http://www.simplelib.com minimus

    Unreadable non-latin characters in the title!

    Fixing:
    File: crayon_util.class.php
    Line: 145
    Code: $var = ($escape == TRUE ? htmlentities($str) : $str);
    Change to: $var = ($escape == TRUE ? htmlentities($str, ENT_COMPAT | ENT_HTML401, get_bloginfo(‘charset’)) : $str);

    • Aram

      Thanks! I changed it to use UTF-8, I believe it’s backward compatible with ASCII.

  • Pingback: Wordpress: How to Post Source Code | Kampung Toys

  • Alex

    Hi!

    With the last update the highlighter doesn’t work for C and C++ anymore. With 1.6.4 everything was fine.
    Can you please have a look at this?
    Thanks

    • Aram

      Thanks for using Crayon. I’m finding C++ and C both working. However, I have noticed that strings are not being correctly highlighted, I’ll submit 1.6.6 soon!

  • Pingback: Правила оформления write-up’ов | PeterPen::Blog

  • Chris Müller

    I am just playing around with your wordpress plugin. I encountered some problems with the version 1.7.5. When I use html the brackets at a html tag are converted to > <. So it is not possible to show html code. The same happens with php. What can I do so that the signs are shown correctly?

    • Aram

      Can you give me an example at a URL or just a quick block of code?

      • Chris Müller

        Here is the test code:

        The output is written as “($var > 5)”. I put it in the html editor. If I use a file to get the content everything works as expected.

        • Aram

          Hmm, not sure. Could you give me a test page? Here’s mine: http://aksandbox.webege.com/?p=65.

          • Aram

            Give it a try in a fresh version of WordPress or disable the themes. Also try locally if you can, to ascertain whether it’s Crayon, other plugins, or some sort of sever environment misconfig. If you can send a test link though like mine, I think I could find what might be causing it. Also, does everything work fine if you use [crayon-4fb9354a0ac7d] tags?

  • Carl Johnson

    Hey i just installed your theme to my wordpress site, but i was wondering, which theme version do we need in order to display the nice drop down toolbar that comes with the plugin?

    the code on my site currently doesnt display the drop down menu, rather it displays a square text box in the upper left corner which constains the code

    its not a big deal, but i was just wondering (im using the Century Club Theme btw)

    • Aram

      Ah, that would mean that something might be breaking the javascript and making it fall apart. Make sure to get the latest version, I fixed some potential js errors.

  • Carl Johnson

    Hey you know what, never mind i fixed it! This was really bugging me, so i looked around, and it turns out that theme is missing some code in one of its files which prevents this plugin from displaying correctly.

    So if anyone has the Century Club Theme installed, in your
    /public_html/wp/wp-content/themes/

    folder, make sure to include this

    in the footer.php file or else this theme will not display the drop down toolbar menu correctly

    – i am so happy i figured this out (its 4am here) now i can sleep :)

    • Aram

      Glad you got it working! Most of the problems people are having are from different running it in different environments with themes and scripts.

  • Pingback: 進捗 0106 | bgk devlog

  • http://www.JasonTheAdams.com Jason

    Awesome plugin! I edited to the VB language to a very close language of Real Basic (www.realsoftware.com), and it uses // as a comment instead of REM. I changed this in the rb.txt file, and it works, but only if I don’t start a line with the comment. If you go to my site and look at the “Basics of Boolean” post, you’ll see what I mean. Am I missing something?

    Thanks!

    • Aram

      Hi Jason, thanks for taking the time to play around with the regex :) You can use (//.*?$) to capture the // style comments. So the COMMENT line in rb.txt should look like (//.*?$)|('[^\r\n]*). If you’ve made some changes to the language to suit real basic, feel free to email it and I’ll gladly add it with the others.

  • Ben

    Great plugin, Aram. But I noticed it’s adding the settings and donate link to all the plugins in the plugins list. Otherwise it’s a great syntax highlighter.

    • Aram

      Sorry about that, didn’t notice… I’ll fix it in the next release today. Thanks for noticing!

    • Aram

      Fixed in 1.7.13!

      • Ben

        Thanks for the fix.

        • Aram

          Thanks for pointing it out ;)

  • Adam Toth

    When I use this plugin it doesn’t properly escape angle brackets. Inside the pre tag or [crayon-4fb9354a0a891] shortcode, any angle brackets are escaped as html entities & l t ; to form valid markup, but the plugin displays & l t ; instead of the actual angle bracket when rendering.

    • Aram

      Only if you type and in the HTML editor and then switch to Visual mode – or if you don’t use the HTML mode at all. Whatever appears in the HTML mode of the post editor will be rendered exactly by Crayon. So if you switch to the HTML editor and notice that WordPress (or rather, TinyMCE) has encoded your brackets, then that’s the problem. Give it a try in HTML mode and it should look the same in Crayon. This is not a bug, rather, I’m aware that the editor will convert < into & l t; and so forth. The problem arises when we have to decide – should we trust the HTML editor view (plain post contents) or should we trust the Visual mode view. Since the HTML editor ensures what you type is what you get, I’ve stuck to using that as the norm, but I’m open to any suggestions.

      • Adam Toth

        This makes it difficult to use other publising tools like Windows LiveWriter that use the XML RPC API or ever use the Visual Editor to work with any of the content.

        Can you point out the function that I would need to modify that does the encoding? I should be able to add a special case so that if it finds & l t ; it doesn’t turn it into & a m p ; l t ;.

        • Adam Toth

          I was able to comment out the line in clean_code function:
          //$code = htmlspecialchars($code, ENT_NOQUOTES);

          I tried setting the double_encode parameter to 0 first but that didn’t seem to work, so I just commented it out.

          It seems to work, however in C# code samples, it still double-encodes the angle brackets in generic types, so something line: public class Foo still comes out Foo& l t ; T & g t ;. Any ideas?

          • Adam Toth

            Shoot, try that again.

            public class Foo & l t ; T & g t ; {}

            comes out:

            public class Foo & a m p ; l t ; T & a m p ; g t ;{}

          • Aram

            It’s being encoded twice now. Try the file option and see if that helps. You could also store it in a gist or on a github repo and then give the raw URL with url='...'. Crayon will even cache it for you (see settings) however long you want.

          • Aram

            Commenting out that line would be fine as long as you were certain that at some point it was encoded by wordpress. When typing in the HTML editor, all your formatting remains untouched until it is printed to the screen as post content. Crayon takes the code you type and formats with this line above it before printing it. But before that, it needs to highlight the code and be careful not to break syntax while it’s at it. You could remove that line as long as you never use the html editor. If you did and introduced a < then it might break the page when you don’t tell Crayon to encode it with the commented out line. For another alternative, you could store your code as a file on the server in a folder with a .php extension etc and then give the filename with

            . All you would need to do is then define the folder in settings > crayon > files and it will add the url attribute to that path and look for your code locally. This would mean there would be no HTML encoding issues when using the editor in a browser, at least until I can find time to build a better solution for the visual editor.

        • Aram

          I wish I could, I think it would be javascript based and embedded in TinyMCE. There are some ways around it I found:

          http://wordpress.org/extend/plugins/raw-html/
          http://stackoverflow.com/questions/5444677/wordpress-visual-editor-tinymce-how-to-preserve-custom-attributes

          For now I’d recommend using the HTML editor, until I build a better support for using the Visual editor. I imagine a new setting would be needed to allow those who wish to use it, since I will need to decode entities from the post content, which you don’t want to happen if you’re using the HTML editor (otherwise & amp; will become & when it might be & amp; in your code)

          • Alexey

            Can you add option to decode this Entity Name? I recently post a bash script, and this not fine:

          • Aram

            Hmm, where you trying & l t ;? Also, note you can have the toolbar showing always in the settings and that the attribute is just an override of the global setting, just in case you were writing it for all the Crayons.

          • Alexey

            Ops, your blog translate it correctly!!

          • Aram

            Maybe try to space out the characters :)

  • http://pointatthemoon.co.uk perryb

    I absolutely love this plugin but I have come across one maddening problem. I have set up my blog (link above) to only display excerpts on my home page and I always create custom excerpts for every post.

    I noticed this morning that Crayon disables excerpts and instead my home page will only show auto generated excerpts (when that is available – many posts on my blog are image only so no text at all). I have tried this with all other plugins disabled so it only seems to be Crayon that is causing the problem.

    My blog is based on a custom child theme using the Hybrid theme Prototype as a parent.

    Cheers

    • Aram

      Hey Perry, will investigate this now.

    • Aram

      Ok, I think it is fixed. Nothing to worry about I think, I just wasn’t checking for an existing custom excerpt. Try this:

      http://dl.dropbox.com/u/33811812/Crayon/crayon-syntax-highlighter-1.7.16_beta.zip

      I was planning to release 1.8.0 with the theme editor, but I’ve disabled it in this version until I finish it. There are also numerous fixes, but I still need to test a few things before public release.

      • http://pointatthemoon.co.uk perryb

        That’s fixed it. Cheers Aram

        • Aram

          Glad to hear it!

  • http://pointatthemoon.co.uk perryb

    Brilliant news. Thanks for the quick response!

    I’ll give beta a shot when I get home.

    I installed Crayon in a hurry and haven’t properly got my head round it yet so I may be back with some more questions.

    Really love the clear clean way it presents code.

    All the Best

  • http://www.programmaticallyspeaking.com Per Rovegård

    Hi! Great plugin, I’m trying it out as a replacement to the jQuery Syntax plugin. But one thing I miss is the ability to syntax highlight a fragment of code that is used as part of a sentence. For example, I tried this:

    a strongly typed version of

    But the code is rendered as a separate code block and does not run with the text, so to speak.

    • Aram

      Hey, thanks for using Crayon. I think that’s a great idea. At the moment Crayon can float left right or center and allow flowing text around it, but I didn’t consider highlighting a short line of code within a sentence. I’ll add this alongside the theme editor in 1.8. It’s going to mean a totally different approach. Obviously there can’t be a toolbar or plain code option, so it’ll mean invoking the highlighter on a random code block and putting the result in a span. Hopefully shouldn’t take long. In the meantime, in case you didn’t know you can also use [c# atts...][/c#] type tags. I tend to use <code></code> when I put small code inside sentences, so I’ll capture and Crayonize those for backward compatibility. Speaking of which, you can also use &ltpre lang=”c#”&gt if you use other plugins, just in case you ever turn Crayon off.

      • http://www.programmaticallyspeaking.com Per Rovegård

        Cool, it will make it possible for me to move away from jQuery Syntax completely.

        I know about the other tag variants. Actually, I turned off pre parsing to be able to test Crayon on only chosen code blocks. But I don’t use the lang attribute – my pre blocks have class=”syntax java” (for example). Crayon took over anyway – is that a bug?

        • Aram

          Ah, it would still highlight using the fallback language. So if it was set to java, then you don’t need to keep specifying the lang attribute. All attributes do is override the global settings, with the exception of the URL and Title etc :)

      • http://ak.net84.net/ Aram Kocharyan

        Hey, finally got around to it: http://ak.net84.net/crayon/inline-crayons/

  • http://brettchalupa.com Brett Chalupa

    Awesome plug-in, thanks so much! It’s clean, simple, and works.

    • Aram

      You’re welcome :)

  • http://davecoast.com Dave

    Thanks for a good looking easy to use plugin.
    I’m using the Showcase Template in Twenty-Eleven and when it displays the post section – Crayon does not work. When I click on a different page or the post itself all is good.

    • Aram

      Yep, this was fixed in 1.7.17:

      Added a setting to use just the main WP query or to use the_posts wherever it is used (default now).

      So basically, the issue was this:

      Since your theme uses a page to load a totally different query from the page it visits there’s no way for Crayon to know what you’re going to request until it reads your has_posts() request. By that time, the header is already written so there’s no chance to enqueue themes and fonts that you’ve used in your Crayons. Fortunately I’ve added a feature so that they are embedded each time if needed. This is a bit more inefficient I think, but it works by adding the required css right before each Crayon. This issue won’t occur on any other page on the site because direct links to pages and posts containing Crayons will load just fine with enqueuing, which is why the other pages worked for you.

      The solution will come in 1.7.19. Sigh… it’s 19 now, it was 17 this morning :P Take a look at the changelog, I’ll post an article here about the fix.

  • Pingback: Crayon Global Settings

  • os

    Great plug-in! Has someone created PowerShell language yet?

    • Aram

      Not that I know of. Only one other person has created a language so far :\ But I can certainly add it to future release list. If you know some regex though, it’d be great to get more contributions. Adding a language isn’t particularly hard, just takes a few hours.

  • Gao

    so cool!!!
    我很喜欢!

    • Aram

      Thanks Gao, I appreciate it :)

  • Carl Johnson

    Hello,

    I recently updated crayon to the latest release, and for some reason the line highlighting option does not work. Is this a permanent issue? Or is it just me?

    • Aram

      Marking important lines works with ranges and numbers like mark="5-10,12". Could you send your code and url in an email?

      • Carl Johnson

        I have been using crayon since January, and its really nice, i have been using the line maker flawlessly up until the recent updates, thats when i started noticing the line highlighting has stopped showing up on all of my pages

        Example: http://tinyurl.com/89khcbv

        ^ That page used to have selected lines highlighted, but now it does not

        I have been using the same theme since january, so its not the theme, and i havent added any new plugins, so there shouldnt be any interference i dont think, so i think its odd how that occured

        Also, on some pages, the titles completely dont even show up

        Example: http://tinyurl.com/87hqfy2

        ^ So it seems like its an either or type of thing thats happening. If i want to display the line highlighting, i need to remove the title

        Is there any way to revert back to a previous version for the time being?

        • Aram

          Ah, I think I can fix it now. You can use http://wordpress.org/extend/plugins/crayon-syntax-highlighter/download/ for older versions, but I should be quick!

        • Aram

          Found the bug, homing in.

        • Aram

          Well, found the culprit. For detecting attributes:

          ([^="\'\s]+)[\t ]*=[\t ]*("|\')([^2]+?)\2

          Should be:

          ([^="\'\s]+)[\t ]*=[\t ]*("|\')(.*?)\2

          Basically it wouldn’t match an attribute with a 2 in it due to [^2] which was why it was overlooked.

          Try this: http://dl.dropbox.com/u/33811812/Crayon/crayon-syntax-highlighter-1.7.27-fix.zip

          Let me know if it works for you too, and I’ll post the update.

          • Carl Johnson

            Yes that worked, thanks for the quick reply!

          • Aram

            Awesome :) You can use the files in that until 1.7.28 comes out, I have to add 2 more translations… and then you can update from 1.7.27-fix like usual I believe.

  • Pingback: Wordpress pluginy | Webovník

  • http://www.xfiles.dk Allan Chr

    Nice plugin I was very close to actually using it until I saw that is doesn’t validate was validating on W3C validator using XHTML 1.0 Transitional but not even close. Any plans on creating this plugin so that i validates ?

    Best regards.

    Allan

  • Pingback: Order Does Matter: jQuery conflict solved by reordering

  • http://twitter.com/ruFog Artem Ostretsov

    Good plugin! Can you add yaml highlighting? Thanks a lot!

    • Anonymous

      Thanks for using Crayon. I’ll add it to the planned features list. I’ve got to find some time to add them soon.

    • http://ak.net84.net/ Aram Kocharyan

      Yaml has been added in 1.8.1.

    • http://ak.net84.net/ Aram Kocharyan

      Thanks, It already has yaml

  • Jassy

    Is there a reason there is an update for this plugin almost every time I login to my dashboard?

    • Anonymous

      Probably because I spend a considerable amount of my free time to update a free plugin as more and more users request features to be added. If I group updates it means users will get features later. Do you think that’s a fair price to pay to forgo a little “1″ that appears on your navigation?

      • Anonymous

        No, you’re right. I’ve decided 1.8 won’t have all the features I originally planned to include, like the theme editor and visual editor support. I’m going to postpone that for 1.9 or 1.10 or 2.0 or whatever. Crayon will be updated roughly once a month from now on and only include updates I have time to work on.

        • Anonymous

          Oh and rtfm http://wordpress.org/extend/plugins/crayon-syntax-highlighter/changelog/

      • http://profiles.google.com/david.artiss David Artiss

         Jassy is being a bit out of order. He’s not obliged to update everytime – one of the reasons the changelog exists! As a plugin author myself I wouldn’t be impressed with users complaining about how much time and hard work I’d put into a plugin. Ignore the idiots and keep up the good work Aram!

        • Anonymous

          Thanks David! I got another email recently where someone asked me kindly to group my updates and distribute them to testers rather than updating immediately, which makes sense, but if it’s a tested release and you don’t want to update after reading the changelog – don’t :P

        • Jassy

          Just a little FYI, don’t assume you know what was meant by my comment.  Also, not a “he”.

      • Jassy

        That is all fine and good but my concern was whether or not there were significant security concerns why there were a LOT of updates in a short period of time.  I, like most people, don’t want to use a plugin ridden with security holes.  I like the plugin and it’s the best syntax highlighter that I have found so I did not want to have to abandon ship.

        It’s very strange to see a plugin updated so frequently.

        • http://ak.net84.net/ Aram Kocharyan

          I’m not sure how a syntax highlighter can pose a security threat, that’s all managed by wordpress. I check for admin access when needed, other than that not much else in terms of security. Like I said before, knowing what updates are for is why we have a changelog. If the update doesn’t concern you then you can skip it.

          • Jassy

            Any plugin can pose a security threat if it’s not coded properly.  As I already stated, my question was relating to why there were so many updates in a short period of time.  In my experience, when that happens, security issues are being fixed.  I did not see them in the changelog, which is why I asked the question.  Perhaps the question was worded poorly and did not explain my point fully but it still was/is a legit question.
            Crayon was and still is the most updated plugin I have ever seen.  I never once said that updated a plugin frequently is a bad thing. You and others assumed that’s what I meant.  However, you know what they say about assuming.

  • Pingback: Quotidiana, la autopsia I : Ncasolajimenez

  • Pingback: [WordPress] Crayon Syntax Highlighter « MiNu Blog

  • Pingback: Projekt Soundboard | shell 42

  • http://programmaticallyspeaking.com/ Per Rovegård

    Hi! I discovered a problem with the VB.NET syntax. It seems to treat ‘ as a block comment rather than as a line comment. Compare these two:

    In the first case, the comment line is not colored as a comment. In the second case, also the statement line is colored as a comment. 

    • http://ak.net84.net/ Aram Kocharyan

      Hey. “vbnet” isn’t a valid language id, it’s just “vb” :) You can find all language ids and aliases (usually shorter names for convenience) in Settings > Crayon > Show Languages. The reason those failed was because it was using the “fallback” language (also defined in settings) as the “default” language, where quotes are strings not comments. You should see the language name appear in the toolbar when a specific language id is used. Also, check your log in settings as well, because it will warn you that “vbnet” is not a valid language id, but will still fallback to “default”.

      • Per Rovegård

        Oops! You’re right, much better now. :-) Thanks!

  • Pingback: Wordpress上のコードをハイライト表示するプラグインを導入(Crayon Syntax Highlighter) | gggrf.com

  • Josh

    Hi Aram, great plugin! I installed a new theme on one of my sites and it seems to have broken Crayon, maybe you could take a look? Here is the url: http://goo.gl/Tzuy9

    • http://ak.net84.net/ Aram Kocharyan

      There are a lot of js errors coming up, not related to Crayon but in general. For instance, one script fails because you haven’t included jQuery. That might be it. See it in the js console in firefox or chrome.

      • http://joshmountain.com/ Josh

        Thanks for the reply, it turns out those JS errors were caused by a caching plugin I have installed that was minifying my JS (apparently improperly). I disabled minifying in the plugin settings and that seems to have fixed the JS issues and the crayon buttons now function again, but as you can see there is still some weird padding in between lines I can’t figure out how to fix. Any advice would be much appreciated!

        • http://ak.net84.net/ Aram Kocharyan

          I believe it’s an order of functions issue. Crayon is supposed to replace the code in the post content last to prevent being formatted further, but it would seem the theme is formatting the content after crayon is finished with it, adding in tags and so forth… What’s the name of the theme?

  • Pingback: 世界,你好! | 飞熊在天

  • Pingback: Bila Bercakap Soal Syntax Highlighter | #CodeBase

  • Anonymous

    I am trying to use crayon to display Apache configuration snippets, but keywords between are always lowercase… Is there any way around it?!

    • http://ak.net84.net/ Aram Kocharyan

      I think you’d have a hard time doing that since Apache isn’t a supported language. It highlights  the comments but the functions and syntax aren’t right. I can probably put one together by tonight.

      • Anonymous

        I’d appreciate that.
        Thanks

        • http://ak.net84.net/ Aram Kocharyan

          Put this into the langs folder: http://dl.dropbox.com/u/33811812/Crayon/apache.zip and use

          (mini tags) or

          • http://joshmountain.com/ Josh

            This is really awesome, I was looking for the exact same thing! You should definitely include this language in future versions of the plugin.

          • http://ak.net84.net/ Aram Kocharyan

            Thanks Josh, glad it works. It’ll be released in 1.8.3 along with other features.

          • http://trindade.myphotos.cc/ António Miguel Trindade

            I just updated my WordPress plugin and was very glad to see it is already included!!! :)

          • http://ak.net84.net/ Aram Kocharyan

            Yep, added it in 1.8.3 along with inline and comment support etc.

  • http://ak.net84.net/ Aram Kocharyan

    Thanks I’ll take a look in the morning, it’s 2 am here :P

    • http://joshmountain.com/ Josh Mountain

      Fair enough :) thanks a million for all your help!

      • http://ak.net84.net/ Aram Kocharyan

        Yeah I was right, just needed to specify a higher priority on the_content: http://dl.dropbox.com/u/33811812/Crayon/crayon-syntax-highlighter-1.8.2.zip

        • http://joshmountain.com/ Josh Mountain

          You are the man! Thanks for the amazing support, and for the readme shoutout as well. Cheers!

          • http://ak.net84.net/ Aram Kocharyan

            Thanks :) this will be in the 1.8.3 release as well

  • Pingback: Как красиво вставить программный код в Wordpress. Подсветка синтаксиса. | Мастерская блоггера. Полезные инструменты и информация.

  • Felipe Alameda A.

    Really nice plugin, too bad it does not validate HTML nor CSS. Many errors are found. So many, that it is not worth trying to fix them.

    You should look at that issue because, as I said, the plugin is great and works really well. A lot of work and effort that for those who do care about complying with web coding regulations become useless. Too bad.

    • http://ak.net84.net/ Aram Kocharyan

      Hey, thanks for using Crayon. Would you happen to know how to store W3C compliant attributes in a div that aren’t valid attributes? Eg. I use settings=”…” and load them in js.

    • http://ak.net84.net/ Aram Kocharyan

      Crayon is now HTML 5 valid, expect 1.8.4 shortly. Make sure to check out the latest post here about it when it comes out.

  • http://ak.net84.net/ Aram Kocharyan

    Hey, thanks for using Crayon. Would you happen to know how to store W3C compliant attributes in a div that aren’t valid attributes? Eg. I use settings=”…” and load them in js.

  • Will

    Something weird happened: http://will-bloggs-too.com/ – any ideas or suggestions on how to correct the issue? 

    • http://ak.net84.net/ Aram Kocharyan

      Yep, this happened to someone yesterday. Disable “Attempt to load Crayon’s CSS and JavaScript only when needed.” if it isn’t working well with your theme. Also, you can get http://dl.dropbox.com/u/33811812/Crayon/crayon-syntax-highlighter-1.8.4-9.zip which is the latest build for 1.8.4 and addresses this broken look issue. If it ever breaks, then it should will look like plain text now. Also see http://ak.net84.net/php/loading-css-and-javascript-only-when-required-in-a-wordpress-plugin/ which is where the “?” will take you next to that setting.

  • Pingback: 代码高亮插件Crayon Syntax Highlighter | SEEing is BELIEVING

  • Pingback: Crayon Syntax Highlighterの使い方 | Design Wood Tree

  • http://cantondog.com CantonDog

    This is a really great plugin. Thanks for making this. The scrollbars don’t work in my site. It’s probably something to do with my theme though.

    • http://ak.net84.net/ Aram Kocharyan

      Thanks! Try the latest beta, it adds custom scrollbars for Chrome. It might not fix your issue though. If you’d like scrollbars to appear all the time, there’s a setting for it in Settings > Crayon > Always show scrollbars. http://dl.dropbox.com/u/33811812/Crayon/crayon-syntax-highlighter-1.9.0-7.zip

  • http://twitter.com/rodtrent Rod Trent

    Just loaded the updated posted overnight and it trashes my entire site.  I have to disable Crayon highlighter before the site will display again.  Must be something in the way the new version loads?  http://www.myITforum.com

    • http://ak.net84.net/ Aram Kocharyan

      How do you mean trashes entire site? Has it totally obliterated your posts? Is it a temporary effect from the plugin not displaying properly?

  • Marcus Held

    Awesome Plugin. I really love it. But since the last update I have the problem, that the js makes an error.

    It sais: uncaught TypeError: Object # has no method ‘style’
    on crayon.js:162

    example: http://blogasart.de/2012/02/15/warum-modulo-so-genial-ist/

    • http://ak.net84.net/ Aram Kocharyan

      In the process of fixing it now.

    • http://ak.net84.net/ Aram Kocharyan

      Ok, I found your problem. Delete the second jQuery in your header (v1.3.2):

      You’ve already got it included with WordPress up the top. When you add a second jQuery it overwrites the .style function I defined before leading to the error.

  • Anonymous

    There is an issue with this plugin and comments.

    If I enable the “Allow Crayons inside comments” option, comments on posts will display with no paragraphs. The and tags simply will not be inserted into the comments HTML when comments are displayed.

    If I disable the option, comments will properly contain paragraphs.

    • http://ak.net84.net/ Aram Kocharyan

      looking into it

    • http://ak.net84.net/ Aram Kocharyan

      Ok, this is fixed in 1.9.3

    • http://worldoweb.co.uk Ridgey

      I am having the same issue. I simply want to add a little HTML snippet into a comment and it tries to render it as HTML instead of code. I have tried using the ‘

      ‘ tag and ‘pre’ tags. Could it be a theme related issue?  I am using a custom child theme of 2011 WP theme

      • http://ak.net84.net/ Aram Kocharyan

        Are you using 1.9.3?

        • http://worldoweb.co.uk Ridgey

           Yes

          • http://ak.net84.net/ Aram Kocharyan

            Could you please provide a URL of where the issue is occurring and the name of the theme so I can investigate?

          • http://worldoweb.co.uk Ridgey

            PHP example:

            http://www.worldoweb.co.uk/2009/worldoweb-wordpress-theme#comment-268HTML Example:http://www.worldoweb.co.uk/2010/new-world-wordpress-theme#comment-294

            I am using a custom child theme of the TwentyEleven WP Theme but haven’t altered anything with the comments section so it would work with the TwentyEleven theme.  I have changed the settings to work with WP comments and also unchecked ‘Attempt to load Crayon’s CSS and JavaScript only when needed’ option.

            I am not too concerned over this issue as it works perfectly in my blog posts.  Thanks for developing this great plugin.

          • http://ak.net84.net/ Aram Kocharyan

            Hmm. It seems to me pre tags are not captured, since those are still pre tags and not actual Crayons – which would a div with a “crayon-syntax” class. Check under settings if you’re capturing in Crayons in comments and if you’re capturing pre tags. In any case, you said you tried the [crayon-4fb9354a02f8a] style tag and it didn’t work, but that wouldn’t create a pre, they all end up being a div with the crayon class.

  • Pingback:   Latest Version of WordPress Installed by curnow.biz

  • Frank Yao

    Hi, this highlighter is the best one I’ve used. But a little probelm(in Python) is:
    1. comment between ”’ (three single quotes) is not handled. your plugin realized that as code.
           Example1: ”’
                                 it is a comment
                          ”’
    2. for python decorator, your plugin only handle one decorator
           Example2:    @decorator1
                             @decorator2
                             def test():
                                   pass
            in this example, your plugin only make decorator2 as a style like decorator.

    both example 1&2 can be found in my blog:http://baniu.me/2012/04/python-api-for-zabbix-v0-2/
    example 1 is between line 11 and 44
    example 2 is in the line 174,175
    Thank you

    • Frank Yao

      example 1 is OK. sorry for mixing up

      • http://ak.net84.net/ Aram Kocharyan

        Thanks, I can’t say when I’ll have time for working on this, but I’ll eventually get to it, super crazy busy at the moment!

  • Louis-Michel Veilleux

    Hello,

    I have some difficulty using the crayon syntax highlighter for XML code and I was wondering if you could help me out.  The problem is that I cannot get the ‘<’ and ‘>’ symbols to display properly.

    For example:

    HTML Editor: <pre lang=”xml”>&lt;test/&gt;</pre>
    Visual Editor: <test/>
    Result: &lt;test/&gt;

    So everything works as expected in the HTML and Visual Editor, but the final result is incorrect ( <test/> should be displayed ).  I tried to use ‘<’ and ‘>’ symbols directly in the code instead of their respective entities, but it created additional issues ( code displayed incorrectly in Visual Editor, code loss when switching back and forth from Visual Editor and HTML Editor, etc. ).

    Do you have any idea how to fix this?

    Unfortunately I do not know which version of your plugin I am using ( I am not the admin on the blog I am posting on ).  I also noticed that the Tag Editor is missing from the Visual Editor.

    Thanks

    • http://ak.net84.net/ Aram Kocharyan

      It looks like you’re using an older version. You can check the version in the source code of the web page. It’ll be before the actual Crayon div. This encoding issue was fixed in 1.9.1.

      • Louis-Michel Veilleux

        I am indeed using an older version ( v. 1.7.22 ).  I’ll see if I can get my admin to update to the most recent version.

        Thanks for the help!

  • http://www.blogasart.de/ Marcus Held

    Hi,

    Thank you for your great support and awesome plugin.

    I recently found a bug. When I want to write a Program like
    public class bla implements Comparable {…}
    the Plugin doesn’t render . Only when I’ editing the html source and replace with > it works properly.

    Bests,
    Marcus

  • Anonymous

    Why do i need to use wp loop to initiate crayon ? im using a custom framework where the content is filtered but crayon still doesnt work. Only way to use it as ive tested, is in loops via the_content() method. Love this plugin, but hate possibility not to be able to use custom methods :(

    Any work arounds ?

    • http://ak.net84.net/ Aram Kocharyan

      Yes of course. The content filter is used for post content, which is usually where Crayon’s will live. If you’re doing something custom, you could either use http://codex.wordpress.org/Function_Reference/apply_filters on the_content (which should use the Crayon filter as well) or you can make custom Crayon instances like in util/preview.php. Check out that file to see how an external PHP file can create a Crayon and print it on screen.

      • Anonymous

        Hm… I have a custom framework for WP that im using where post->post_content is automatically filtered by ‘the_content’ but it didnt work, i also tested manually to filter but nothing there either. The only way i got i working was via the_content(). Also worth to mention was that i also copied the_content() actions and tried with that but nothing. Seems there is something else working along with the_content( ) method that im missing out.

        • http://ak.net84.net/ Aram Kocharyan

          You can manually create one like this:

          $crayon = CrayonWP::instance();

          $crayon->code(‘some code’);

          $crayon->title(‘Sample Code’);

          $crayon->output($highlight = true, $nums = true, $print = true);

          If that’s what you meant. These are in /util/preview.php, which creates a Crayon manually.

          • Anonymous

            That seems like a wonder-work. Ill test it out later on and let you know how it goes. Thanks a lot! :D

          • Anonymous

            Love it love it love it!!! Cant express myself how much i love this plugin :D . Anyhow, that worked as supposed!

            Thanx!

  • Pingback: Crayon Syntax Highlighter plugin | JS Tips

  • Pingback: Besseres Syntax-Highlighting in Wordpress | Bjoern's Blog

  • Pingback: 本站安裝的Wordpree外掛一覽表 - Hareion's手札

  • http://www.i4-apps.com/ davidb

    Hi .. for me the code seems to always be displayed in plain unthemed text. Even if I go to the setting menu and change the theme, although it quickly flashes up, what is displayed on the screen is the same unthemed text… 

    any ideas?

    • http://www.i4-apps.com/ davidb

      Ignore that :-) … I found the option to turn that off… enable plain code view

  • http://www.facebook.com/lautarox Lautaro Petaccio

     What could be the cause to make crayon fail to load in the home page?, It just fails in the home page, when you see the hole post, it works perfectly.
    Thanks!

    • http://ak.net84.net/ Aram Kocharyan

      In Settings:
      * Disable “Attempt to load Crayon’s CSS and JavaScript only when needed.”
      * Enable “Disable enqueuing for page templates that may contain The Loop.”
      * Disable “Load Crayons only from the main WordPress query”
      * Disable enqueuing of themes and fonts.

      Do these sequentially. Also provide a URL so I can take a look. These issues are usually caused by theme conflicts.

      • http://www.facebook.com/lautarox Lautaro Petaccio

         Also, as I saw, the code isn’t beeing showed in the home page, not even raw text.

        • http://ak.net84.net/ Aram Kocharyan

          Yep, spam filter prevents people posting their links… I took a lot at your site, it seems you’re displaying excerpts not the full content of a post. And since the code is further down they don’t appear because the excerpt length is limited.

  • http://www.facebook.com/bohusz Bohuslav Bohusz Roztočil

    Hi, I’d really like to use Crayon, but I’m faced with the following problem – the language I’ve chosen is allways forgotten just after I save (update) the post. Something removes the class attribute Crayon adds to the pre tag. I’m not sure it’s Crayon’s problem, but I can’t find any WordPress setting which could do this.

    • http://ak.net84.net/ Aram Kocharyan

      Hmm, will need to look into that. You can of course switch to the HTML editor and use all the other methods. Check if the class attribute is stripped on save or when switching editors etc.

  • Dave

    The mark attribute does not seem to accept multiple groups. For example mark=”3-7, 15-18, 21, 27″ – groups 15-18 and 21-27 will not highlight although 21 and 27 will because they are individual. User 1.9.4 – just let me know if you need more info. Thx this is still my favorite plugin.

    • http://ak.net84.net/ Aram Kocharyan

      Sorry, I only just had time to work on this all week. Investigating.

    • http://ak.net84.net/ Aram Kocharyan

      Quite right, try replacing with this file. It’ll be in the 1.9.6 update. http://dl.dropbox.com/u/33811812/Crayon/minor/crayon-syntax-highlighter-1.9.6-minor-1.zip

      • Dave

        Success – looks good. Tested a handful of scenarios including: 

        [crayon-4fb9354a01c06 mark="1-3, 7-9, 11, 15, 19-21, 25"]

        [crayon-4fb9354a02008 mark="1, 3, 7-9, 11, 15, 19-21, 30-32"]

        [crayon-4fb9354a023d2 mark="1, 5-7, 10-12, 15, 19, 22-25, 28-31, 34-35, 38, 39, 44, 47-50"]

        [crayon-4fb9354a027bb mark="1-5, 10-12, 15, 19, 22-25, 28-31, 34-35, 38, 39, 44, 47"] 

        • http://ak.net84.net/ Aram Kocharyan

          Brilliant, committing my code.

  • Pingback: Sitede Kullandığım WordPress Plugin’ler | Berker Sönmez Personal Website