Crayon Syntax Highlighter

Syntax Highlighter supporting multiple languages, themes, fonts, highlighting from a URL, local file or post text.

Beta Development Releases 


Stable Releases + Info 


Sample

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 :)

Pre-formatted Tags

You can also use <pre class="attributes" title="something">...</pre> so that:

  • Disabling Crayon still presents the code as pre-formatted text and is readable
  • Enforces proper encoding of entities (&lt; in HTML view and not <)
  • The code snippets are reusable with other syntax highlighters

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>

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). 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"
range Specify the range of lines from the input code to use in the output. You can specify a single number or a single range. range="3-5", range="3"

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.

Languages

Language information is found here in the WordPress Admin:

Settings > Crayon > Languages > Show 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. If your language is missing, send me an email. There will be more languages added over time, of course.

Themes

Crayon comes with built-in Themes to style your code. See a sample of the current set of themes. 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. The specification for CSS classes is here.

Comments

Then enable these settings in WordPress Admin > Settings > Crayon:

  • “Display the Tag Editor in any TinyMCE instances on the frontend (e.g. bbPress)”
  • “Allow Crayons inside comments”

Before Crayon 2.1.2 you needed to add the following manually at the end of your theme’s functions.php file to enable TinyMCE in the comment box. This requires at least version 3.3 of WordPress.

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:

  • Recommended Method
    • Download POEdit. Add .. to the source paths under catalog preferences, and crayon__, crayon_n and crayon_e under source keywords.
    • Update and start making translations.
    • Send the .po file to me at crayon.syntax@gmail.com and give me your name and a URL for credit.
  • Alternative Method
    • Download Codestyling Localization.
    • 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. You can also include Google Web Fonts.

Disable Highlighting

You can temporarily disable highlighting for a piece of code using the highlight="false" attribute. You can also prevent Crayon from touching any kind of tag by using the crayon="false" attribute. If using pre tags, put crayon:false in the class.

Minification

Since 2.2.0 Crayon’s JavaScript and CSS resources are minified into single files. Previous versions depended on the W3 Total Cache plugin to minify your CSS and JavaScript.

Use in Other Environments

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

Other Uses in WordPress

If you want to show Crayon in places other than posts and comments in WordPress: Adding Crayon To Posts In WordPress Programmatically

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.
crayon false Prevent from turning the tag into a Crayon.
highlight true/false Prevent from highlighting the code, treats it as plain text instead.
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

Legacy Tags

Using the legacy tag  [crayon attributes] some code [/crayon] is possible but I highly recommend using <pre> tags instead. You can also convert legacy tags automatically.

Mini Tags

You can use Mini Tags but they are still legacy tags and are depreciated.

Troubleshooting

Why are the controls not working?

Make sure jQuery is included in your theme ONCE and before all its dependents. Make sure you use wp_register_script instead of just printing your own <script> tag, otherwise the jquery dependency will be missing and WordPress won’t load any of the Crayon scripts which require it. If you want to change jQuery to your own version, do it like this:

Failing to register will not only fail to load Crayon’s scripts, but any other plugin smart enough to use the version of jQuery that is included with WordPress.

Why am I only seeing [crayon-3ffr7fa34a321/]?

Your theme is being naughty. Find where it prints the content/excerpt on that page in the PHP and make sure to add this line before printing, where $output contains your content:

$output = apply_filters('the_content', $output);

This ensures that the content can be filtered by plugins, such as Crayon. Otherwise, Crayon detects and creates the code but can’t replace those funny looking tags in the content.

  • 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-519df0412cb69-50f0c369c9e81] 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 (//.*?$)|('[^rn]*). 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-519df0412c780-50f0c369bac48] 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://aramk.com/ Aram Kocharyan

        Hey, finally got around to it: http://aramk.com/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://aramk.com/ Aram Kocharyan

      Yaml has been added in 1.8.1.

    • http://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ Aram Kocharyan

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

  • http://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/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://aramk.com/ 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://aramk.com/ 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://aramk.com/ Aram Kocharyan

      In the process of fixing it now.

    • http://aramk.com/ 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://aramk.com/ Aram Kocharyan

      looking into it

    • http://aramk.com/ 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://aramk.com/ Aram Kocharyan

        Are you using 1.9.3?

        • http://worldoweb.co.uk Ridgey

           Yes

          • http://aramk.com/ 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://aramk.com/ 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-519df04124e5f-50f0c364915ff] 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ 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://aramk.com/ Aram Kocharyan

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

    • http://aramk.com/ 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-519df04123aea-50f0c364531f8 mark="1-3, 7-9, 11, 15, 19-21, 25"]

        [crayon-519df04123ecf-50f0c364535e1 mark="1, 3, 7-9, 11, 15, 19-21, 30-32"]

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

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

        • http://aramk.com/ Aram Kocharyan

          Brilliant, committing my code.

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

  • Pingback: Crayon Syntax Highlighter (and its studly author) | SelfPwnt

  • Alan

    Hi,

    Just want to say thank you for this plugin and submit a small bug report.

    My site received a lot of traffic yesterday and I got a few people mention that the plugin did some weird flickering on google chrome when the mouse rolls over. I updated to the latest version today and it’s still happening. I narrowed it down to this line of code.

      if (!crayon[uid].scroll_block_fix) {^M                        // Fix dimensions so scrollbars stay inside                        main.css(‘height’, main_size.height); <—                        main.css('width', main_size.width);                } 

    I haven't had time yet to go through the library and figure it out properly. Thought you might look at it and see the problem immediately.

    p.s is this code hosted anywhere? bitbucket/github or similar where I could fork it create a branch and then send a pull request to you if I find a fix?

    Thanks,

    Alan

    • http://aramk.com/ Aram Kocharyan

      Hi Alan,
      Thanks I’ve spent quite a lot of time fixing idiosyncrasies in Chrome and other browsers regarding those few lines. I believed the bugs were fixed however, could you provide a URL? The code is hosted on the SVN of WordPress plugins, but I also have a Git:https://github.com/aramkocharyan/crayon-syntax-highlighter

      • Alan

        Thanks for your quick reply Aram.

        It might be because I’m using multiple highlighters on one page. Checkout

        http://alanhollis.com/blog/

        as an example.

        • http://aramk.com/ Aram Kocharyan

          It could be a JS conflict perhaps. I can’t replicate the error on my side without installing everything you have, so perhaps try and disable all plugins but Crayon and switch to the default theme, then switch back to this one and activate each plugin again until it breaks again. Then we’ll know what it’s conflicting with.

  • http://www.osimood.com/ OsiMood

    XML code use to work but seems broken in latest versions

    • http://aramk.com/ Aram Kocharyan

      I’ve tested it, seems to work for me. Provide a problematic URL if possible. The post text would also be useful. If you’re using 1.9.9, try to remove and redownload the plugin from wordpress. Your settings will remain.

      • http://www.osimood.com/ OsiMood

         try the same url… I just switch to lang:xhtml you’ll see the results

      • http://www.osimood.com/ OsiMood

        Please try the same url: osimood.com/2012/05/news-apn-database/
        Now lang is set to XHTML, you will be able to see the result

    • http://aramk.com/ Aram Kocharyan

      That code doesn’t have a specified language. Edit it in the Tag Editor and set it to XHTML, or set that as the default language if most of your site uses it.

  • Miriam de Paula

    Hello! I like your plugin and I use it in my site, but I’m not able to insert the following code – 
    http://pastebin.com/7Eh9xEsq. When I enter this code, such as PHP or HTML, it breaks my site. How can I fix this????

    Thanks in advance!

    • http://aramk.com/ Aram Kocharyan

      Thanks for posting this, I’m taking a look now.

    • http://aramk.com/ Aram Kocharyan

      Ok, fixed in 1.9.12.

  • Praveen

    Can I use this with Syntaxhighlighter Evolved? Because I am using syntaxhighlighter and I want to change to your plugin. If I enable both will there be any conflict?

    • http://aramk.com/ Aram Kocharyan

      It depends, if you make sure to use only [crayon-519df04122f30-50f0c363d11b0] tags then there won’t any issue. pre tags and mini [php] like tags could be caught by both, you’ll have to experiment :P You can toggle what Crayon captures as a tag in Settings > Tags.

  • Daniel Henry

    I have an issue where when I put the code in, it repeats itself in plain text underneath the highlighted code. I feel like I have tried everything to fix it.

    This is new, on the pages where it worked before it is still working. Only happens in new posts.

    No new plugins or updates.

    • http://aramk.com/ Aram Kocharyan

      Hi Daniel, I’ve added an issue: https://github.com/aramkocharyan/crayon-syntax-highlighter/issues/4 and I’m going to spend some time tomorrow evening getting a grip on this. I’ve fixed this bug in a lower version, so chances are it’s not completely bug proof yet :) The temporary approach to fixing this is to disable Mini Tags in settings if you don’t use them (Tag Editor is better now).

    • http://aramk.com/ Aram Kocharyan

      This is now fixed in the dev repo

  • horst

    I tried using it on 2 different sites but I always get that error: Object [object Object] has no method ‘style’ in crayon.js line 171.. My Version is 1.9.12!

    Any ideas?

    • horst

      WordPress Version is 3.4.1

      • horst

        Sorry, but I did not see the “More Comments”-Button! I fixed it.
        btw: Thank you for that great plugin!

  • Frank

    Hello~
    First, I would like to say Thank You for your excellent plugin! It works perfect in previous version. But after I updated the plugin to 1.9.12 today, there’s a big problem… The code display in both homepage and the post page became static (and nothing happened when buttons clicked). However, the Live Preview for code display still works well in the plugin setting page. Here’s the link of post page: http://zhangyuyu.com/internet/317
    Could you please help me? Thanks a lot!

    • Frank

      BTW, the WordPress version I’m now using is 3.2.1. Looking forward to your reply… Thanks!

    • http://aramk.com/ Aram Kocharyan

      Hi Frank, sorry I haven’t ben getting updates from disqus anymore for some reason and didn’t see this until today. Please take a look at your javascript console in Chrome or Firefox and see if any errors are being reported. You’re including jquery twice, once on line 16 then again on line 500 of your source code, remove the second one :)

      • Frank

        Hi Aram, thanks a lot for your timely reply!
        I’ve checked Javascript Console in Chrome and found an error report in crayon.js (Line 171.
        var main_style = main.style();
        Uncaught TypeError: Object # has no method ‘style’) Sorry that I’m not familiar with jQuery and didn’t find where it is included in source code… Actually I didn’t write any Javascript code for my blog. Maybe you mean this is a conflict problem with WordPress or other plugins that jQuery is wrongly included more than once? Could you please specify the solution… Thanks very much and hoping your plugin more and more excellent!

        • http://aramk.com/ Aram Kocharyan

          See the source in chrome and search for jquery: view-source:http://zhangyuyu.com/internet/317 I think either a plugin or your template is including jquery twice.

          • Frank

            Thanks a lot! I checked the source code and found the re-including problem is caused by a disqus-like plugin. I’ve edited the template file and now crayon works perfectly!

            Thanks again for your kind help :)

          • http://aramk.com/ Aram Kocharyan

            No problem, I’ve fixed this so it can’t happen in the future even with two jQueries.

  • Per Rovegård

    It would be nice with an option to disable Crayon for a particular <pre> tag. Just disabling syntax highlighting is not what I’m after – I want Crayon to leave the <pre> alone altogether. I tried wrapping the <pre> in [plain], but that gave a very weird-looking result.

    • http://aramk.com/ Aram Kocharyan

      Thanks for reminding me, though I did forget the details I remember that I did have this feature. I’ve updated the table above and also under the disable highlighting section. Use crayon:false in the class of the pre and you should be fine. There was a bug with this that I’ve fixed for the 1.9.13 beta available in github, but you can still use crayon=”false” as an attribute (though if you’re touchy about validator issues I’d use the beta for now).

      https://github.com/aramkocharyan/crayon-syntax-highlighter

      • Per Rovegård

        Thanks, crayon=”false” worked well. I also tried the version from github, but got:

        Warning: preg_match() [function.preg-match]: Empty regular expression in …/wp-content/plugins/crayon-syntax-highlighter-beta/crayon_wp.class.php on line 619

        …and no crayons worked at all!

        • http://aramk.com/ Aram Kocharyan

          Hmm… Reporting that as a bug :)

        • http://aramk.com/ Aram Kocharyan

          That’s fixed in the dev repo

  • Pingback: 代码高亮(插件版) | 末日札记

  • Pingback: Using Crayon Syntax Highlighter with Delphi | squashbrain

  • http://www.facebook.com/pcinusa Patrick Lu

    Hi,

    I’m trying your plugin, but how some reason, if I enable Crayon, then my visual editor toolbar disappeared and text in the editable window are all white color.

    Any idea?

    Thanks,

    Patrick

    • http://aramk.com/ Aram Kocharyan

      Hmm, could you give a screenshot?

      • http://www.facebook.com/pcinusa Patrick Lu

        Hi, did you see the screenshot I posted a while ago?

  • Pingback: » シンタックスハイライト

  • http://www.blazewebstudio.co.za/ geoffreygordon

    Please help, I assume this plugin makes the tags a different colors in html editor side of a page on WordPress. I am using thesis theme and i just cannot get it to work? ??? Any suggestions.

    • http://aramk.com/ Aram Kocharyan

      Do you mean themes? You can change them in settings, a few are included. You can easily customise your own by copying the /default folder and renaming it to /yourtheme and also changing /yourtheme/yourtheme.css and any occurrence of default to yourtheme in that css file. Then do whatever CSS you like.

      • http://www.blazewebstudio.co.za/ geoffreygordon

        no matter what color scheme i choose form your plugin settings it doesn’t show up at all in the code?

        • http://aramk.com/ Aram Kocharyan

          Could you please use the console in chrome or firefox and see if any resources have failed to load?

  • Pingback: [WP] インストールしたプラグイン | 最近,気になったこと...

  • http://aramk.com/ Aram Kocharyan

    Try to disable all other plugins and run Crayon in the default wordpress theme – then slowly renable all plugins until you find the one that’s causing the issue. If it turns out to be Crayon report back :)

    • Patrick

      I followed your suggestion disabled all but Crayon plugin and used default wordpress theme. It’s still the same problem on Firefox and Chrome. On IE8, I could get the visual editor to show, but I didn’t see the tag editor’s icon on either Visual or HTML tab… Please help.

  • Pingback: [WP] Crayon Syntax Highlighter | NaeilStory.net

  • Dom

    Fantastic script ! :) Could you add “Line wrapping” in the next update, please ? :)

    • http://aramk.com/ Aram Kocharyan

      Thanks, I’ll look into that. The next one is a stability update but hopefully the minor release after that can support it.

  • http://twitter.com/mariachimike mariachimike

    Thanks for your efforts on this, I just installed it today through the WP Admin console. Unfortunately, when I click the [crayon-519df04121ba8-50f0c362a08cc] button nothing happens. I checked the console and I’m getting a 404 on this file: /plugins/crayon-syntax-highlighter/util/tag-editor/crayon_te_content.php

    If I manually code it and I open the Preview for the post, it works fine in the Preview.

    Is this a known issue?

    • http://aramk.com/ Aram Kocharyan

      Hmm, can you visit the URL that gives a 404 from your browser and check if it exists on the server as well?

  • Pingback: How to Add Code Snippets Samples in Wordpress Posts Without Plugin - Providing latest Information Technology Tips - i-Tech Tips

  • Yui

    Thanks for the this great plug-in!

    I’m having an issue where, when I try to jump to a portion of a page using a url that ends in #comments, for example, I get bounced back to the top of the page. I don’t know what’s causing this bizzare behavior, but it seems to go away when I deactivate Crayon. Here is an example: http://pixelyes.com/2012/06/28/switching-from-photoshop-to-gimp/#comments

    Any thoughts on what might be causing this and how it can be fixed?

  • Pingback: Najlepszy syntax highlighter do WordPress’a | Knowicki Bloguje

  • kn007

    你好,首先呢,这个插件是我用过所有的(大多数的)高亮插件最好用的一款,但是在之前的版本,我都没发现什么bug,但是这次更新后,发现类似于http://kn007.net/topics/2012/09/22/memories-memory-a-place-nearby-lene-marlin/#comment-1376这种带跳转到
    #comment-1376的网址,在其自动显示该条评论时,总会自动回到页面顶端,希望能有个解决办法,谢谢!另外能否是插件按需加载?比如说只在页面加载个判断,当有需要的时候,加载其他js和css。不然加载太多了,影响速度啊。

    • http://aramk.com/ Aram Kocharyan

      Thanks, I don’t speak Chinese, but I translated it. I couldn’t find any issues testing on 2 online servers or my local one, and I couldn’t find any issues in the link you described since it didn’t have any code.

      • kn007

        right,没错,兄弟。虽然里面并没有任何高亮代码,但是页面加载了caryon的css和js。他使得页面在加载结束时自动回到顶端。我在你这里,这张页面上,同样发现该问题。当页面加载完毕之后,页面回到顶部。能否解决?谢谢!

        • http://aramk.com/ Aram Kocharyan

          Ah ok I see it now. I’ll see if I can fix that.

  • Pingback: Changing wallpapers using a shell script | Linux Training & Certification

  • Pingback: Pythonic SVG’ing « ianscottwilson.com blog

  • kn007

    一个新的问题出现,高亮语法调用了wp的jQuery 1.7.2,然后导致严重js错误,网页很多js都失效了,希望能不使用内置jQuery,谢谢

    • kn007

      已修复,非插件原因,插件与插件之间冲突原因

  • Pingback: WordPress代码高亮插件 | 极客吧-专注于各种IT技术的研究

  • Pingback: BilDblog.ru » Blog Archiv » Как выводить код в публикациях WordPress?

  • Pingback: WordPress代码高亮插件推荐 | 极客吧-专注于各种IT技术的研究

  • Pingback: C-Sharp MessageBox Examples | Zero-AGL

  • softwaretester

    just a small issue everybody can prevent: when using “consolas” blogpage, archives and pages using codelines will not be loaded in IE7 und IE8. guess statusline will show the problem: loading fonts/consolas/consolaswebfont.eot?#iefix) (….

  • Pingback: Casting .toString();

  • leiqi

    Just For Thx.

  • Pingback: Crayon Syntax Highlighter und .htaccess | Bjoern's Blog

  • Simone

    Version 1.14.1 has a problem with Fancybox for WordPress http://plugins.josepardilla.com/fancybox-for-wordpress/ or had to go back to 1.13.1

    • http://aramk.com/ Aram Kocharyan

      Yep, fixed now! Download the latest beta zip.

  • Pingback: Some WordPress Plugins | Chen Shan

  • rhempel

    Something has gone wrong in 1.14 – including files from my local filesystem no longer seems to work. I have red permissins, the path is correct because if I change the filename to a non-existent file, there’s an error in Crayon’s log. I still have lots of content that uses [crayon-519df04120c0a-50f0c361baef6 url="./foo/bar.c" ] syntax.

    Not sure what to do next – the plugin was working correctly up to 1.14

    • http://aramk.com/ Aram Kocharyan

      You can revert back to 1.13 while I fix issues. Also, backup your database and convert your tags if you’d like to use pre tags compatible with the tag editor, though there isn’t as much use for them since you’re using only local paths and no code (nothing will show up in the pre anyway). I’ll check it out and fix the issue.

    • http://aramk.com/ Aram Kocharyan

      I’ve just checked with the latest dev beta and it seems to work fine if you specify a local url in the tag editor. There are two things wrong with your tag: 1) giving a relative path is fine, but you don’t need to use “./” – it will append your given path to the one under Settings > Crayon > Files. 2) You have a backslash, but you need a forward-slash (as with XHTML elements). Using the forward slash also works. For this reason, it might be easier to use the tag editor in the visual mode.

  • Chris L

    When I activate Crayon, it kills my whole site…I get nothing but a completely blank page (and nothing in the view source). Any tips on troubleshooting this? There is nothing logged in the log file Crayon keeps.

    • Chris L

      Well, I discovered that it’s some kind of conflict with the WordPress Social Plugin … but what the source of the conflict is remains beyond my ability to diagnose. Any advice is welcome, as I rely on the Social plugin for Twitter Tools to work!

      • http://aramk.com/ Aram Kocharyan

        I activated it here and found only one issue – comments said they were closed, but I was still able to load my site. What you’d want to do is look at the PHP log to see what errors are being through. You can do this by setting WP_DEBUG to TRUE in wp-config.php in the root of your website and the error should appear on the screen.

  • Konstantin Greger

    Hey Aram,

    great plugin – thank you for the hard work you obviously put into that!

    Only, I’m afraid I have a little problem here: whenever I create a crayon and adorn it with some attributes (mainly lang and start-line) those attributes disappear after saving the post or hitting preview. Same for the Tag Editor and manually editing the code (which I prefer): it always leaves my with the plain <pre> tags…

    Any ideas what might be causing this behavior? I browsed through the extensive list of comments here, but couldn’t find anything related.

    Please keep up the great work,
    Konstantin

    • http://aramk.com/ Aram Kocharyan

      Hi Konstantin, thanks for using Crayon! Unfortunately I haven’t been able to reproduce this issues – settings are still there after publishing and previewing, with both [crayon-519df04120439-50f0c3617f5ea] tags and also pre tags using the Tag editor in both html and visual modes. Could you please summarise your wordpress environment? What server OS, language, version, other plugins, the theme etc? These are likely to cause possible conflicts.

      • http://www.konstantingreger.net/ Konstantin Greger

        Hey Aram,

        apologies for the belated reply.

        Here’s some information about my WP environment:
        - 64bit Linux server
        - running Apache 2.0
        - PHP version 5.3.17
        - theme: “Clean Home” 1.2.1 by MidMo Design (with some slight modifications)
        - installed plugins: Akismet 2.5.7, SlideShare 1.8, Smart YouTube PRO 4.1.8, WP-DBManager 2.63, WP to Twitter 2.5.7
        - version of Crayon Syntax Highlighter: 2.0.2

        HTH,
        Konstantin

  • Pingback: Resources Loaded in Crayon

  • kn007

    今天我很高兴得知1.17对js的更新。简洁了,速度更快了!希望您还能在保持稳定的同时,做简化优化!特来感谢您做的这个插件,它非常方便贴心。

  • Pingback: Customize the comment section of the wordpress | My Technical Blog

  • Pingback: 2012年版!frasmで使っている「とにかく捗るWordPressプラグイン」48選*frasm

  • abc114174

    It’s excellent plugin!But too much file to load,could you pls to reduce dome?thx

    • http://aramk.com/ Aram Kocharyan
      • abc114174

        crayon.js crayon_qt.js crayon_te.js jquery.fancybox.init.pack.js util.js crayon_style.css global_style.css jquery.fancybox.css now 8 required,could reduce this?what is crayon_qt.js ?

        • http://aramk.com/ Aram Kocharyan

          I could reduce everything by packing it into a single file and minifying – but that would mean I wouldn’t be able to treat these files as modules. It’d be like putting 8 Java classes into the same file instead of splitting them up – they don’t all need to be imported everywhere. The best solution is to use the W3 Total Cache plugin or similar which understands which resources are needed where and minifies them into a single file. I’ve explained that in the “Minification” section.

  • Pingback: How to post source code in WordPress

  • Pingback: Does my code look big in this? | jimsmart.org

  • Winson

    What a great syntax highlighter plugin! Thank you!

    But I have a problem hope can help, it’s seem all language are same with a highlight style, that’s mean even i use c# , javascript or php, but there are same with the highlight style, should i need to change each language style by myself? But seem all languages are just use a theme style, right?

    • http://aramk.com/ Aram Kocharyan

      Thanks! The Theme defines how the code looks and the language defines what syntax elements are highlighted.

  • Pingback: コードハイライト | WordPress シングルサイト動作確認

  • Stan

    I updated to 2.0.2 and it crashed with the error:
    Fatal error: Cannot redeclare class Select in /public_html/wp-content/plugins/crayon-syntax-highlighter/util/theme-editor/theme_editor.php on line 94.

    I could not access my site, whether as visitor or as admin. I got to access cPanel to delete directory to bring my site back up. But after that, I could not install any version, even the 2.0.0. What can I do? I really like Crayon as it shows the best highlighting.

    • stan

      edit: I could install ver 1.17 however and it works.

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

      Thanks Stan, I’ve corrected the issue in the latest beta. It was caused by the Select class being defined in another PHP file on your site. It’s now called CrayonHTMLSelect so there shouldn’t be any issues.

  • Pingback: Syntax Highlighting « CriticMarkup

  • Pingback: » crayon </sanity>

  • Pingback: Необходимые плагины для WordPress | Блог Макса

  • Pingback: How to use prettify with WordPress ← danjjohnson.com

  • Marcin Zabłocki

    Awesome plug-in, thanks!

  • http://blog.plicatibu.com/ Marcio Andrey Oliveira

    I came across this project and I loved it.

    My blog is already using crayon syntax highlight.

    Regards.

  • Pingback: How to post source code on WordPress | JJPro

  • iamxz

    i want run code in new window!

  • sam

    Hello Aram!
    In the updated version of a plug-in for wordpress there is a mistake. It is possible to look in the blog http://flashpress.ru/blog/puzzle-part2/. If in a code there is a long comment – that numbering of lines is displayed not correctly. Correct please :(

    • http://aramk.com/ Aram Kocharyan

      Hi there, can you take a look firstly at the JS errors in the console? I believe they’re unrelated to Crayon: http://snag.gy/OxXv0.jpg

  • Tobias

    great plugin! The only thing I do not like is the sliding-in toolbar. I would much rather prefer a simple icon or link next to the code that enables the user to copy it to the clipboard. That’s really all we need here. The sliding toolbar – although nicely animated – is not as straight-forward and too heavy.

    • http://aramk.com/ Aram Kocharyan

      Hi there, thanks! To keep the toolbar, change the option “Show the toolba” to “always” in settings.

  • Vasco

    After today’s update I got an overlapping textarea with my code on top of colored code. Size was off as well. I’m on WP 3.5.1.
    Blog’s on blog.vascooliveira.com

    • http://aramk.com/ Aram Kocharyan

      I get “Error establishing a database connection”. I think it’s a JavaScript or CSS issue, so check the js console.

      • Vasco

        Don’t know why you got that error. I disabled the plugin when I got the error. Either way I reactivated it today for debugging and it’s working as expected once again.

        • http://aramk.com/ Aram Kocharyan

          Good to hear!

  • http://aramk.com/ Aram Kocharyan

    Are you running a non-standard wordpress install? Have you restricted access to wp-admin/?

  • Pingback: fxpixel – Test Syntax Highlighter

  • Foad

    hi,

    i use your plugin in wordpress, after update to new version, all of my codes textarea in frontend locked and don’t animate.
    http://daskhat.ir/648/form-validation-regular-expressions-php
    now what can i do?

    • http://aramk.com/ Aram Kocharyan

      Seems to work now?

      • Foad

        yes, i used cloudflare.com service, when i changed my domain’s name servers to main server, that’s work. i think the problem cause is caching files by cloudflare.com.

  • Ryan Lee

    Hi. how do I put tab inside coding? If I press Tab the cursor moves to the next area. Thank you.

  • Phillip Grove

    Crayon introduces problems and artifacts in the popular Visual Composer plugin (http://codecanyon.net/item/visual-composer-for-wordpress/242431) which took me a while to figure out. It causes text artifacts when saving, and sometimes outright prevents saving page changes.