Nice Code blocks
-
Hi
I am looking for a way to add code to my blog.I would like a nice light grey background something similar to this website but lighter to match my site.
http://www.unixnote.com/2010/06/how-to-mirror-root-disk-with-solaris-volume-manager-svm.html
My site is
On this post I have the markdown the way I want it using
.. copy past works without any issues I just want the grey box with a border.
-
I found some plugins but it seems like overkill for waht I want to do.
You can generally do that using custom CSS (using the existing mark-up or adding a class) or possibly look at using a plugin for posting code…
Appearance – Background and change it there?
Or am I thinking this is too simple?I have seen plugins but it seems like overkill for what I want to do. Plus the plugins I found done do the “grey” back ground in the block code.
I will keep looking.
I live edited your site in Firebug. Wrapping your content in
<pre> </pre>
tags then changing the text color to #000 makes it looks like this screengrab:Most of the code to do that is already in your theme’s stylesheet, look for:
pre { ... }and then simply change the color as above.
Hi WPranger
I think you were on while I was making changes. I added the following code and that converted posts that have the
into the blocks.
I am still trying to strip it down a little I dont think I need all of those options.
/* WP */ code { color: #000000; clear: both; font-family: "Courier New", Courier, monospace; } pre { display: block; border: 1px solid #CCCCCC; background-color: #f7f7f7; color: #000000; padding: 6px; margin: 12px 0px; clear: both; font-family: "Courier New", Courier, monospace; } blockquote{margin:20px 10px 10px 5px;border-left:4px solid #DDD;padding:0 5px 0 5px;font-size:9px;text-align:justify;} .commenttext blockquote{border-left:4px solid #B6B6B5;} .wp-caption{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;} .wp-caption img{border:none;margin:0;padding:0;} .wp-caption p.wp-caption-text{font-size:11px;line-height:17px;color:#111;margin:0;padding:0 4px 5px;} .alignleft,img.alignleft{float:left;margin:5px 10px 5px 0;} .alignright,img.alignright{float:right;margin:5px 0 5px 10px;} .aligncenter,div.aligncenter,img.aligncenter{text-align:center;display:block;margin:10px auto;} abbr, acronym, span.abbr{cursor:help;border-bottom:1px dotted #000;} table{margin:.5em 0 1em;} table td,table th{text-align:left;border-right:1px solid #414246;padding:.4em .8em; color: #CCCCCC;} table th{background-color:#1f2225;color:#fff;text-transform:uppercase;font-weight:bold;border-bottom:1px solid #35383d;} table td{background-color:#3f4248;} table th a{color:#d6f325;} table th a:hover{color:#fff;} table tr.even td{background-color:#2f3136;} table tr:hover td{background-color:#25272b;} table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{border:0;background:none;background-color:transparent;} .wp_syntax { width:auto; } .wp_syntax table { border:0 !important; } .wp_syntax table td { border:0 !important; } img.wp-smiley{border:0px;vertical-align:middle;}[code fixed by moderator]
Please make sure you are using the code buttons, not blockquote for posting code here :).
opps
After I added the code above everything that had the
<pre> </pre>Got converted.
/* WP */ code { color: #000000; clear: both; font-family: "Courier New", Courier, monospace; } pre { display: block; border: 1px solid #CCCCCC; background-color: #f7f7f7; color: #000000; padding: 6px; margin: 12px 0px; clear: both; font-family: "Courier New", Courier, monospace; } blockquote{margin:20px 10px 10px 5px;border-left:4px solid #DDD;padding:0 5px 0 5px;font-size:9px;text-align:justify;} .commenttext blockquote{border-left:4px solid #B6B6B5;} .wp-caption{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;} .wp-caption img{border:none;margin:0;padding:0;} .wp-caption p.wp-caption-text{font-size:11px;line-height:17px;color:#111;margin:0;padding:0 4px 5px;} .alignleft,img.alignleft{float:left;margin:5px 10px 5px 0;} .alignright,img.alignright{float:right;margin:5px 0 5px 10px;} .aligncenter,div.aligncenter,img.aligncenter{text-align:center;display:block;margin:10px auto;} abbr, acronym, span.abbr{cursor:help;border-bottom:1px dotted #000;} table{margin:.5em 0 1em;} table td,table th{text-align:left;border-right:1px solid #414246;padding:.4em .8em; color: #CCCCCC;} table th{background-color:#1f2225;color:#fff;text-transform:uppercase;font-weight:bold;border-bottom:1px solid #35383d;} table td{background-color:#3f4248;} table th a{color:#d6f325;} table th a:hover{color:#fff;} table tr.even td{background-color:#2f3136;} table tr:hover td{background-color:#25272b;} table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{border:0;background:none;background-color:transparent;} .wp_syntax { width:auto; } .wp_syntax table { border:0 !important; } .wp_syntax table td { border:0 !important; } img.wp-smiley{border:0px;vertical-align:middle;}Thanks WPyogi ..
You can delete the post where I added the code as code not block code.
The topic ‘Nice Code blocks’ is closed to new replies.