WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Enlighter - Customizable Syntax Highlighter

Simple post syntax-highlighted code using the EnlighterJS MooTools Plugin.

Enlighter is a free, easy-to-use, syntax highlighting tool for WordPress. It's build in PHP and uses the MooTools(Javascript) based EnlighterJS to provide a beautiful code-appearance. Using it can be as simple as selecting an editor style or adding shortcode around your scripts which you want to highlight and Enlighter takes care of the rest. An easy to use Theme-Customizer is included to modify the build-in themes without any css knowlegde! It also supports the automatic creation of tab-panes to display code-groups together (useful for multi-language examples - e.g. html+css+js) A theme demo can be found here

Plugin Features

  • Support for all common used languages
  • Theme Customizer
  • Visual-Editor (TinyMCE) Integration
  • Easy to use Text-Editor mode through the use of Shortcodes
  • Advanced configuration options (e.g. CDN usage) are available within the options page.
  • Supports code-groups (displays multiple code-blocks within a tab-pane)
  • Outputs in various formats like ordered lists or inline. Choose the method that works best for you.
  • Extensible language and theme engines - add your own one.
  • Simple CSS based themes
  • Integrated CSS file caching (suitable for high traffic sites)
  • EnlighterJS is written in MooTools. Requires version 1.4+

Shortcode Quickstart Example

Highlight javascript code (theme defined on your settings page)

[js]
window.addEvent('domready', function(){
    console.info('Hello Enlighter');
}); 
[/js]

Point out special lines of code

Shortcode Style Just add the highlight attribute with the lines you wish to point out

[js highlight="2"]
window.addEvent('domready', function(){
    console.info('Hello Enlighter');
}); 
[/js]

Visual Editor You have to edit the generated html tag by switching to Text-Mode

<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-highlight="2">
    window.addEvent('domready', function(){
        console.info('Hello Enlighter');
    });
</pre>  

Codegroup Example

Display multiple codes within a tab-pane. You can define a custom tab-pane title for each snippet if you want.

[codegroup]
    [js tab="Javascript Message"]
    window.addEvent('domready', function(){
        // display string on console
        console.info('Hello Enlighter');

        // show element
        $('#myelement').show();
    }); 
    [/js]

    [html]
    <div id="myelement">
    INITIALIZATION START
    </div>      
    [/html]

    [css tab="Styling"]
    #myelement{
        color: #cc2222;
        padding: 15px;
        font-size: 20px;
        text-align: center;     
    }       
    [/css]  
[/codegroup]

Legacy Example

It's also possible to use the plugin with legacy shortcode (disabled language shortcodes)

[enlighter lang="js"]
window.addEvent('domready', function(){
    // display string on console
    console.info('Hello Enlighter');

    // show element
    $('#myelement').show();
});     
[/enlighter]

Supported Languages (build-in) + Shortcodes

  • HTML [html]
  • CSS (Level 1, 2, 3) [css]
  • XML [xml]
  • Javascript [js]
  • Java [java]
  • Markdown [md]
  • PHP [php]
  • Python [python]
  • Ruby [ruby]
  • Shellscript [shell]
  • C [c]
  • C++ [cpp]
  • SQL [sql]
  • NSIS [nsis]
  • RAW Code [raw]

Available Translations (I18n)

  • English (default)
  • German (de_DE by Andi Dittrich)
  • Serbo-Croatian (sr_RS by Borisa Djuraskovic from webhostinghub.com)

Requires: 3.5 or higher
Compatible up to: 3.8.3
Last Updated: 2014-2-13
Downloads: 2,838

Ratings

4 stars
4.7 out of 5 stars

Support

2 of 2 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
100,1,1
100,2,2 100,1,1
100,1,1
100,1,1 100,1,1