CODEWITHSUNDEEP
htmlcss
user248237
user248237

Reputation:

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?

Upvotes: 87

Views: 118377

Answers (6)

Daniel C
Daniel C

Reputation: 1362

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

Upvotes: 53

Maytham Fahmi
Maytham Fahmi

Reputation: 33387

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.

Upvotes: 131

sholsinger
sholsinger

Reputation: 3078

<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.

Upvotes: 27

Rishikesh Darandale
Rishikesh Darandale

Reputation: 3310

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>

Upvotes: 12

Gopherkhan
Gopherkhan

Reputation: 4342

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;
}

Upvotes: 12

FatherStorm
FatherStorm

Reputation: 7183

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.

Upvotes: 6

Related Questions