Storybook: [addon-notes] How to add custom styles for markdown notes?

[simbo]

We're using storybook 5.0.1 with addon-notes for an angular project.

When displaying markdown using the notes addon, we would like to alter some styles in the html output. For example, more spacing after codeblocks and before headlines.

How can we add custom styles for markdown output?

[BennyZ28]

Same here, actually we'd like to just use our own styles but they're getting overridden by specific notes styles. Would be good to have an option to remove them.

[shilman]

Does this fix your problem? https://github.com/storybooks/storybook/pull/5922

[BennyZ28]

Unfortunately no, not for me. I don't need to override styles, I need to not get my own styles overridden...

[shilman]

How are you styling the notes currently?

[shilman]

Cc @ndelangen @tmeasday I suspect this is another example of why docs in the preview is a good idea

[BennyZ28]

Currently I'm calling my css in manage-head.html, but it gets overridden in
Notes by the notes styles.
So I'm horribly copy-pasting a bunch of my CSS in the manager-head.html as
well, to override at least the basic

On Fri, 26 Apr 2019 at 15:51, Michael Shilman [e-mail]
wrote:

Cc @ndelangen https://github.com/ndelangen @tmeasday
https://github.com/tmeasday I suspect this is another example of why
docs in the preview is a good idea

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/storybooks/storybook/issues/6145#issuecomment-487085345,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACL5VUUKPLTPBNMHTB7COITPSMJGHANCNFSM4G7FWK3Q
.

[tmeasday]

@shilman although thinking ahead a bit I think some people might want different styles in the docs than their app. There is an argument (with attendant downsides) for having a third docs modality. Perhaps it could help with other problems though?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ndelangen]

Cc @ndelangen @tmeasday I suspect this is another example of why docs in the preview is a good idea

I think you're going to have the exact same issues in whichever frame you put docs. Unless I'm misunderstanding this issue, it's about being able to override the targeted default styles, not about styles unintentionally bleeding down.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[shilman]

I think this was addressed here https://github.com/storybookjs/storybook/pull/5922

[thomasoreilly]

Hey. I'm also looking to override html styles with Notes. I've used the change from #5922 to do so, however, some of the properties I wish to set are being overridden by Storybook styles. Not sure if I'm missing anything.

[shilman]

FYI, please take a look at Storybook Docs, which is intended to replace addon-notes, may not have this problem, and is being actively maintained: https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

[thomasoreilly]

Thanks @shilman. I've been using Docs and loving them, really like MDX. We had two different sections in our documentation, technical and guidelines and wanted to keep separate. Didn't know Notes is deprecated. I have a work around for now which will do as it is temporary ATM.

[shilman]

@thomasoreilly if there's anything we can do on the docs UX to make your use case more palatable, please let me know!

[thomasoreilly]

@shilman, in our case we wanted the ability to have multiple tabs for different types of documentation, such as technical implementations and description for developers and a separate tab for design guidelines for designers. The ability to have n + 1 doc tabs would be great.