styled live preview & exported file

[PinoTsao]

Hi, I find it kind of ugly when export to pdf, is it possible to add some CSS pattern?

[mitya57]

Hi!

There are two ways to add CSS style to your document:

• Global. Save your CSS to some file and add styleSheet=/path/to/your/file.css to the configuration file.
• Per-document. If you have a file named example.md then if you put some styles to example.css then that file will get styled.

These ways should work for both preview and printing/PDF export. Also you can adjust some properties, e.g. the page size and margins, in the “Page setup” dialog.

[PinoTsao]

Thanks for your info, I tried the following css file as your guide:

1. https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css

It just don't work for me, preview doesn't show any CSS. BTW, I am using ReText 7.0.0

[mitya57]

That CSS file is for a different implementation of Markdown. ReText uses Python-Markdown which does not have some of these element classes.

But removing the .markdown-body requirement from the CSS file makes some parts of it apply:

sed -i "s/\.markdown-body /body /g" ./github-markdown.css

[PinoTsao]

I don't any about CSS actually:( BTW, Do you have any off-the-shelf CSS file to recommend?

[mitya57]

Do you have any off-the-shelf CSS file to recommend?

Probably no. But that depends on what exactly you don’t like about the default style and what you are trying to achieve.

[PinoTsao]

I see. I don't have any particular requirements, ordinary looks is enough, because even code block doesn't have any pattern, just plain text.

Thanks very much:)

[nodiscc]

@PinoTsao this is the CSS file I use: https://github.com/nodiscc/toolbox/blob/master/ATTIC/WEBDEV/markdown.css

I agree that the default stylesheet could be improved. The text looks small and aliased at least on my machine.

[mitya57]

For small font, you can use “Edit -> Change preview font” and set it to any size you like.

[PinoTsao]

@nodiscc Thanks. Finally I find the following can basically satisfy me: https://gist.github.com/EndangeredMassa/8849279/raw/f8ca9e3251226045d9722a4fa8d3cbe6a5e4490f/github.css

https://gist.github.com/andyferra/2554919/raw/10ce87fe71b23216e3075d5648b8b9e56f7758e1/github.css

[nodiscc]

@mitya57 thanks, this is good to know. Here are 3 screenshots of retext with the default style compared to a modified style (the one posted above, I agree it has a lot of unnecessary rules, it even break things like bullets, but I hope it will give you ideas for improvement):

The things it does better in my opinion:

• [x] Images are never larger than the document Fixed in master
• [ ] Less harsh link color, non-underlined links
• [ ] Better proportions between header/paragraph/monospace font sizes
• [ ] Better font than the default Sans font (but finding a font family that's present on all systems may be hard).
• [ ] Larger font