eliotsykes / metalsmith-jquery

A Metalsmith plugin to manipulate HTML via jQuery syntax

metalsmith-jquery

A Metalsmith plugin to manipulate HTML via jQuery syntax.

Features

Leverages Cheerio to support a logical subset of jQuery syntax, allowing you to manipulate the HTML generated from metalsmith-markdown -- or any other plugin!

Installation

$ npm install metalsmith-jquery

Usage

When your markdown is converted to HTML, it doesn't contain any CSS information. Use this to add styles to your markdown-generated HTML:

Metalsmith(__dirname)
    .use(markdown())
    .use(jquery(function($) {
        $('h2').addClass('welcome');
    })
    .use(templates('handlebars'))
    .build(function(err) {
        if (err) throw err;
    });

For example, if you're using a Bootstrap template, you may want your Markdown-rendered tables to contain the Bootstrap table CSS classes:

Metalsmith(__dirname)
    .use(markdown())
    .use(jquery(function($) {
        $('table').addClass('table table-bordered');
    })
    .use(templates('handlebars'))
    .build(function(err) {
        if (err) throw err;
    });

You can also store the javascript in a separate file, which is especially useful if you're managing your Metalsmith configuration in a JSON file:

{
    "plugins": {
        "metalsmith-markdown": {},
        "metalsmith-jquery": "fixit.js"
    }
}

... where "fixit.js" is a Javascript file in the node.js module format:

module.exports = function($) {

    $('h2').addClass('welcome');
    $('table').addClass('table table-bordered');
    
}

... and the path is relative to the current working directory.

See the tests for more examples.

Where do we use this? On our developer portal!