tag:support.markedapp.com,2011-09-11:/discussions/questions/3605-colored-boxes-around-wordsMarked: Discussion 2016-08-11T03:21:30Ztag:support.markedapp.com,2011-09-11:Comment/292641262013-10-08T13:10:30Z2013-10-08T13:10:30ZColored boxes around words<div><p>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.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/292641262013-10-08T15:32:07Z2013-10-08T15:32:10ZColored boxes around words<div><p>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.<br>
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?<br>
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?</p>
<p>Thanks again! Best,</p>
<p>Michael</p></div>Michaeltag:support.markedapp.com,2011-09-11:Comment/292641262013-10-08T16:02:51Z2013-10-08T16:02:51ZColored boxes around words<div><p>To color words, in your Markdown you would use span tags, like
this:</p>
<p>This is an <span class="important blue">important</span>
word.</p>
<p>Then you have "important" and "blue" that you can style in
CSS.</p>
<p>In your custom stylesheet, you'd include something like:</p>
<p>.important { border: solid 1px #ccc; font-weight: bold; }</p>
<p>.blue { background-color: #a7deff; }</p>
<p>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.</p>
<p>There's a wealth of documentation available on CSS. The Mozilla
Developer Network provides some especially good information:
<a href=
"https://developer.mozilla.org/en-US/docs/Web/CSS?redirectlocale=en-US&redirectslug=CSS">
https://developer.mozilla.org/en-US/docs/Web/CSS?redirectlocale=en-...</a></p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/292641262014-04-02T22:28:14Z2014-04-02T22:28:32ZColored boxes around words<div><p>This was super helpful. I'm using the css with a div like
this:</p>
<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>
<p>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.</p>
<p>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?</p>
<p>Thanks!<br>
Jamie</p></div>jamietag:support.markedapp.com,2011-09-11:Comment/292641262014-04-02T22:30:38Z2014-04-02T22:30:38ZColored boxes around words<div><p>You just need to add a class to the div that you can apply a<br>
page-break-before rule to.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/292641262014-04-02T22:53:44Z2014-04-02T22:53:44ZColored boxes around words<div><p>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?</p></div>jamietag:support.markedapp.com,2011-09-11:Comment/292641262014-04-02T22:57:34Z2014-04-02T22:57:34ZColored boxes around words<div><p>Use avoid and see how it goes. That should only add the page
break if it<br>
actually crosses a page threshold.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/292641262014-04-02T23:42:19Z2014-04-02T23:42:19ZColored boxes around words<div><p>Does't seem to work. Here's my CSS in the additional CSS box in
preferences:</p>
<p>.important { border: solid 2px #ccc;<br>
border-radius: 5px;<br>
margin: 5px 5px 15px 5px;<br>
padding: 10px;<br>
page-break-before: avoid;<br>
}</p></div>jamietag:support.markedapp.com,2011-09-11:Comment/292641262014-04-03T00:29:17Z2014-04-03T00:29:17ZColored boxes around words<div><p>Try "always?" I can't really spend much time troubleshooting<br>
CSS-specific issues that aren't Marked's fault. This is the
recommended<br>
path, though…</p></div>Brett