Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

CSS for pretty code quotes? WordPress


I'll be posting a lot of code samples here:

[[LINK href=""]][[/LINK]]

Can anyone suggest some CSS that would make this pretty? I'm guessing the obvious thing to do is to use blockqoute. Maybe with a special CSS class. I'll be posting code in 3 languages:




It would be great to keep indents. I could just use PRE but it would look ugly and lack color. I'd like something pretty, like the github handles Gists.

Any suggestions?

(Or even a theme that is good about code samples?)

Answers (2)


Ross Wilson answers:

Twitter bootstrap has pretty nice code formatting built in.
[[LINK href=""]][[/LINK]]

I believe they are using: [[LINK href=""]][[/LINK]]

Lawrence Krubner comments:

How does it know what code is? I mean, what block of text is code? Does it target a specific CSS class?

Ross Wilson comments:

You put the code in a specific class like <pre class="prettyprint">var x=2;</pre>

Ross Wilson comments:

There is a wordpress plugin for it here also

Ross Wilson comments:

And these are the CSS rules from twitter bootstrap that make it look cool:

pre {
padding: 0 3px 2px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 12px;
color: #333333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
code {
padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
pre {
display: block;
padding: 8.5px;
margin: 0 0 9px;
font-size: 12.025px;
line-height: 18px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
pre.prettyprint {
margin-bottom: 18px;
pre code {
padding: 0;
color: inherit;
background-color: transparent;
border: 0;
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;


Rashad Aliyev answers:


I suggest you use these plugin.

or you can get other

That's easily solutions for WP.

Lawrence Krubner comments:

That might work. I just wrap everything in CODE tags?

Rashad Aliyev comments:

That might do it automatically. Hovewer you can install and test it.