{"id":331990,"date":"2021-01-06T13:31:06","date_gmt":"2021-01-06T21:31:06","guid":{"rendered":"https:\/\/css-tricks.com\/?p=331990"},"modified":"2021-01-06T13:31:09","modified_gmt":"2021-01-06T21:31:09","slug":"styling-code-in-and-out-of-blocks","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/styling-code-in-and-out-of-blocks\/","title":{"rendered":"Styling Code In and Out of Blocks"},"content":{"rendered":"\n

There is a <code><\/code> tag in HTML. I literally just used it to wrap that tag in the previous sentence \u2014 so meta. It is an inline-by-default element that denotes any sort of code. It has default (user agent) styles that apply a monospace font-family, which feels like a fine default (as it’s true, most code is looked at in monospace).<\/p>\n\n\n\n

\/* User agent styles in all browsers *\/\ncode {\n  font-family: monospace;\n}<\/code><\/pre>\n\n\n\n
It’s likely something that you’ll style with the tag itself<\/em> as well in your stylesheets. It’s just one of those elements where it seems far more natural to just use it raw, as opposed to resetting it to no styles and opting into styles with a class.<\/p>\n\n\n\n\n\n\n\n
\/* You'll probably do this: *\/\ncode {\n  \/* custom styles *\/\n}\n\n\/* Or maybe scope it to something like: *\/\narticle code {\n\n}\n\n\/* It seems less common and more annoying to do this: *\/\ncode {\n  \/* reset styles *\/\n}\n\ncode.some-class {\n  \/* opt-in styles *\/\n}<\/code><\/pre>\n\n\n\n
On this site right now (v18), I apply some modest styles and scope some of them within textual elements:<\/p>\n\n\n\n
\/* For all <code> *\/\ncode {\n  font-family: MyFancyCustomFont, monospace;\n  font-size: inherit;\n}\n\n\/* Code in text *\/\np > code,\nli > code,\ndd > code,\ntd > code {\n  background: #ffeff0;\n  word-wrap: break-word;\n  box-decoration-break: clone;\n  padding: .1rem .3rem .2rem;\n  border-radius: .2rem;\n}<\/code><\/pre>\n\n\n\n
One thing this helps with is, say, this:<\/p>\n\n\n\n
<h3>The <code>.cool<\/code> Class<\/h3><\/code><\/pre>\n\n\n\n
My styles will still make that a nice monospace font, size it to be the same as the header, but not<\/em> apply the background color and padding stuff I like for code within text.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The bigger deal when it comes to scoped-styles for <code><\/code> though is this very common markup:<\/p>\n\n\n\n
<pre><code>\n  example code block\n<\/code><\/pre><\/code><\/pre>\n\n\n\n
The <pre><\/code> tag is important for displaying code blocks, as it respects whitespace in the HTML. But semantically, it just means “pre-formatted text.” If it’s a code block, there should be a <code><\/code> tag involved too. But <code><\/code>, remember, is an inline element. Plus, it’s highly likely that how you want it to look within a sentence is quite different from how you want it to look in a block. <\/p>\n\n\n\n
Jason was tweeting about this the other day:<\/p>\n\n\n\n
\n
I didn't think this CSS would work, but it did:

\/* this applies to ALL code elements in the .post *\/
.post code {
  color: pink;
}

\/* this applies ONLY to code elements not inside a pre tag *\/
.post :not(pre) code {
  color: blue;
}

\ud83e\udd2f\ud83e\udd2fhttps:\/\/t.co\/0Pwnvmpz4q<\/a> pic.twitter.com\/5Z3vAWz1iN<\/a><\/p>— Jason Lengstorf (@jlengstorf) December 27, 2020<\/a><\/blockquote>