Feeds:
Posts
Comments

Archive for May, 2014

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 PostsAdd 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 †

Advertisements

Read Full Post »

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… (more…)

Read Full Post »

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. (more…)

Read Full Post »

Revelations

Well, I had to mark my 666th 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. (more…)

Read Full Post »

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

(more…)

Read Full Post »

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…

(more…)

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

screenshot of the "Search Terms" section of my blog-stats, showing multiple searches for permutations of "the dixie flatline" combined with "athseist."

(more…)

Read Full Post »

Older Posts »