«

Awesome Full Page Code Highlighting with CSS

The problem: your content is bounded by a centered div, but for a nice visual zing you’d like to expand the width of your code blocks to cover the entire page.

So, your site currently looks like this…

Before, normal code blocks

Note the code block highlighting is bound to the content. That’s Ok, BUT with a little CSS, it could look like… After, exciting new code blocks!

That’s better, yeah?

We can create this effect by adding CSS3 ::before and ::after pseudo elements to our code blocks. I stumbled onto this approach while inspecting the design of Arkency’s blog. Specifically: http://blog.arkency.com/2014/01/ruby-to-enum-for-enumerator/

To make Awesome Full Page Code Highlighting with CSS:

Here is the relevant code:

html, body {
    x-overflow: hidden
}
article .text pre:before, article .text pre:after {
    background-color: #f9f9fa;
    border-top: 1px solid #ededee;
    border-bottom: 1px solid #ededee;
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 1000px;
}
article .text pre:before {
    right: 100%;
}
article .text pre:after {
    left: 100%;
}

Not bad, right?

Share Comment on Twitter