Better styling for code blocks

[facelessuser]

I want to start by saying that this plugin is a great addition.

I think better styling for code blocks would be better. Like an outline around the code and a slight background color change (something subtle like Github does. I couldn't tell my code blocks were targeted correctly until I looked at the html source.

I think some general wider page margins might be nice as well.

Thanks for the great plugin!

[revolunet]

Hi man; thanks for your comments :)

right for the code blocks; ill try to integrate something much better soon

page margin... for the moment it is centered horizontally. what do you need ?
CSS is extracted from : https://raw.github.com/revolunet/Markdown-CSS/master/markdown.css

[facelessuser]

Just seems to have fat margins on the sides that forces wrapping very soon. I think there is some kind of max-width restriction on the body.

Also, it would be cool if the markdown.css was found locally, so that in case of internet outages, etc, it could still be found.

[revolunet]

just added a local CSS and increased max-width.

looking for something cool for code blocks

[facelessuser]

What you have now doesn't always load stuff locally. Try something like this

styles = open(os.path.join(sublime.packages_path(), 'Markdown Preview', 'markdown.css'), 'r').read()

[revolunet]

why not this ?

base_dir = os.path.split(__file__)[0]
styles = open(os.path.join(base_dir, 'markdown.css'), 'r').read()

the plugin folder may very depending where you install it i guess, no?

[facelessuser]

It would not work on my windows machine at work. That is why I made the other suggestion. What I suggested should work across the board on all OS.

Small suggestion for code (this is what I am using locally; just copied style colors from github)

pre , code, kbd, samp { color: #000; font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 0.98em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
pre, code, kbd, samp { background-color: #F8F8F8; border: 1px solid #CCC; }
pre code { border: 0px !important; }

Edit: cleaned it up a bit

[facelessuser]

You could even do something like this, which would allow people to have a custom markdown.css in the User folder that can override the default if they want. Sorry I am throwing so many ideas out there. I like the plugin, that is why I am giving so much feedback. This is something I am starting to use.

try:
    styles = open(os.path.join(sublime.packages_path(), 'User', 'markdown.css'), 'r').read()
except:
    styles = open(os.path.join(sublime.packages_path(), 'Markdown Preview', 'markdown.css'), 'r').read()

[revolunet]

Thanks for your feedback ;)

For the custom CSS i think ill dig into sublime settings soon.

I just pushed your fix for local load (but without the space in MarkdownPreview).

I also added some CSS for code blocks and backticks. Hope you like it.

Maybe ill implement a real javascript syntax hightlighter (like http://softwaremaniacs.org/media/soft/highlight/test.html ), what do you think ?

[facelessuser]

Your package installs with the package folder having a space. I would add the space back in. It breaks for me without the space.

Also, text in code block is a bit tiny, but everything else is nice.

I think if you add back in the space, and increase the text size for code blocks, it will be more than enough for me :).

Maybe ill implement a real javascript syntax hightlighter (like http://softwaremaniacs.org/media/soft/highlight/test.html ), what do you think ?

Looks cool. It won't give an accurate representation of how markdown will look, since markdown doesn't usually have this, but it might be one of those things you can add as a nice option that can be turned on in the settings file.

[facelessuser]

Looks like font-size used to be .98em and now it is .08em. That looks to be the issue.

[revolunet]

both fixed ;)

[facelessuser]

Thanks! Again, great plugin.