Custom code block CSS

Help Customization
1

I’m wanting to customize how a code block looks, but I am having a hard time figuring out how to do this in the CSS. Anyone have an idea of how I can do this? Thanks in advance.

Edit: after not giving up tinkering with the CSS and inspecting the source code in Firefox, I found out that the body#post pre and body#post pre code need to be specified separately to customize the entire code block. At least they did in my case. Hope that’s helpful for anyone else who stumbles upon this.

1 Like
2

pre and code are the ones you want… found an example that looks like a good place to start. I need to sort code blocks on mine too so good timing :laughing:

body#collection pre,
body#post pre,
body#subpage pre {
  max-width:100%;
  margin:0;
  background:#1b1c1d;
  border:1px solid #ccc;
  padding:.375em .625em;
  font-size:.86em;
  -webkit-border-radius:.25em;
  -moz-border-radius:.25em;
  border-radius:.25em
}

body#collection code, body#post code, body#subpage code {
  background-color: #1b1b1b;
  margin: none;
  border: none;
}

.code-block {
  margin:0;
  background:#1b1c1d;
  border:1px solid #ccc;
  padding:.375em .625em;
  font-size:.86em;
  -webkit-border-radius:.25em;
  -moz-border-radius:.25em;
  border-radius:.25em
}
1 Like