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…
Note the code block highlighting is bound to the content. That’s Ok, BUT with a little CSS, it could look like…
That’s better, yeah?
We can create this effect by adding CSS3
elements to our code blocks. I stumbled onto this approach while inspecting
the design of Arkency’s blog. Specifically:
To make Awesome Full Page Code Highlighting with CSS:
- Add a
postition: relativeto the element that contains your
::afterpseudo elements for your code blocks
- These pseudo elements will have no content, be super wide
position: absolute, position them to the far left and right of your code block
- You will also have to set
x-overflow: hiddenon body to force everything to fit on one screen
Here is the relevant code:
Not bad, right?