Home → Questions →

Colors disappearing on PDF export - confused

• Edit

dcollett.seattle

12 Aug, 2012 02:38 AM

Hi, everyone.

I'm very new to Markdown and even newer to CSS. I hope you can help a beginner.

I wrote a simple document using embedded CSS at the top:

<style type="text/css" media=screen>
p {color:#000000;}
h2 {color: #ff0000; }
</style>

I also have one instance of inline CSS:

<P style="color:#ff9900">
Hello everyone
</p>

Then in the document, I'm using h2 tags for titles.

Everything looks great in Marked, but when I export to PDF, all the h2 titles are changed back to black, but "Hello everyone" is in orange.

Therefore, the embedded CSS seems to be ignored when exporting to PDF.

Is this normal, or am I doing something wrong?

Is there a way around this problem?

Thanks for your help!

David

1. Support Staff 1 Posted by Brett on 12 Aug, 2012 01:46 PM

   

   It's because you have media=screen in your style statement. remove that or add another block for media=print. The PDF export uses Print-to-PDF, so print styles will override screen styles on output.

   Is there a reason you're not using "Custom CSS" for this?

   • Edit

2. 2 Posted by dcollett.seattl... on 12 Aug, 2012 08:12 PM

   

   Hi, Brett. Thanks for your help.

   I'm really loving Marked and Markdown, so I'm excited to learn more about CSS. As I mentioned above, I'm an absolute beginner with CSS.

   What do you mean "Custom CSS"?

   Thanks for your help.

   David

   • Edit

3. Support Staff 3 Posted by Brett on 12 Aug, 2012 09:42 PM

   

   Under the Style preferences you can create and add your own CSS file that will appear in the style menu on the preview window. If you look in ~/Library/Application Support/Marked/ you'll find an example file to play with (or just select it in the Preferences panel and hit the "reveal" button).

   • Edit

4. 4 Posted by dcollett.seattl... on 13 Aug, 2012 04:52 AM

   

   Thanks very much Brett! I will look at the example file, make a copy, and play around with it to make my own styles. It seems like a great way to learn CSS.

   Another question: in the iOS program Nocs, in the example file at the end, he uses the syntax:

   -> _text goes there blah blah_ <-
   

   to make a centered, italicized quotation.

   Is this something we can make using CSS?

   I tried this notation in Marked, and it doesn't do anything.

   Thanks.

   David

   • Edit

5. Support Staff 5 Posted by Brett on 13 Aug, 2012 12:53 PM

   

   You can't do this by default in Marked, no. It's part of the Discount renderer and is non-standard Markdown. The next version of Marked has the option to use Discount, but there are tradeoffs when switching from MultiMarkdown to Discount.

   • Edit

6. 6 Posted by dcollett.seattl... on 13 Aug, 2012 08:40 PM

   

   Thanks Brett. It's not so much that I want or need this (it's easy enough to do in HTML).

   I was curious if we, as end users, could somehow define tags such as this. For example, could we define this:

   -> text here <-
   

   to expand to the HTML necessary to center, italicize the text.

   Probably not, but just curious.

   Thanks again for the help and great application Marked!

   David

   • Edit

7. Support Staff 7 Posted by Brett on 14 Aug, 2012 12:41 AM

   

   No, there's currently no support for extending the internal syntax. However, if you can find a Markdown processor that does what you need, it's very easy to switch the processor over to a new one (or an entirely custom one, if that's your thing). There are different extended syntax in every processor, so you just have to find the one that best suits your needs.

   Marked 1.5 will also allow preprocessors, so you can swap out some syntax using regular expressions before it runs the main processor. Still, no easy or modular support for extending the markup.

   • Edit

8. Brett closed this discussion on 26 Aug, 2012 08:04 PM.