Styled Code Blocks (SCSS)
Gives code blocks and inline code in your posts a dark, readable style with rounded corners, a monospace font stack and horizontal scrolling for long lines.
Opens WPIDE on
Code
$code-bg: #1e1e2e;
$code-fg: #e4e4ef;
$inline-bg: rgba(0, 0, 0, 0.06);
$mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
.entry-content,
.wp-block-post-content {
pre,
.wp-block-code {
overflow-x: auto;
padding: 1em 1.25em;
border-radius: 8px;
background: $code-bg;
color: $code-fg;
font-family: $mono;
font-size: 0.875em;
line-height: 1.6;
code {
padding: 0;
background: none;
color: inherit;
}
}
:not(pre) > code {
padding: 0.15em 0.4em;
border-radius: 4px;
background: $inline-bg;
font-family: $mono;
font-size: 0.9em;
}
}Notes
Pairs well with the Copy Button on Code Blocks snippet.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.