This plugin hasnt been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Crayon Syntax Highlighter

Description

A Syntax Highlighter built in PHP and jQuery that supports customizable languages and themes.
It can highlight from a URL, or WordPress post text. Crayon makes it easy to manage Language files and define
custom language elements with regular expressions.
It also supports some neat features like:

Installation

You can change settings and view help under Settings > Crayon in the WordPress Admin.

Make sure your theme either manually specifies jQuery, or uses the version shipped with WordPress (recommended). You should NOT print out jQuery manually in the header as a script tag. Enqueueing it in WordPresss will prevent duplicate jQuery includes (also bad) and will allow other scripts to be placed AFTER jQuery in the head tag so they can use it. If you’re uncertain, just let WordPress handle it and remove any jQuery script tags you find in your theme’s header.php.

You can change settings and view help under Settings > Crayon in the WordPress Admin.

Make sure your theme either manually specifies jQuery, or uses the version shipped with WordPress (recommended). You should NOT print out jQuery manually in the header as a script tag. Enqueueing it in WordPresss will prevent duplicate jQuery includes (also bad) and will allow other scripts to be placed AFTER jQuery in the head tag so they can use it. If you’re uncertain, just let WordPress handle it and remove any jQuery script tags you find in your theme’s header.php.

Support

Contact me at http://twitter.com/crayonsyntax or crayon.syntax@gmail.com.

Reviews

I think everything with the current version is excellent. I’d love to see new themes, like the ones that are included in Visual Studio Code, and also would love to see the feature where you can include the PowerShell prompt on the left side and make it look as though it’s a PowerShell window with commands and output.

I must say this plugin is very good.
It working with bbPress, DWQA, and WPUF on my site.
It adds code button in TinyMCE for these plugin. For bbPress no need to do coding work it adds button automatically.
For WPUF you need to choose rich text field so the button will be added.
For DWQA, must add fulter like this, see the button “crayon_tinymce”
add_filter( ‘dwqa_tinymce_toolbar1’, ‘dwqa_disable_tinymce_options’,100 );
function dwqa_disable_tinymce_options( $button ) {
return ‘bold,italic,underline,|,’.’bullist,numlist,blockquote,|,’.’link,unlink,|,’ . ‘image,|,’.’spellchecker,fullscreen,|,crayon_tinymce’;
}

Anyway to make this plugin support more other plugins, you need dig into code.

1.16

Expanding the code is delayed in the same way using the toolbar delay setting.

French translation

Portuguese translation

FIXED:

Carriage returns and new line characters were being treated differently and not being detected correctly. I’m using a new regex which detects both and also captures the line content: (?:^|(?<=\r\n|\n))[^\r\n]*

JS variable bugs when minifying with W3 Total Cache

CSS did not load in newly opened code window if minified

Saved comments did not capture Crayons until they were updated or the post list was refreshed in settings

Posts in settings are sorted now descending based on modified date

bbPress posts showed Crayons on the bottom of posts irrespective of their position in the post content.

Toggle plain code button appeared when plain code was disabled

Updated Turkish translation

1.15

ADDED:

The settings page no longer searches through all posts looking for legacy tags until you hit a new “refresh” button. Refreshing will look through all posts for crayon tags, and also mark any that are legacy tags. The same process occurs on an individual basis when saving a post.

The settings page shows which posts contains legacy tags, and the buttons do not hide when showing the table.

Fancybox issues have been fixed: http://aramk.com/blog/2012/11/28/initialising-fancybox-with-custom-objects/

max/min-height/width didn’t work on Tag Editor

Width discrepancy before and after mouseover from 1px border

Before and after whitespace didn’t display correctly

Code opened in a new window didn’t display if the current wp theme css was included

IE 8 compatibility issues

Dropdown of languages in settings and Tag Editor are now sorted by name, not id

By default “Display the Tag Editor in any TinyMCE instances on the frontend” is disabled to reduce resources

Chinese translation updated

1.14

All AJAX functions are now using the wp_ajax action and admin-ajax.php method defined here: https://codex.wordpress.org/AJAX_in_Plugins. This means Crayon no longer passes around the wp_load path and doesn’t use it as a $_GET variable to load AJAX requests. The security vulnerability in 1.13 is no longer present and that code has been removed.

font-size and line-height has been removed from the crayon style CSS and is specified using the settings screen – the custom font size is enabled at 12px. This allows you to disable the custom font size and allow your own CSS to take control of the sizing for you. With the custom size disabled the inherited size is applied, so the code will appear at the size of its parent element based on your wordpress theme.

Update functionality has been improved so the CrayonWP update function is only called when an update is detected from a change in the version string, not every time you load the page! If using lower than 1.14 the custom font size setting is enabled for you, since this setting was disabled by default in previous versions.

Fixed a bug preventing Tag Editor from showing on the front end (related to the AJAX fix)

Moved global js variables to the init functions which are called on ready()

Fancybox now uses “fancybox” as the script name and checks if another version is already queued

1.12.1

Fixed a bug with bbPress preventing posts from appearing.

1.12

Added ability to convert all legacy Crayon tags in blog posts and comments to <pre> tags, retaining all attributes. These are the accepted standard for the Tag Editor and they’re backwards compatible (if Crayon is off or you’re using another highlighter).

Added a button in the settings page to display the list of posts with Crayon tags

Fixed a bug causing posts with Crayon tags only in the comments (not the post content) to be ignored.

1.9.1

Fixed bug caused by discrepancies in how checkbox values were handled in Tag Editor

Fixed a bug causing $root variable to change on some setups, preventing tag editor from loading

1.9.0

This update is the biggest update yet – highly recommended for all users.

Added a brand new Tag Editor in the Visual Editor toolbar! Greatly simplifies adding code to posts in the Visual Editor. You can also switch between Visual and HTML modes to verify your code before posting!

Added ability to decode HTML entities, so now you can use <, > etc. in the Visual Editor. But if you need indentation etc, you’ll want to use the HTML editor for posts with Crayons. You can also use decode=”yes/no/true/false” to set this for an individual Crayon.

Added ability to decode attributes, which is enabled by default to avoid seeing encoded strings in the title, and also to allow encoded angle/square brackets in the title that would otherwise clash with the Crayon tag brackets if left unencoded.

Added ability to use the class attribute in <pre> tags for specifying settings like url, mark, lang, toolbar and all other valid settings like in a normal [crayon] tag. This will ensure your <pre> tags remain valid XHTML markup even with Crayon disabled.

Added ability to specify hyphen-separated-values in the class attribute of a <pre> tag to make them look like actual class selectors. E.g. <pre class=”lang-objc toolbar-false”>…</pre>. The setting name is made up of letters and hyphens ONLY, the value is whatever is left between the last hyphen and the next whitespace character.

Added Scheme language thanks to https://github.com/harry75369

Added ABAP language with help from Christian Fein

Added a new setting: crayon=”false/no/0″ as an attribute or crayon:false in the class tag of a <pre>. This will ignore the <pre> tag and not turn it into a Crayon for those rare cases you don’t want to use the plugin.

Improved the method of finding posts with Crayons – now it will search through all posts for Crayons and save the ids in the options db. When the_posts is called, it won’t need to do any extra searching on page loading and will already know which post has Crayons. Like before, pages which might use page templates will turn off enqueuing of fonts and themes to ensure they are always printed.

Overriden Language File elements are now put first in the CSS class name, so the extended element can override in a theme

Prevented capturing Crayons in the admin

Crayons now use HTML5 valid markup

I’m still sticking to the wrap=”off” for no-wrapping preformatted styling – CSS doesn’t do the trick yet: http://stackoverflow.com/questions/657795/how-remove-wordwrap-from-textarea

Improved ajax handling

Cleaned up the settings screen

Line numbers now use UID in id to avoid duplicates

Crayon CSS updated to use inline styles and never use style tags in the body

Simplified the toolbar buttons to suit the minimalistic design of the rest of Crayon. It’ll look badass with an inset shadow in a future theme…

Plain tags are now just <pre> tags and don’t contain the inline code tag since they are block tags.

Fixed a MAJOR bug preventing previously captured Crayons from being applied to post content!

Fixed a bug causing case insensitive Boolean settings to fail at times

Fixed a bug causing a [crayon … /] tags to be recognised as [c … /] tags (added a \b)

1.7.4

1.7.3

Fixed a bug causing RSS feeds to contain malformed HTML of Crayons, now it shows plain code with correct indentations. Thanks to Артём.

Updated help in Settings and https://github.com/aramk/crayon-syntax-highlighter

1.7.2

Fixed a bug that prevented foreign languages from being initialised and used. Thanks to @west_323 for finding it.

1.7.1

Renamed Japanese GNU language code from ja_JP to ja.

1.7.0

Added the ability to highlight multiple languages in a single Crayon! http://aramk.com/blog/2011/12/25/mixed-language-highlighting-in-crayon/

A bunch of language improvements, a few CSS improvements, etc.

1.6.6

Fixed a bug causing international Unicode characters being garbled in the title (thanks to simplelib.com!)

Fixed a bug that prevented strings from being highlighted

1.6.5

Fixed a bug causing international Unicode characters being garbled

1.6.4

Added user submitted Japanese language support. Thanks to @west_323!

<pre></pre> tags are now captured as Crayons. This can be turned off in Settings > Crayon > Code.

You can remove prevent capturing individual <pre> tags the same way as Crayons: $<pre> … </pre>

This method of preventing the <pre> tag should be used if your code contains <pre> tags (nested <pre> tags) – otherwise it will cause conflicts.

Keep in mind that <pre> tags should not be editted in Visual Mode. Crayon will display all code as it appears in the HTML view of the post editor, where you can make code changes and use the tab key etc. If you want to use the Visual editor reguarly and are running into problems, consider loading the code form a file using the ‘url’ attribute.

I have removed the ability to have spacing between the starting and ending square brackets, so [crayon…] is valid but [ crayon … ] is not.
The same applies to <pre> tags (not < pre >). The reason is to improve performance on posts without Crayons by using strpos and not regex functions like preg_match, and also it’s better formed.

Removed jQuery 1.7 from /js folder. Now uses the version provided by WP.

1.6.3

For those still having issues with CSS and JavaScript not laoding, I have added a new setting in Misc. that will allow you to either attempt to load these resources when needed if you have no issues with your theme or to force them to load on each page.

1.6.2

1.6.1

1.6.0

Added internationalisation with 4 new languages: German, Spanish, French and Italian

These were translated using Google Translate, so if you speak these languages and would like to improve them,
it’s actually quite easy to edit – just contact me via email 🙂

More languages will be added as they are demanded

1.5.4

Recommended update for everyone

Fixed a bug that caused the default theme not to load if was anything but “classic” – Thanks to Ralph!

1.5.3

Fixed issue with incorrectly specified theme causing crash

Email Developer improved

1.5.2

Proper enquing of themes via wordpress, should cause no more issues with any themes

Cached images for toolbar items, no delay on mouseover

Fixed a minor regex bug in js preventing styles from being removed when in popup

1.5.1

Fixed plain code toggle button update

1.5.0

Added ability to cache remote code requests for a set period of time to reduce server load. See Settings > Crayon > Misc. You can clear the cache at any time in settings. Set the cache clearing interval to “Immediately” to prevent caching.

Fixed a bug preventing dropdown settings from being set correctly

Fixed AJAX settings bug

Fixed CSS syntax bug for fonts

Improved code popup, strips style atts

Added preview code for shell, renamed to ‘Shell’

Code popup window now shows either highlighted or plain code, depending on which is currently visible

1.4.4

Revised CSS style printing

Fixed bugs with the “open in new window” and copy/paste actions

Upgraded jQuery to 1.7

1.4.3

Fixed a bug that caused the help info to remain visible after settings submit