Select Page

My Linux Command Line Rendering

My Linux Command Line Rendering


If you’ve read one of my previous Linux related posts you’ve probably noticed the snazzy CCS that I use.  The CSS I’m referring to is used to render the Linux Command Line Interface (CLI) examples.

This is what I'm talking about.

Inspired by some others I’ve seen on other sites it makes the Linux Command Line stand out.  It also makes it easier to read (IMHO), but how do I do it?

Well that’s the purpose of this post.  I am going to share the CSS with you and explain how you can customise it for your own needs.

How it Works

First of all, here’s the CSS.  I’ve number the lines to make it easier to explain what it does.

  1. pre {
  2. height: auto;
  3. overflow: auto;
  4. border-bottom-left-radius:5px;
  5. border-top-left-radius:5px;
  6. border-bottom-right-radius:5px;
  7. border-top-right-radius:5px;
  8. background-color: #f9f9f9;
  9. border-left: 5px solid #fd7a41;
  10. margin: 1.7em 0 1.7em .3em;
  11. word-break: normal !important;
  12. word-wrap: normal !important;
  13. white-space: pre !important;
  14. color: #000;
  15. padding: .938rem;
  16. box-shadow: 5px 7px #f0eeec;

So what do all those lines mean?

  1. Number 1, tells us that we are defining the <pre> tag.
  2. 2 and 3 define the height, and the scrollbar.
  3. 4 and 5 and 6 and 7 define the rounded corners of the box.  You could remove these to make the box square.
  4. 8 should be pretty self explanatory.
  5. 9 creates the nice orange left hand border.
  6. 10 Ensures a border around the box.
  7. 11 and 12 and 13 ensure our text is formatted correctly.
  8. 14 defines the colour of the text.
  9. 15 defines the blank space between the text in the centre and the top and bottom of the box.
  10. 16 defines the drop shadow and the colour.  This won’t show on some older browsers.

So that’s it.  That’s how the wrappers are done for my CLI blog posts.

Take the above code and make it your own (don’t forget to remove the line numbers).  Customise the look and feel so that it fits with the scheme of your website or blog.

Why not post examples of your customisations in the comments section?

1 Comment

  1. Thanks. Like the effect and the explanation. Will use on my website with tweaks.

Leave a reply