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

CSS for pretty code quotes? WordPress

  • SOLVED

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

[[LINK href="http://blog.tailormadeanswers.com/"]]
http://blog.tailormadeanswers.com/[[/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:

PHP

Javascript

Clojure

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)

2012-06-08

Ross Wilson answers:

Twitter bootstrap has pretty nice code formatting built in.
[[LINK href="http://twitter.github.com/bootstrap/base-css.html#code"]]http://twitter.github.com/bootstrap/base-css.html#code[[/LINK]]

I believe they are using: [[LINK href="http://code.google.com/p/google-code-prettify/"]]http://code.google.com/p/google-code-prettify/[[/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
http://www.deanlee.cn/wordpress/google-code-prettify-for-wordpress/


Ross Wilson comments:

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

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

2012-06-08

Rashad Aliyev answers:

Hello,

I suggest you use these plugin.

http://wordpress.org/extend/plugins/syntaxhighlighter

or you can get other http://wordpress.org/extend/plugins/wp-syntax

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.