Use EnllighterJS with marked

markdown, gfm, javascript, nodejs

marked is one of the most popular markdown parsers written in javascript. It’s quite easy to integrate EnlighterJS within, just pass a custom highlight function as option.

Promised based highlighting#

File: markdown.js

const _marked = require('marked');
const _renderer = new _marked.Renderer();

// escape html specialchars
function escHtml(s){
    return s.replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

// EnlighterJS Codeblocks
_renderer.code = function(code, lang){
    return `<pre data-enlighter-language="${lang}">${escHtml(code)}</pre>`;
};

const _options = {
    // gfm style line breaks
    breaks: true,

    // custom renderer
    renderer: _renderer
};

// promise proxy
function render(content){
    return new Promise(function(resolve, reject){
        // async rendering
        _marked(content, _options, function(e, html){
            if (e){
                reject(e);
            }else{
                resolve(html);
            }
        });
    });
}

module.exports = {
    render: render
};

 

Usage#

const _markdown = require('markdown');

// fetch markdown based content
const rawCode = getMarkdownContent(..);

// render content
const html = await _markdown.render(rawCode);

 

You may have noticed, that normal users (especially Author’s and Contributor’s) are not allowed to use all kind of HTML Tags and related Attributes.

Those elements got removed by the WordPress buil-in KSES Filter – and it’s a very useful feature in matter of security to prevent html-code-injection.

But sometimes it is required to enable some additional html tags and/or attributes. You can modify the list of allowed html tags and attributes by appling a custom filter:

The Filter#

Example how to allow EnlighterJS related attributes for pre and code tags

function ksesAllowHtmlCodeAttributes($data, $context){
    // only apply filter on post-context
    if ($context === 'post'){

        // list of all available enlighterjs attributes
        $allowedAttributes = array(
            'data-enlighter-language' => true,
            'data-enlighter-theme' => true,
            'data-enlighter-group' => true,
            'data-enlighter-title' => true,
            'data-enlighter-linenumbers' => true,
            'data-enlighter-highlight' => true,
            'data-enlighter-lineoffset' => true
        );

        // apply to pre and code tags
        $data['pre'] = array_merge($data['pre'], $allowedAttributes);
        $data['code'] = array_merge($data['code'], $allowedAttributes);
    }

    return $data;
}

// add the filter function (2 arguments and priority 100)
add_filter('wp_kses_allowed_html', 'ksesAllowHtmlCodeAttributes', 100, 2);

 

 

 

Sometimes it can be very useful to have magical constants like __FILENAME__ or __LINE__ available within your sourcecode – especially for debugging or in merged files. Unfortunately, such feature is missing in javascript but it is possible to implement it by yourself using a file-postprocessing filter in your gulp build script. Thanks to gulp-concat-util, it’s […]

Prevent Errors from breaking Gulp watch

gulp-plumber, custom error handler, gulp-prettyerror

As an intermediate javascript developer, you may using gulp these days – a great and straightforward streaming build system with a lot of advantages compared to grunt. For example, i’ve switched from a bunch of custom, ANT based scripts to gulp for the next EnlighterJS major version and it saves a lot of time! Especially […]

Enlighter WordPress Plugin v2.0 release

EnlighterJS Advanced Javascript based post syntax highlighting

Version 2.0 Released# I am proudly to announce the immediate availbility of Enlighter v2.0. Including EnlighterJS 2.1 with support for Inline-Syntax-Highlighting!  About the 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 […]