80

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?

1
  • Color-coding will require one of the various syntax highlighters available.. The are pure-JavaScript solutions if you don't have access to PHP.
    – drudge
    Oct 22, 2010 at 20:48

6 Answers 6

114

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.

7
  • Do you mind sharing HTML code snippet where actual code is present ?
    – BeingSuman
    Jan 10, 2020 at 8:48
  • @BeingSuman no I do not mind, just I understand you correctly, you are looking for full code example for the above example, if Yes, let me know so I can do it later I am home. otherwise if you look at the git repo there are some examples you can look at let me know as well if that helps. Jan 10, 2020 at 9:10
  • Thanks, got sample by inspecting the element on your website.
    – BeingSuman
    Jan 10, 2020 at 9:31
  • Nice design, but it's not responsive. Apr 2, 2020 at 7:44
  • 1
    @JivkoJelev when time allow I will make it responsive :) Apr 2, 2020 at 8:28
52

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

0
25

<pre> would automatically retain your tabs and line-breaks within the bounding pre tags. Most browsers automatically default to a monospaced font inside pre but if you want to force it, (which is a good idea) you can use the following CSS:

pre { font-family: monospace; }

I would recommend that you not place code directly into a <blockquote> element. It is semantically incorrect.

If you want your code to be semantically correct, you should mark it up like this:

<pre><code>
My pre-formatted code
    here.
</code></pre>

If you are actually "quoting" a block of code, then the markup would be:

<blockquote><pre><code>
My pre-formatted "quoted" code here.
</code></pre></blockquote>

If you want even better-looking code, you can employ Google Code's Prettify which is used by StackOverflow to color code-snippets. It has it's own stylesheets that it automatically imports based on what language it thinks the code is and colors the code accordingly. You can give it a hint as to what language the code is by appending a class.

1
  • (fyi) <pre> tags are no longer supported in Tumblr. Jun 16, 2022 at 18:27
12

Well, you could try using a <pre> tag in your blockquote to preserve the formatting first, and then use a monospaced font, like courier for the css style.

Something like this would work in the css:

pre {
  font-family:     "Courier New"
                    Courier
                    monospace;
}
11

You can take a look at the prismjs to highlight the code.

You can customise the package as your wish from here and the footprint of this package will be still minimal.

Once you have a package, then you can use it as below:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="themes/prism.css" rel="stylesheet" />
  </head>
  <body>
    ...
    <script src="prism.js"></script>
  </body>
</html>

Once the above setup is done, then you can use it like below:

<pre><code class="language-css">p { color: red }</code></pre>
6

First, I would show the code in a <pre> </pre> element give the pre element a nice style in your css and call it a day.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy