Jigsaw: [Proposal] Adding CSS classes to markdown files

[dgursh]

I'm curious if this has already been done or if there is a better way to apply classes to markdown files.

I'm including images in my markdown files like so

![Image](../../img/image.png)

And I'm applying styling like this, assuming the markdown will be inside a div with class "documentation-page"

.documentation-page img {
    max-width: 100%;
}

I'd like to apply the class img-responsive from bootstrap, without having to duplicate the CSS. I found an interesting stack overflow about how you can render classes and ids on markdown files.

https://stackoverflow.com/questions/1058933/can-i-define-a-class-name-on-paragraph-using-markdown

What do you guys think?

[damiani]

I don't think we should modify the behavior of classic markdown, but you are free to either extend it to add the additional behavior, or even swap out the markdown parser entirely (Jigsaw uses Parsedown, it should be trivial to pull in Parsedown Extra which adds support for Markdown Extra. Then, you can add classes with {.img-responsive}.

Take a look at https://github.com/tightenco/jigsaw/pull/68 for an example on how to do this. The magic happens in bootstrap.php...if you include that file, it will get loaded at the end of Jigsaw's boot process, allowing you to re-bind the MarkdownParser class with whatever you want.

[adamwathan]

@dgursh Another option is to use a real image tag:

<img src="../../img/image.png" alt="Image" class="img-responsive">

Markdown fully supports normal HTML.