Home → Questions →

Colored boxes around words

• Edit

Michael

08 Oct, 2013 08:25 AM

Hello all.

Thanks a lot for that nice app. My search for cross-device and cross-platform editing has (probably) come to an end.

I am mainly poducing (scientific/mecical) scripts for print and handout, less for web publishing and I was asking myself: Do you believe MultiMarkdown is an option to produce nice, beautiful material for print? I guess font size can be adjusted by using "zoom in" and "zoom out" in the menu, typeface should be in the CSS sheets. What about finetuning documents for print?

I also can't figure out how to add special formatting (in addition to italics and bold), eg print a word in yellow when it's important for one thing and in red when it's important for another. Or print words in a colored box.

Your help is greatly appreciated. Thanks!

Best,
Michael

1. Support Staff 1 Posted by Brett on 08 Oct, 2013 01:10 PM

   

   Markdown isn't really designed for the kind of styling you mention in the last paragraph. Print styles can handle most common formatting, but multiple colors and things like that would require additional HTML/CSS being used. If you're proficient with adding extra tags, it could be done with span tags containing special classes that are then referenced in a custom stylesheet.

   • Edit

2. 2 Posted by Michael on 08 Oct, 2013 03:32 PM

   

   Thank you for your kind answer! I am not very familiar with CSS I am still willing - and decided - to try my best to enable such features.
   A new class would be contained and described in the CSS sheet, if I understand correctly. Where would I have to put an extra tag, and how and from where could I call it?
   I am aware that this is not the kind of support this forum is mentioned to give. But nevertheless I would greatly appreciate your answer! Could you point me to the correct documentation concerning this very matter?

   Thanks again! Best,

   Michael

   • Edit

3. Support Staff 3 Posted by Brett on 08 Oct, 2013 04:02 PM

   

   To color words, in your Markdown you would use span tags, like this:

   This is an <span class="important blue">important</span> word.

   Then you have "important" and "blue" that you can style in CSS.

   In your custom stylesheet, you'd include something like:

   .important {
   border: solid 1px #ccc;
   font-weight: bold;
   }

   .blue {
   background-color: #a7deff;
   }

   You can add classes for "important red", "important green", etc. None of the names matter as long as what's in your stylesheet matches what's in your markup.

   There's a wealth of documentation available on CSS. The Mozilla Developer Network provides some especially good information: https://developer.mozilla.org/en-US/docs/Web/CSS?redirectlocale=en-US&redirectslug=CSS

   -Brett

   • Edit

4. 4 Posted by jamie on 02 Apr, 2014 10:28 PM

   

   This was super helpful. I'm using the css with a div like this:

   <div class="important blue">**Sidenote: How To Add Colored Boxes**
   <br>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500.
   </div>

   If I have a colored box that starts in the middle or near the end of a page, sometimes it will cross over to the next page.

   I would like to add some logic that can detect if a colored box will cross over two pages in a PDF export, and if so add a page break before the box. If that's possible can you explain how I can accomplish it?

   Thanks!
   Jamie

   • Edit

5. Support Staff 5 Posted by Brett on 02 Apr, 2014 10:30 PM

   

   You just need to add a class to the div that you can apply a
   page-break-before rule to.

   -Brett

   • Edit

6. 6 Posted by jamie on 02 Apr, 2014 10:53 PM

   

   Since I won't know if there will be a page break dividing the colored box until I render to PDF, what should I set the value of page-break-before to? I see options for "avoid" and "always" in the Byword theme css. Should I be using one of those values or another value?

   • Edit

7. Support Staff 7 Posted by Brett on 02 Apr, 2014 10:57 PM

   

   Use avoid and see how it goes. That should only add the page break if it
   actually crosses a page threshold.

   -Brett

   • Edit

8. 8 Posted by jamie on 02 Apr, 2014 11:42 PM

   

   Does't seem to work. Here's my CSS in the additional CSS box in preferences:

   .important { border: solid 2px #ccc;
   border-radius: 5px;
   margin: 5px 5px 15px 5px;
   padding: 10px;
   page-break-before: avoid;
   }

   • Edit

9. Support Staff 9 Posted by Brett on 03 Apr, 2014 12:29 AM

   

   Try "always?" I can't really spend much time troubleshooting
   CSS-specific issues that aren't Marked's fault. This is the recommended
   path, though…

   • Edit