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

- Type: SCSS
- Runs: Site-wide header
- Category: [Content](https://wpide.com/library/category/content/)
- Tags: scss, code, developer
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/styled-code-blocks-scss/

## Code

```scss
$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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Styled Code Blocks (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/