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:
var jquery = require('metalsmith-jquery');
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:
var jquery = require('metalsmith-jquery');
Metalsmith(__dirname)
.use(markdown())
.use(jquery(function($) {
$('table').addClass('table table-bordered');
}))
.use(templates('handlebars'))
.build(function(err) {
if (err) throw err;
});If you don't want to process every file, you can include a pattern of files to process:
var jquery = require('metalsmith-jquery');
Metalsmith(__dirname)
.use(markdown())
.use(jquery('**/*.html', function($) {
$('table').addClass('table table-bordered');
}))
.use(templates('handlebars'))
.build(function(err) {
if (err) throw err;
});If you want to add specific options to how Cherio should manipulate the generated HTML
var jquery = require('metalsmith-jquery');
Metalsmith(__dirname)
.use(markdown())
.use(jquery('**/*.html', function($, {decodeEntities: false}) {
$('#content').append("<p>моя бабушка старая</p>"); // cyrillic characters wont be HTML-encoded
}))
.use(templates('handlebars'))
.build(function(err) {
if (err) throw err;
});Inside your callback, you can access the metalsmith-metadata, and metalsmith filename
.use(jquery(function($, filename, files, metalsmith) {
var title = $('h1').first().text();
if (title)
files[filename].title = title;
}))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!