storybook-addon-notes-github-markdown-css
v2.10.3
Published
Make your notes addon look like github markdown
Downloads
23
Maintainers
Readme
storybook-addon-notes-github-markdown-css
The minimal amount of CSS to replicate the GitHub Markdown style
Make your notes addon look like github markdown. Shameless fork of this.
Demo
Install
Download manually, from CDNJS, or with npm:
$ npm install storybook-addon-notes-github-markdown-css
Usage
To use within you storybook you need to load the style sheet into the manager's head. The best way I have found to do this is to interact with storybook's html-webpack-plugin. To facilitate this I released html-webpack-inject-plugin, it lets you easily inject text into the head or body of the html document.
webpack.config.js
:
const HtmlWebpackInsertTextPlugin = require("html-webpack-insert-text-plugin")
.default;
module.exports = (baseConfig, env, config) => {
config.plugins.push(
new HtmlWebpackInsertTextPlugin([
{
target: "index.html",
parent: "head",
text:
'<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/github-markdown.css" />'
}
])
);
return config;
};
How
See generate-github-markdown-css
for how it's generated and ability to generate your own.
Dev
Run npm run make
to update the CSS.
License
MIT © Sindre Sorhus