Full width of browser window

[kmoschcau]

Hi, I just wanted to ask, if it's possible to get this plugin to render the markdown output to the full width of the browser window. Right now it only displays it in about 1/3 of my window width, which causes me to have to scroll sideways in the tables I create in my documents.

[maximbaz]

The width restriction comes from github-markdown-css, and those guys autogenerate the style based on current Github styling - so as long as Github itself restricts the width, it will be restricted too.

However, g:markdown_composer_custom_css property was just introduced, you can use any style you want. For example, you can add the following patch as a second stylesheet to use 100% of browser window:

.markdown-body {
  max-width: 100%;
}

[kmoschcau]

That's a great start! Would it be possible to include a way to just override parts of the CSS instead of replacing it completely?

[maximbaz]

Initially I thought about it too, but in reality this works only if you are adding styles - as soon as you need to remove existing styles (for example to resolve conflicts with highlight.js) you cannot solve it with overridden parts.

...or at least I think you cannot? I may be wrong 🙂

[euclio]

For now, could you just include the path to the default styles (/_static/vendor/github-markdown-css/github-markdown.css), with the caveat that this path may change?

[kmoschcau]

I was thinking of doing something like that. The major factor that prevented me from trying it out was, that I was too lazy to look for the original to save it somewhere and just change that one line. That solution seems pretty static to me.

[maximbaz]

Yet another approach is to host the file on Github and use rawgit.com to wrap the link.

For example, @euclio's default style has the following link and it will most certainly never change:

https://cdn.rawgit.com/euclio/github-markdown-css/gh-pages/github-markdown.css

So you can put your patch to Github too, and set the following in your vimrc:

let g:markdown_composer_custom_css = ['https://cdn.rawgit.com/euclio/github-markdown-css/gh-pages/github-markdown.css', 'https://cdn.rawgit.com/path/to/my/override/file.css']

I use this same approach in a slightly different way, I forked the original github-markdown-css, added all the patches to my fork and now I just use:

let g:markdown_composer_custom_css = ['https://cdn.rawgit.com/maximbaz/github-markdown-css/gh-pages/github-markdown.css']