On Posting Code

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 &lt; and the greater-thans with &gt;. Then replace the double-quotes with &quot;. Thus we end up with:

&lt;span style=&quot;color:blue&quot;&gt; &hellip; &lt;/span&gt;

… 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:&#47;&#47;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;">
	&lt;p&gt;The text &lt;span class=&quot;blue&quot;&gt;in this span&lt;/span&gt; will be coloured blue.&lt;/p&gt;
</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 †

Read Full Post »

I Get Mail

Granted, it's a few days old, as I've been otherwise engaged, and it's not very interesting mail, but it is, indubitably, mail. According to Bob Hutton—and I quote—I "will love this." He then provides a link to his blog. Not a blog-entry, you understand. His entire blog. And that's it.

I'm going to assume that he meant to point me at his latest waste of effort. It's just that Bob's grasp of nineteen-nineties technology (you know; interweb links an' stuff) is rather weak. I long-ago asked Bob to stop spamming my email when he makes new posts, but I guess he was so excited about having managed to string a few sentences together that he momentarily forgot that.

(And Bob, for what it's worth, I'm already subscribed to the RSS feed of your blatherings. I do not need a personal reminder whenever you spill your e-ink. I make comments at your blog about some of my posts here, because, in those cases, I have chosen to address your own posts, and letting you know that I've done so is the polite thing to do. I assume that if you wanted to know when I make any post about anything you would subscribe to my blog. Please Bob, enough with the spam, okay?)

So, okay, I'm in a fisking kinda mood, so let's have a look what the Broadstairs Buffoon has to say…

Read Full Post »

Building A Website: Part Three—Boxes And More Boxes

So far, in this "How to build a web-site from scratch" series, (all of which, by the way, is cross-posted on the web-site we're building) we've created the basic structure of the site (although it may not seem like it, if you're new to this), we've created a bare-bones page, and added a background image to it. We've also, along the way, discussed CSS, and how it should be used to add style to the page, but not to add information. Now we're going to look a bit more deeply at the structure of a web-page. And we're going to be covering, or at least skimming, a fair number of ideas in this episode, so let's get on with it…

Structure is created by HTML, and takes the form of boxes. Plain, boring, rectangular boxes. Everything you see on a web-page is either a box or is in a box; or, more often, is in a box within a box. The first one, we've already looked at: the body. That one's a bit special, because—unlike nearly everything else in a page, it's expanded, even if there's nothing in it. It automatically fills the entire browser-window.

The next level down, nested inside the body, is known as a div. Short, I assume, for "division." At the level we're going to be working with today, divs define the main areas of the window: the header-area where the main title goes, the bar, or maybe a side-bar, where the navigation buttons live, the main-content area where the, erm… main content sits, and the footer where stuff like copyright notices, stat-counters and so on, go. They can also sit, nested, inside other divs, creating little "style-islands," with particular styles targeted only at content placed within them, or as visible boxes with particular border styles, backgrounds, and so forth. We'll be looking at at least one application of that later.

Read Full Post »

Revelations

Well, I had to mark my 666^th post somehow…
[Now, with Added Graphics for your Viewing Pleasure! Thanks, Fojap!]

For those with eyes with which to see
Watch John as he talks of calamity.
For those with ears with which to hear,
Does he slur as a man does, taken in beer?
Vision of a man, from the clouds he flies,
With stars in his hands, and fire in his eyes.
Vision of a man, in his mouth a sword,
And golden lamps strewn abroad.
Dreams of a dragon, horned like a lamb!
D'you think, maybe, John's had a wee dram?
There's seven of this; of that there's seven.
John's blank-eyed, now; in junkie-heaven.

Read Full Post »

FNIMN: And The Lord Said, “Let There Be… Oh Bugger, The Bulb’s Blown!”

Well, this is my six-hundredth and sixty-fifth post on this blog, and it occurs to me that it must, therefore, live directly opposite The Beast. What with Halloweens and my general taste for music of a horror-based nature, though, we've already had several editions of Friday Night Is Music Night on demonic themes, so let's go with Biblical references. Not religious songs per se, you understand (we've done that, too), just Biblical themes, stories, characters and so on as metaphor and the like.

As ever, feel free to add your own suggestions in comments.
—Daz

Read Full Post »

A Bob Of Very Little Brain (And Even Less Morality)

The Odious Hutton posted again, a few days back, and I missed it, what with my world not revolving around Bob, an' all. Ho-hum. Then he's posted a whiny little essay just this afternoon. I'm going to lump them together.

Part One: Why do I spend so much time spreading the Gospel?

He begins the first by bragging about what a brave, brave soul he is, for standing in the street accosting people, and handing children obscene cartoons. Apparently this has earned him some verbal abuse, and even some threats of violence. He should try—I speak from experience—the horrendous social-crime of "being in possession of a funny haircut." (At which point, I should mention that I in no way condone abusing, let alone assaulting, street-preachers. Argue with them and heckle all you like, but keep the moral high ground.) "That being the case," he goes on, "one may quite legitimately ask – "why does he do it?" "

'cause he's a smug, pious git, certain of his own rectitude and speaking from his own rectum? Apparently not…

Read Full Post »

It’s Very Flattering An’ All, But…

This has been going on for a couple of days now. I could get paranoid!
—Daz

Read Full Post »

Dear Nigel Farage – a letter from a feminist

Nothing to add: had to share it.

tea and solidarity

Trigger warning for rape in this article.

Dear Nigel Farage,

I can’t stop looking at the photo above – women in Afghanistan queuing to vote in the first democratic transfer of power the country has ever seen. A tremendous occasion by all accounts. Voter turnout in the Afghan election was about that of the 2012 American presidential election which saw Barack Obama re-elected. I think both me and you are hoping for a similar turnout in the May 22nd elections, but I fear we may be disappointed.

I wanted to let you know that I won’t be voting for you. I don’t suppose it takes a genius to work that one out – I’ll be voting Labour in the European election, I’ll be voting for Labour’s candidate in my home ward, Dena Rafati, and I’ll be knocking on doors challenging your party with my ward colleague, Bill Stevens, in our…

View original post 1,595 more words

Read Full Post »

The Wastrel

You could've ridden the wall of death,
Or maybe gone scuba diving.
Instead, you wasted every breath,
In fuss and worry and striving
For a better life when this one's done.
A whole life used, and nothing from it—
Four score and ten spins round the sun,
Wasted on the dubious promise,
Of a Paradise you'll never know;
Of a better time beyond the grave.
You could have lived, but no, you chose
A death in life; a miser's save.

—Daz

Read Full Post »

Building A Website: Part Two—Background, & Introductions To CSS

And so we come to the second of my "How to build a website from scratch" series of posts. Last time, we covered how to create the document—the "boring" bits—and the supporting folder-structure. And I'm going to start with an addendum to that…

When explaining how to create UTF-8 documents, I left Linux-users in the lurch, somewhat, saying that "I tried googling it, but ran into the good old geeky-jargon barrier." So thanks to Ubuntu-user Ron for this bit, and I'll quote him verbatim:

1. Open a terminal (haha) and create a web directory in your "home" folder:
   • mkdir -p www/files/common/pics
   • mkdir -p www/files/common/styles/fonts
     (Note: the "-p" switch lets you create all subdirectories in one go)

2. Create the files
   • touch www/index.html
   • touch www/files/common/styles/CommonStyle.css
   • touch www/files/common/styles/CommonStyleIE.css

3. Open "index.html" with your favorite (insert flame war here) text editor to enter the HTML code.

Which—if you'll allow me a short digression—led to me looking for a way to create multiple directories (folders) and sub-directories in one go, in Windows. Turns out you can do it with a batch file, but you need to put in complete folder-paths, from C:\ onwards. Much easier, is this nice little portable freeware dingus, Text 2 Folders. Later, I might see if I can find a way to create multiple files in those directories. That'd be nice!

(Also, notice that Ron created a document with the .html extension, rather than the .htm that I use. Either is fine, and there's no practical difference between the two. I began my page-code-deciphering experience by trawling through the source-code produced by M/S Word's "Save as web-page" option (don't try it—it's awful), and my habit of using the shorter version comes from Word's use of that form.)

But back to the topic in hand…

Read Full Post »