Enlighter - Customizable Syntax Highlighter wordpress plugin resources analysis

Download This Plugin
Download Elegant Themes
Name	Enlighter - Customizable Syntax Highlighter
Version	2.5
Author	Andi Dittrich
Rating	88
Last updated	2015-01-24 12:27:00
Downloads	7619
Download Plugins Speed Test plugin for Wordpress

Home page

Delta: 0%

Post page

Delta: 0%

Enlighter - Customizable Syntax Highlighter plugin has no negative impact on PageSpeed score.

Home page PageSpeed score has been degraded by 0%, while Post page PageSpeed score has been degraded by 0%

Enlighter - Customizable Syntax Highlighter plugin added 180 kB of resources to the Home page and 180 kB of resources to the sample Post page.

Enlighter - Customizable Syntax Highlighter plugin added 0 new host(s) to the Home page and 0 new host(s) to the sample Post page.

Great! Enlighter - Customizable Syntax Highlighter plugin ads no tables to your Wordpress blog database.

Resources Added (Post page)

Description

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 including LIVE Preview Mode
Inline Syntax Highlighting
Full Visual-Editor (TinyMCE) Integration (Admin Panel + Frontend)
Easy to use Text-Editor mode through the use of Shortcodes
Advanced configuration options (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 MooTools v1.4+ (included) and client enabled javascript

Shortcode Quickstart Example

Highlight javascript code (theme defined on your settings page)

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

Inline Syntax Highlighting with Shortcode

Lorem ipsum dolor sit amet, [js]window.alert('Hello World');[/js] consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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]