BBEdit Markdown stylesheet (~/Library/Application Support/BBEdit/Preview CSS/clean.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);
}

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

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...

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

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