Archive

Posts Tagged ‘source code’

Posting source code in wordpress

October 26, 2008 Leave a comment

I was young, i was new to wordpress.com and i wanted to post source code snippets in my blog. From other blogs i knew you could have these nicely formatted code lines like

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
margin:0;
padding:0;
}

This is done by using

[sourcecode language="css"]
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
margin:0;
padding:0;
}
[/sourcecode]

as described on this support page.

But what to do if your source code sample is very long and you want to avoid an overly long page?

WordPress.com allows certain html tags and so the div-tag can be used as container that wraps around the code snippet. By applying a fixed height and setting the overflow attribute to auto the div-container will display a vertical scrollbar if the code snippets is longer than the given height.

Example:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
margin:0;
padding:0;
}
fieldset, img, abbr {
border:0 none;
}
address, caption, code, dfn, h1, h2, h3, h4, h5, h6, th, var {
font-style:normal;
font-weight:normal;
}
caption, th {
text-align:left;
}
q:before, q:after {
content:'';
}
a {
text-decoration:none;
}
body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
font-family:Arial,Helvetica,sans-serif;
font-size:62.5%;
}
body#h4home {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F1F1F1 none repeat scroll 0 0;
}
h2 em, h6.hot-cat, #hot ul li, #featuredblog h3, #home-featuredblog h3, #intro h2, #intro h6, #signupnow h4, p.heatmap, h2, ul.support-faq-topics a, #news ul li a, #tags .tag-list a, div.tag-post h4, .gad-head, #getablog h4, #hottags, #getablog-small h5, ol.postlist li h4, ol.bloglist li h4, .snap_topposts ul li a, p.support-faq-advise {
font-family:Georgia,"Bitstream Vera Serif","Times New Roman",serif;
}
#getablog h2 {
font-family:Arial,Helvetica,sans-serif;
}
input[type="text"], input[type="password"], input[type="button"], input[type="submit"], textarea {
font-family:Arial,Helvetica,sans-serif;
}
body.loggedin {
background-position:0 28px;
padding-top:28px;
}
button {
border:0 none;
cursor:pointer;
overflow:visible;
padding:0;
position:relative;
}
button::-moz-focus-inner {
border:medium none;
}
button span {
display:block;
position:relative;
white-space:nowrap;
}
button span {
margin-top:-1px;
}
#wrapper button, #wrapper input[type="submit"], a.new-topic {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:11px !important;
-moz-border-radius-bottomright:11px !important;
-moz-border-radius-topleft:11px !important;
-moz-border-radius-topright:11px !important;
-x-system-font:none !important;
background:#F2F2F2 url(./i/buttonbg.png) repeat-x scroll left top;
border:1px solid #CCCCCC;
color:#333333;
font-family:Arial,Helvetica,sans-serif !important;
font-size:12px !important;
font-size-adjust:none !important;
font-stretch:normal !important;
font-style:normal !important;
font-variant:normal !important;
font-weight:bold !important;
height:22px !important;
line-height:normal !important;
margin:0 !important;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
padding:0 10px 0 !important;
text-decoration:none !important;
text-shadow:0 1px 0 #FFFFFF;
}
#wrapper button::-moz-focus-inner, #wrapper input[type="submit"]::-moz-focus-inner {
border:medium none;
margin-top:0;
padding:0;
}
#wrapper button:hover, #wrapper input[type="submit"]:hover, a.new-topic:hover {
border-color:#555555;
}
a.new-topic {
color:#444444 !important;
display:inline-block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px !important;
font-weight:bold !important;
line-height:22px !important;
vertical-align:middle;
}
#wrapper input#comment-submit {
margin-left:0;
}
#wrapper button {
margin:10px 10px 0 0;
}
#wrapper button:active, #wrapper input[type="submit"]:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#EEEEEE url(./i/buttonbg.png) repeat-x scroll left bottom;
}
.disabled, .disabled:hover {
-moz-background-clip:border !important;
-moz-background-inline-policy:continuous !important;
-moz-background-origin:padding !important;
background:#DDDDDD none repeat scroll 0 0 !important;
border:1px solid #CCCCCC;
color:#EEEEEE !important;
}
p {
color:#444444;
font-size:15px;
line-height:1.6em;
margin-bottom:1.4em;
}
ul, ol {
color:#444444;
}
ol {
font-size:13px;
margin-left:33px !important;
}
em, cite, #getablog h2 em, #botdsearch, .form-table tr.error p strong {
font-style:italic;
}
p.lead-in a {
border-bottom:1px solid #DDDDDD;
font-weight:normal;
padding-bottom:2px;
}
p a, ul a, ol a, h2 a, h3 a, h4 a, h5 a, h6 a {
border-bottom:1px solid #DFDFDF;
}
a {
font-weight:normal;
}
a:link, a:visited, h2 a:visited {
color:#21759B;
}
.widefat a:visited, #tags a:visited, #hot a:visited, #botd a:visited, #news a:visited {
color:#4CA6CF;
}
a:hover, h2 a:hover, .widefat a:hover, #tags a:hover, #hot a:hover, #botd a:hover, #news a:hover, a:active, h2 a:active {
color:#F1831E;
}
a {
cursor:pointer;
text-decoration:none;
}
#thread .contenttext, .commentlist .contenttext {
overflow:auto;
}
#thread code, #commentlist code {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FCFCFC none repeat scroll 0 0;
border:1px solid #E5E5E5;
color:#888888;
display:block;
overflow:auto;
padding:10px;
width:95%;
}
ul#topnav {
clear:right;
float:right;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:40px -9px 0 0;
text-align:right;
}
ul#topnav li {
float:left;
margin:0;
}
ul#topnav li a {
border:medium none;
display:block;
font-size:14px;
line-height:34px;
padding:0 8px;
}
ul#topnav li a.current {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
background:#FFFFFF none repeat scroll 0 0;
color:#555555;
}
ul#topnav li.last-child a.current {
margin-right:8px;
}
h6 {
color:#444444;
font-size:11px;
font-weight:bold;
}
ol, ul {
font-size:15px;
line-height:1.6em;
margin-bottom:20px;
margin-left:24px;
}
ol p {
font-size:1em;
}
ol li, ul li {
margin-bottom:4px;
}
blockquote {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F5F5F5 none repeat scroll 0 0;
margin-bottom:22px;
padding:10px 13px 2px;
}
blockquote p {
margin-left:0 !important;
}

 

HTML code:

<div style="overflow: auto; height: 100px;">
[sourcecode language="css"]
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
margin:0;
padding:0;
}
...
[/sourcecode]
</div>

Advertisements