A default stylesheet based on GitHub’s Markdown formatting for use with BBEdit’s Preview CSS feature.

DefaultCSS_Markdown.css

body {
	background-color: #FFF;
	color: #333;
	font: 15px Helvetica, arial, freesans, clean, sans-serif;
	word-wrap: break-word;
	line-height: 1.7;
	padding: 0 20px 20px 20px;
	width: 722px;
	-webkit-font-smoothing: antialiased;
	}

a {
	color: #4183c4;
	text-decoration: none;
	}

a:hover {
	text-decoration: underline;
	}

p, blockquote, ul, ol, dl, table, pre {
	margin: 15px 0;
	}

ul, ol {
	padding-left: 30px;
	}

h1 {
	border-bottom: 1px solid #ddd;
	color: #000;
	font-size: 2.5em;
	}

h2 {
	border-bottom: 1px solid #eee;
	color: #000;
	font-size: 2.0em;
	}

h3 {
	font-size: 1.5em;
	}

h4 {
	font-size: 1.2em;
	}

h5 {
	font-size: 1.0em;
	}

h6 {
	color: #777;
	font-size: 1.0em;
	}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.7;
	margin: 1em 0 15px 0;
	}

h1 + p, h2 + p, h3 + p {
	margin-top: 10px;
	}
	
img {
	max-width: 100%;
	}

code,
pre {
	background-color: #F8F8F8;
	border-radius: 3px;
	border: 1px solid #DDD;
	font-family: Consolas, "Liberation Mono", Courier, monospace;
	font-size: 12px;
	margin: 0 2px;
	padding: 0 5px;
	white-space: pre;
	}

pre code {
	border: none;
	margin: 0;
	padding: 0;
	white-space: pre;
	}

Is there any way to get multiple lines of code to share the same encapsulating grey box instead of separate ones for each line?

This is what I get when using your stylesheet:

I should be able to update the CSS to handle this.

What markup are you using for the code snippets?

Single ticks ( ` ) or triple ticks ( ``` ) ?

HI thanks. I'm using triple ticks for multi-line code snippets and single ticks for within-line code snippets.

B.t.w. I ended up using a BBEdit stylesheet here which does this the way I wanted. You could look at that if it helps.

I was only styling for single ticks … that explains things.

And thanks for the pointer to the other stylesheet. That’s going to be very useful.

Adjusted styles to handle <code> and <pre> wrapped text a bit more consistently.

Thanks!

This is awesome; thanks!

You’re very welcome.