Allow custom attributes to be applied to pre and code tags

[andria-dev]

Fixes #22

I created a function, getAttributes(attributes), that takes either a string or an object of strings or numbers and outputs a string of HTML attributes. This function is then used to allow the use of the following options: preAttributes and codeAttributes. Usage is as follows:

const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight, {
    preAttributes: { tabindex: 0 }
  });
};

This will add tabindex="0" to the <pre> tag — allowing code blocks with scrollbars to be keyboard accessible — like so:

<pre class="language-js" tabindex="0"><!-- etcetera --></pre>

[zachleat]

Going to merge this but I wonder if we should also change tabindex="0" to be added by default? Maybe in the next major version

I’ll probably also remove the string support as I think the object literal support is probably sufficient (if you disagree please chime in!)

[zachleat]

Filed the tabindex question at #49

[chriskirknielsen]

This is fantastic! I added PR #50 to enable dynamic attributes to be generated based on context data — this will for example allow the language to be provided directly as an attribute (see #22 use-case, solved with example below). I hope this isn't already available with this PR as I couldn't get it to work, but please let me know if I'm wrong.

eleventyConfig.addPlugin(pluginSyntaxHighlight, {
	preAttributes: {
		'data-lang': function (context) { return context.language.toUpperCase(); }
	}
});