Skip to content

Instantly share code, notes, and snippets.

@jmakeig
Last active May 23, 2022 18:43
Show Gist options
  • Save jmakeig/d6ebca6f0bd9557609e1 to your computer and use it in GitHub Desktop.
Save jmakeig/d6ebca6f0bd9557609e1 to your computer and use it in GitHub Desktop.
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);
}
@billtubbs
Copy link

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

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

@shrikeit
Copy link

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