Since I've been doing a lot of coding-posts of late, I thought I'd take time out from the ongoing "How to build a website" thing, and do a short piece on how to display page-code; especially as regards doing so in a WordPress.com blog, since that poses a few extra difficulties over doing so on a self-hosted site, but also confers a large advantage.
First off, for much of what follows, you'll need to be editing the actual HTML of your post. To do this, instead of using the usual editor at https://wordpress.com/post, you'll need to go to the older version. To find that, go to the dashboard (click the little house-icon at the top right of your Stats page), and then Posts→Add New. When you get there, you'll see that there are two tabs; Visual and Text. You want the Text one.
And here's warning of an annoying quirk of WordPress. If you type an HTML entity into the text-editor—let's say, for instance, " so that a straight double-quote will appear in the final page, then switch to the Visual tab and back again, WordPress will have converted the thing into an actual straight double-quote. Which WordPress will then—bless its shrivelled, blackened heart—convert into a curly double-quote when it's displayed in the actual post. And we most certainly do not want to be including curly quotes in our code-examples. The upshot is that once you've begun editing the HTML, your best bet is to not ever click the Visual tab.
We'll start off with a short snippet we want to display in our post. How about, <span style="color:blue"> … </span>. Let's say, also, that we want it to be within a sentence, rather than display it as a separate paragraph. Just like I did, in fact. It's quite easy. Just replace the less-than signs with < and the greater-thans with >. Then replace the double-quotes with ". Thus we end up with:
<span style="color:blue"> … </span>
… which will display in the page as:
<span style="color:blue"> … </span>. Job done.
And then there's URLs. If I put a URL in, WordPress automatically converts it into a link, like so:
https://theedixieflatline.wordpress.com
… but I may want to include a plain-text URL in a snippet of code, without it being converted. The easiest way I've found to do that is to replace the slashes with the HTML entity for a slash, like so:
http://theedixieflatline.wordpress.com
Which produces:
http://theedixieflatline.wordpress.com
(For readers who may have noticed that links on this blog are usually red; that's because I dislike the default green-with-dashed-underline effect, so I over-ride WP's stylesheet by putting my own style inline.)
But maybe we want to display larger blocks of code, including tab-spaces, which can't be shown in the usual fashion. (The browser, under most circumstances, converts tab-spaces to normal spaces.) The easiest way to do that in places other than WordPress is to use the HTML <pre> tag, thusly:
<p>Here's the CSS:</p>
<pre>
.blue {
color:blue;
}
</pre>
<p>And here's the HTML:</p>
<pre style="white-space:pre-wrap;">
<p>The text <span class="blue">in this span</span> will be coloured blue.</p>
</pre>
Which produces:
Here's the CSS:
.blue {
color:blue;
}
And here's the HTML:
<p>The text <span class="blue">in this span</span> will be coloured blue.</p>
Note that because tab-spaces are reproduced by the browser when included in a pre element, you cannot tab-out your code as you normally would. There should be no tab-spaces in your code, between <pre> and </pre>, except those which you wish your readers to see.
But in WordPress, there's an even better option.
[code]
.blue {
color:blue;
}
<p>The text <span class="blue">in this span</span> will be coloured blue.</p>
[/code]
Produces:
.blue {
color:blue;
}
<p>The text <span class="blue">in this span</span> will be coloured blue.</p>
It's better for a couple of reasons. Firstly you get those numbered lines, which makes it easier to reference, and secondly, you don't have to replace characters with HTML entities. The tags are formed by actual greater- and less-than signs, the quotes by actual double-quotes, and so on, just as we would type them into an html document. But there's more.
For a quite impressive number of coding-languages, we can also have syntax highlighting, like so:
[code language="html"]
I'll insert some html here
[/code]
Which produces:
<div id="colours">
<h2>Coloured Text</h2>
<p>The text <span class="blue">in this span</span> will be coloured blue.</p>
<p>The text <span class="green">in this span</span> will be coloured green.</p>
</div>
And we'd use [code language="css"] to show the appropriate CSS.
For more information on this technique, see this WordPress support page. I'll finish with just one more example: for really huge blocks of code, we can even do this:
[code language="css" collapse="true"]
lots {
and lots
}
of code {
to be
pasted here
}
[/code]
Which—with "lots and lots of code" inserted—produces this:
body {
background-image:url('../Pics/body-bg.png');
background-repeat:repeat;
background-attachment:fixed;
background-color:black;
}
a {
outline:none;
}
em {
font-style:italic;
font-weight:normal;
}
strong {
font-style:normal;
font-weight:bold;
}
em strong {
font-style:italic;
font-weight:bold;
}
strong em {
font-style:italic;
font-weight:bold;
}
#header-wrapper {
width:980px;
height:108px;
margin:10px auto;
background-color:rgba(255, 160, 17, 0.75);
background-image:url('../Pics/header-bg.png');
background-size:970px 106px;
background-repeat:no-repeat;
background-position:center;
border-radius:20px;
border:5px solid #dbc81e;
}
#header {
width:980px;
height:108px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
h1 {
color:#b70000;
text-shadow:
-1px -1px 0 yellow,
1px -1px 0 yellow,
-1px 1px 0 yellow,
1px 1px 0 yellow;
font-size:2.9em;
word-spacing:.7em;
font-family:'Courier New', Courier, monospace;
}
h1 .small {
font-size:.7em;
}
#nav-wrapper {
margin:0 auto;
width:950px;
}
#nav {
text-align:right;
}
#nav-list {
margin:0 10px;
}
#nav-list li {
display:inline;
margin-left:3px;
}
#nav-list li span {
font-family:'Times New Roman', Times, Georgia, serif;
font-size:12pt;
color:#dbc81e;
border-top:1px solid #a62a2a;
border-right:2px solid #a62a2a;
border-bottom:1px solid #a62a2a;
border-left:2px solid #a62a2a;
border-top-left-radius:10px 50%;
border-top-right-radius:10px 50%;
border-bottom-right-radius:10px 50%;
border-bottom-left-radius:10px 50%;
padding:3px 8px;
background-color:rgb(107, 0, 0);
}
#nav-list li span:hover {
color:yellow;
border-top:1px solid yellow;
border-right:2px solid yellow;
border-bottom:1px solid yellow;
border-left:2px solid yellow;
background-color:#a62a2a;
}
#nav-list li.u-r-here span {
color:white;
border-top:1px solid #9e630b;
border-right:2px solid #9e630b;
border-bottom:1px solid #9e630b;
border-left:2px solid #9e630b;
background-color:rgb(107, 0, 0);
}
#nav-list li.u-r-here span:hover {
color:white;
border-top:1px solid white;
border-right:2px solid white;
border-bottom:1px solid white;
border-left:2px solid white;
background-color:#d57f13;
}
#nav-list a {
text-decoration:none;
}
#content {
width:940px;
min-height:700px;
padding:0 20px;
background-color:rgba(158, 99, 11, 0.95);
border-radius:20px;
border:5px solid #dbc81e;
margin:10px auto;
font-size:11pt;
font-family:'baskervald', 'Book Antiqua', georgia, 'Palatino Linotype', Palatino, serif;
color:white;
}
h2 {
font-size:1.4em;
font-weight:normal;
margin:1em auto .75em 1em;
}
p, blockquote {
line-height:1.5em;
text-align:justify;
}
p {
max-width:600px;
text-indent:1.5em;
}
blockquote {
background:-webkit-linear-gradient(left, rgba(255, 160, 17, 0.3), rgba(255, 160, 17, 0.01)); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(right, rgba(255, 160, 17, 0.3), rgba(255, 160, 17, 0.01)); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(right, rgba(255, 160, 17, 0.3), rgba(255, 160, 17, 0.01)); /* For Firefox 3.6 to 15 */
background:linear-gradient(to right, rgba(255, 160, 17, 0.3), rgba(255, 160, 17, 0)); /* Standard syntax */
border-radius:5px;
margin-bottom:23px;
max-width:600px;
padding:5px 5px 5px 10px;
margin-left:4em;
}
#content a, #footer a {
color:#dbc81e;
}
#content a:visited, #footer a:visited {
color:black;
}
#content a:hover, #footer a:hover {
color:yellow;
}
#content a:visited:hover, #footer a:visited:hover {
color:#dbc81e;
}
a img {
border:none;
}
p em, blockquote em, #content li em, .signiature, .captioned em {
font-size:110%
}
.captioned, .uncaptioned {
width:600px;
text-align:center;
font-size:.75em;
margin-bottom:1.5em;
}
.captioned img {
margin-bottom:1em;
}
img.para-width {
width:600px;
}
pre.coding {
background:-webkit-linear-gradient(left, rgba(107, 0, 0, 1), rgba(183, 0, 0, 0)); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(right, rgba(107, 0, 0, 1), rgba(183, 0, 0, 0)); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(right, rgba(107, 0, 0, 1), rgba(183, 0, 0, 0)); /* For Firefox 3.6 to 15 */
background:linear-gradient(to right, rgba(107, 0, 0, 1), rgba(255, 160, 17, 0)); /* Standard syntax */
line-height:1.5em;
white-space:pre-wrap;
border-radius:8px;
min-width:600px;
max-width:900px;
font-size:.9em;
font-family:'Courier New', Courier, monospace;
padding:5px 5px 5px 10px;
}
.spaces {
visibility:hidden;
display:none;
}
.tabs {
font-size:15%;
}
code {
background-color:rgba(107, 0, 0, .2);
padding:0 3px;
font-size:110%;
font-family:'Courier New', Courier, monospace;
}
span.footnote {
border-bottom:1px dotted yellow;
}
#content ol, #content ul {
margin-left:2em;
}
#content li {
width:575px;
margin-bottom:.4em;
}
span.signiature {
margin-left:25px;
font-style:italic;
}
#footer-wrapper {
width:980px;
background-color:rgba(158, 99, 11, 0.95);
border-radius:20px;
border:5px solid #dbc81e;
margin:10px auto;
}
#footer {
width:980px;
padding:5px 0;
color:white;
text-align:center;
font-size:.9em;
font-family:'Courier New', Courier, monospace;
}
On which rather gargantuan note, Gentle Reader, I shall leave you, in hopes of this having been of use to someone, somewhere.
—Daz
You may use these HTML tags in comments
<a href="" title=""></a> <abbr title=""></abbr>
<acronym title=""></acronym> <blockquote></blockquote> <del></del>* <strike></strike>† <em></em>* <i></i>† <strong></strong>* <b></b>†
* is generally preferred over †
The Dixie Flatline 