The minimal amount of CSS to replicate the GitHub Markdown style
Make your notes addon look like github markdown. Shameless fork of this.
Download manually, from CDNJS, or with npm:
$ npm install storybook-addon-notes-github-markdown-css
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/storybook-addon-notes-github-markdown-css@1.0.0/github-markdown.css" />'
}
])
);
return config;
};See generate-github-markdown-css for how it's generated and ability to generate your own.
Run npm run make to update the CSS.
MIT © Sindre Sorhus