Cimbali/markdown-viewer

injecting custom css

Closed this issue · 4 comments

I´ve done a bit of exploring, overriding the base styling, using a _markdown.css file in the same folder as the markdown file itself. Is there a way to do the same more globally for the current user? Something like ~/.markdown.css

I would also like to be able to add some javascript functionality. To do things like [un]folding levels of nested lists. I do not see a way to inject that currently. Any plans for users to be able to add something like that?

I am curious why top level lists have the <li> content wrapped in <p> tags, but nested lists do not. If it is intended to style those top level items differently, something like a div ul li {} css rule should be able to to do the same thing.

Environment:
Fedora 24, Firefox 54

I do have plans for supporting CSS to apply to all Markdown eventually. Haven't quite decided exactly how I want to approach it. It needs to be platform-independent.

I haven't thought about custom JavaScript; interesting idea. Not sure how well it will work when applied an arbitrary Markdown file, though. JavaScript within the markdown is explicitly removed so that you're not running someone's code just for viewing Markdown on a web site (assuming Mozilla gets that working again).

Regarding the wrapping of tags, that would be a question for the markdown-it project. This plugin uses that open source Markdown-to-DOM library.

As a temporary solution, I use the stylish Firefox extension that allows me to customize the rendering of markdown-viewer.

You just need to define the filter with the regular expression: ^file:\/\/\/.*\.md$.

Closing as this would be covered by #1

One way to do this, is in chrome/userContent.css or using a styling plugin like stylish, but instead of matching the file, apply it to the root of the styled markdown document (or both).

At this point it is selectable using .markdownRoot, so for example if you want to get a fixed width box for markdown like on github, you could use:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document regexp(".*\.(md|markdown)") {
	.markdownRoot {
		margin: 0 auto;
		width: 888px;
		padding:45px;
		border:lightgrey thin solid;
	}
}