Auto-generate markup examples for your styleguide.
If you like to handcraft your styleguides, but don't like to handcraft the code examples then this script is for you.
Similar to the excellent xrayhtml, though codeprint requires you to write your own css styles.
Download the minified script
Requires jQuery to be included on the page.
Include the script on your page, along with jquery.
<script src="jquery.min.js"></script>
<script src="codeprint.min.js"></script>
Then, on DOM ready, you need to init codeprint with some options (both of which are optional):
codePrint.init({
wrappingDivClass: 'sg-block', // css class added to the rendered pre block
onComplete: function() {
// callback function in case you want to do anything else after the code
// snippets have been rendered (e.g. trigger some syntax highlighting).
}
});
Now if you want to provide a markup example for a single component, just add data-codeprint to that component. (Don't worry, codeprint will strip out this attribute when creating the code sample.)
If you would like to group the markup of a few components, then wrap the components in a div with a data-codeprint-group:
<div data-codeprint-group>
...
</div>
(Likewise, codeprint will strip out this wrapping div when creating the code sample.)
If you want to use something like prism for syntax highlighting, then you can get this going via the onComplete callback function that can be specified as part of the options.
codePrint.init({
wrappingDivClass: 'sg-block', // css class added to the rendered pre block
onComplete: function() {
Prism.highlightAll();
}
});
- Improve the docs.
- Remove dependancy on jquery.
- Add templating to give more control on what markup codeprint will generate.
To run the tests:
npm test
To run the tests everytime you change a js file:
npm watch
To build the minified version:
npm run build
MIT