Skip to content

Instantly share code, notes, and snippets.

@jmakeig
Last active May 23, 2022
Embed
What would you like to do?
BBEdit Markdown stylesheet (~/Library/Application Support/BBEdit/Preview CSS/clean.css)
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12pt;
line-height: 1.45;
padding: 0 1rem;
max-width: 60em;
}
a {
color: rgba(0, 122, 255, 1);
}
a:visited {
color: rgba(88, 86, 214, 1);
}
pre, code {
font-family: "SF Mono", "Input Mono", "Inconsolata", "Consolas", monospaced;
font-size: 10pt;
color: rgba(255, 45, 85, 1);
border: solid 0.5px #ccc;
border-radius: 0.25em;
}
pre {
margin: 1em;
padding: 0.75em;
line-height: 1.55;
}
code {
padding: 0.1em 0.35em;
white-space: nowrap;
}
pre > code {
white-space: pre;
border: none;
}
pre {
width: 100%;
overflow: scroll;
}
blockquote {
border-left: solid 0.25em #ddd;
padding: 0.5em 1em;
font-style: italic;
color: #999;
}
footer {
border-top: solid 0.5px #ccc;
padding-top: 0.5em;
font-size: 0.75em;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
line-height: 1.1;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3, h4, h5, h6 { font-size: 1rem; }
/* Indentation of “child” content */
h2 ~ *:not(h1, h2) {
margin-left: 1rem;
}
h3 ~ *:not(h1, h2, h3) {
margin-left: 2rem;
}
h4 ~ *:not(h1, h2, h3, h4) {
margin-left: 3rem;
}
h5 ~ *:not(h1, h2, h3, h4, h5) {
margin-left: 4rem;
}
h6 ~ *:not(h1, h2, h3, h4, h5, h6) {
margin-left: 5rem;
}
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}
h2:before,
h3:before,
h4:before,
h5:before,
h6:before {
background-color: black;
color: white;
padding: 0.25rem 0.5rem;
padding-right: 0.25rem;
margin-right: 0.5rem;
border-radius: 0.25rem;
font-size: 1rem;
}
h2:before {counter-increment: h2; content: counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
/*
Red: rgba(255, 59, 48, 1)
Orange: rgba(255, 149, 0, 1)
Yellow: rgba(255, 204, 0, 1)
Green: rgba(76, 217, 100, 1)
Teal Blue: rgba(90, 200, 250, 1)
Blue: rgba(0, 122, 255, 1)
Purple: rgba(88, 86, 214, 1)
Pink: rgba(255, 45, 85, 1)
*/
h2:before {
background-color: rgba(76, 217, 100, 1);
color: rgba(38, 108, 50, 1);
}
h3:before {
background-color: rgba(0, 122, 255, 1);
color: rgba(0, 61, 127, 1);
}
h4:before {
background-color: rgba(88, 86, 214, 1);
color: rgba(44, 43, 107, 1);
}
h5:before {
background-color: rgba(255, 45, 85, 1);
color: rgba(127, 23, 42, 1);
}
h6:before {
background-color: rgba(255, 59, 48, 1);
color: rgba(127, 28, 24, 1);
}
@joshuatbrown
Copy link

joshuatbrown commented Nov 20, 2017

This looks much better than the default Markdown preview in BBEdit. Thank you!

@billtubbs
Copy link

billtubbs commented Feb 5, 2022

Couldn't find that path on my system to put this in. Under ~/Library/Application\ Support/BBEdit/ all I have is:

Clippings		Language Modules	Scripts
Color Schemes		Menu Scripts		Setup
Custom Keywords		Read Me.txt		Text Filters

Can seem to find anything on this in the BBEdit documentation...

@billtubbs
Copy link

billtubbs commented Feb 5, 2022

Problem solved. I just needed to manually create the folder /Users/billtubbs/Library/Application\ Support/BBEdit/Preview\ CSS/.
thanks.

@nfnonsense
Copy link

nfnonsense commented May 23, 2022

Thanks for sharing. Anyway to get the code block to wrap the text so it matches up with the body?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment