Add Custom CSS Option

[Kiikurage]

Because I want to use my custom css file, implement it.
I think that this works good but is very dirty implement, so I'd be happy that anyone changes it better.

[izuzak]

@Temperman I might be misunderstanding something, but is there a reason why you're not styling the markdown preview through your styles.less file?

[Kiikurage]

Yes, we can use styles.less file. But it is designed to define general styles of the editor, not useful to define markdown preview style because of many stylesheet may be switched frequently for each markdown file.
So I think that this option is need.

[izuzak]

But it is designed to define general styles of the editor, not useful to define markdown preview style

What do you man by "general styles of the editor"? The purpose of styles.less is to allow you to style any part of Atom.

because of many stylesheet may be switched frequently for each markdown file.

I'm not sure I understand. Can you clarify and provide an example why styles.less can't be used here?

[simurai]

Currently the Markdown preview looks similar when rendered on GitHub. But I guess @Temperman would like to use his own CSS so it renders the same as his personal Jekyll site or so. Using styles.less is a bit more work with copy&pasting it and maybe change selectors, instead of just link to the custom CSS file. This issue seems similar to #152.

One problem I can see is that currently the Markdown preview is just a normal element. So allowing to add any CSS file would be in the global scope and that might mess up the whole editor. So the Markdown preview would first need to be put inside a Web Component where styles can't leak out. Or an iFrame?

[mnquintana]

@simurai Couldn't all custom styles just be scoped inside .markdown-preview?

[simurai]

@mnquintana You mean when loading the custom CSS file, all selectors would get a .markdown-preview pre-pended? Yeah, that might work. Depends a bit on the custom CSS. Maybe if the color is defined in the body, like body { color: #333; }. It would need to be moved from body into .markdown-preview.

@Temperman do you mind posting an example for the custom CSS file you would want to load? Is it your personal site or do you just wanna use your custom "Markdown theme"? Like a custom version of this: https://github.com/atom/markdown-preview/blob/master/styles/markdown-preview.less

[Kiikurage]

@simurai Yes, that's right. I usually write markdown with Github theme, but sometimes I write with my custom theme which is used in my blog. Changing themes many times is very difficult in style.less because it contains all styles. So i think it is better to select theme css file. I create a sample https://github.com/temperman/mdPreviewSample. In this sample, I set .markdown-preview selector before each selectors. As you say, I think iframe or WebComponent is need at first, too.

Thank you.

[maxbrunsfeld]

Atom has functionality for loading particular stylesheets into particular shadow roots. See the docs for StyleManager. I think that if we do this, we should use this existing functionality, rather than putting the markdown preview into an iframe.

Basically, we'd need to create a shadow DOM root for the markdown preview view and put an atom-styles element inside of it.

I like this idea though.