Hi, we're glad you want to help this project grow. If you need help with anything, feel free to open an issue or discussion topic.
You'll need the following software installed:
Then, follow these steps:
- Clone the repository:
git clone https://github.com/jls-digital/storybook-addon-code.git
- Run
pnpm install
- Run
pnpm build
- In a storybook project, add
"@jls-digital/storybook-addon-code": "link:<path_to_cloned_repo>",
to thedependencies
inpackage.json
- Run
pnpm install
in the storybook project - Enable the addon in
.storybook/main.ts
(see example below)
// .storybook/main.ts
const config: StorybookConfig = {
addons: [
/* other addons */
'@jls-digital/storybook-addon-code'
],
};
Create a new branch or a fork from the main branch and make your changes. Then open a pull request with a description of your changes and thoughts behind them.
Coding conventions should be enforced by eslint and prettier. You can run the
linter with pnpm lint
and the formatter with pnpm format
. Autofixable errors
can be fixed across all files with pnpm lint-fix
or pnpm format-fix
respectively.
- Support all languages from prism/hljs. Storybook's syntax highlighter only uses a limited set of languages.
- Automatic import of source code files
- Ctrl + click to jump to reference (e.g. in Interface)
- Button to open code (local file) in editor