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