tuchk4/storybook-readme

Feature request: support more languages/flexibility for code blocks.

Open

#200 opened on Jul 22, 2019

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (541 stars) (259 forks)batch import
help wanted

Description

Hi, First of all, I'd like to say thanks and great work on this project, I've found it very useful. But I've run into an issue where it'd be nice if more languages were supported for code blocks. I found that if I specify a .md code block with scss then the syntax is not recognized and styled correctly.

Issue/Background: Specifically the reason why I'm raising this issue is that I am writing scss and have stylelint for my project so it recognizes the scss within the .md files, but the outputted code block is unstyled when presented in the storybook-readme panel which makes it less readable.

So at this point I end up with either a very difficult to read code block in the addon, or if I specify my code blocks as css, the code block is instead incorrectly styled for comments and stylelint complains about my single line comments which are valid in scss but not valid with plain css.

Suggestion: It would be nice to be able to extend the styles with a local css/scss/js file, alternatively add support for more languages by default in the prismCodeTheme style files for example for jsx, scss.

Contributor guide

Tech stack
javascriptcss
Domain
frontenddocumentation
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Familiarity with prism.js language definitionsBasic knowledge of Storybook addon structure
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the current prismTheme files in the storybook readme addon. Identify where language definitions are configured. Add support for 'scss' and 'jsx' by including their respective prism language components. Ensure the changes are consistent with existing code structure. The issue suggests either extending styles via local files or adding more languages by default; the latter may be simpler for a first contribution.