How can I style code listings using CSS?

I'd like to display snippets of programming language code, and also HTML code, inside an HTML document using CSS. I want it to be indented and in fixed-width font... I'm thinking of something like:

<blockquote style="some_style">
my code here
my code here also
</blockquote>

and have it appear in a nicely formatted way (bonus if it's color coded, but doesn't have to be.

How can I accomplish this using CSS?

Sharing an example I use in website, I do use following pre in my stylesheet:

pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

This gives the following results:

enter image description here

Disclaimer: In my leisure time, I have spend few hours to update this CSS with a bit extra features like code lines and code Copy button using CSS with JavaScript to my personal use that I like to share. Please use as you like github source code. To see a code example in real world, check this article from my blog that show how I use the code sample.

This javascript library seems excellent:

https://highlightjs.org/

UPDATE: I also used this on my Tumblr-based blog because it was easiest to deploy:

https://github.com/google/code-prettify

and I have used this one also (some extra features):

http://alexgorbatchev.com/SyntaxHighlighter/

How can I style code listings using CSS?

Related

Recent Posts