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 †
Very useful. I didn’t realize that WordPress provided syntax highlighting. By the way, how do you display the code in the multiple line format in on a regular webpage, as opposed to one hosted on WordPress? I’ve tried looking that up on several occasions and then just gave up when I couldn’t find it easily.
You had me confused when you mentioned the “usual editor.” I think of the one accessed through the dashboard as the “usual” one. I can’t use the other one for some reason. When I first saw it I panicked thinking that they’d gotten rid of the old one.
Is that the CSS for the website you’re building? Question: In line thirty you have what I presume is a goldish orange color as the background color. What does the “a” stand for in rgba, which I’m guessing is red, green, blue?
Ah, somebody only skimmed the latest “How to build a website” post then? 🙂
Yeah, rgb is red green blue. The “a” is “alpha,” for some reason, but basically means “opacity.” It’s expressed as a decimal, with 0 being completely transparent, and 1 being fully opaque.
You’re right about the colour. In fact it’s kinda garish, fully opaque.
Oops, I forgot your first question. The <pre> element, unlike most HTML, preserves the actual spacings and line-breaks in the source. So:
1
2
3
4
… put into normal HTML comes out as:
1 2 3 4
… as you probably know. But:
<pre>
1
2
3
4
</pre>
… comes out as
1
2
3
4
Does that answer your question?
Yes, I’ve been skimming, and I’ve been caught. I know much of what you’ve written, but not all of it. My experience with webpages could be said to be below “dabbler.” Actually, I didn’t know about the pre element until reading this post. It’s not one of the most common ones. I was wondering about the long bits of code where you have the lines numbered and all that. I’ve seen people put that up on websites that I assume weren’t WordPress sites, so I’m guessing there’s a relatively easy way of doing that.
In the page source for this page, your second example with numbers has this between angle brackets:
pre class=”brush: xml; title: ; notranslate” title=””
I just found this discussion about the difference between the code and the pre tags. It could be useful, but I think WordPress might not work with the code tag.
Alpha stands for alpha channel. Here’s a brief description. I didn’t know that it was used in CSS, although I’ve seen it in other circumstances. I’ve just never seen it in anything I’ve read about how to build a webpage. You do realize that I’m proud of myself for actually using CSS rather than laying out everything in tables as I first learned to do.
Also, I should add that I haven’t kept up in recent years and know nothing about html 5.
Yeah, the code tag works in wordpress, thus:
This is in code tags.But all it really does is change the font to monospace. It doesn’t preserve line-breaks from the source, or anything like that, and you still have to convert tags to html-entities.So the [code] … [/code] gubbins gets translated by wordpress into a <pre> tag then, with some funky stuff added. Interesting.
I don’t know of a way to get that numbered-line effect outside WP. If you’ve seen it elsewhere, I’d hazard a guess that it’s a JavaScript widget.
Funny you should mention table lay-outs. I’m writing about them as we speak, in a piece on tables. There is a CSS version now, mind, which is style-only:
div.foo-wrapper { display:table-row; } div.foo { display:table-cell; }With:
That’ll display just like a table, but not be announced as tabular by a screen-reader.
Okay, it took me a while to find a decent CSS-only method, but this seems to work:
The CSS:
pre { padding-left:15px; white-space:pre-wrap; counter-reset:line-numbering; } pre .line { margin-left:-15px; } pre .line::before { content:counter(line-numbering); counter-increment:line-numbering; padding-right:6px; color:red; }And the HTML:
<pre> <span class="line">div.summat {</span> <span class="line"> color:red;</span> <span class="line"> margin:10px auto;</span> <span class="line"> }</span> </pre>Obviously it ain’t gonna work here, ’cause of that line::before part, but here’s a screenshot:
I must be mad. Pure CSS numbered lines with alternate lines highlighted:
The CSS:
pre { width:450px; padding-left:25px; white-space:pre-wrap; counter-reset:line-numbering; } pre p::before { content:counter(line-numbering, decimal-leading-zero); counter-increment:line-numbering; color:gray; font-weight:bold; margin-left:-25px; } pre p:nth-child(even) { background: white; } pre p:nth-child(odd) { background:#e5fdff; padding:2px 0; } pre p:nth-child(even)::before { background:white; padding: 0 10px 0 0; } pre p:nth-child(odd)::before { background:#e5fdff; padding: 2px 10px 2px 0; } pre p { margin-left:-15px; margin:0 0 -1em 0; } pre p.top { margin-top:-1em; } pre p b { font-size:.2em; }The HTML:
<pre> <p class="top">div.summat {</p> <p><b> </b>color:red;</p> <p><b> </b>margin:10px auto;</p> <p><b> </b>}</p> <p>Lorem ipsum …</p> <p>Sed bibendum commodo rhoncus.</p> </pre>And a screenshot of the result:
Oh, I meant to say, the font-size on the <b> tags is to make the tab-spaces smaller, and I used that tag ’cause it’s less cluttersome than using <span class="small-tab"> or the like.
Yeah, you’ve gone mad, but I kind of like it. I’m going to have to think up a really good question next time, one that will have you putting up psychedelic colors or something.
Just testing:
Umm. The above probably only works in firefox. Twas a qucky, and I didn’t add all the browser-specific code.
You’ve reminded me of the time I went with a friend to Mexico. It was her thirtieth birthday and she’d been feeling very stressed out. When we got to the airport we were told that the flight had been cancelled. She got teary-eyed and started rambling about how over worked she’d been and how she’d been looking forward to this vacation. The woman behind the counter started typing madly saying, “Don’t worry, girls. I’m going to have you drinking margaritas on the beach in time for sunset.”
Maybe I’ll make myself a margarita and stare at the computer screen. 🙂
And I’ll take the occasional quicky if it’s the only thing on offer.
I really, really, wanna give it me own with a website. But it seems like such hard work. Don’t get me wrong, I’m totally into them computers an’t like, even built me own – kept me goin’ for many a year. But this softywares stuff leaves me baffled.
It’s like the hardware makes sense, but the softywares ti’s bollocks.
I’ve tried html, up to a point – then it don’t wanna know.
Daz, can you do a WITIWIG (What I Type Is What I Get) html5 lesson what would sort it?
Ta.
Fojap
Ah, the spirit of Sid James is alive and well! 🙂
Remigius
Not sure what you mean. As far as basic text presentation goes, HTML5 hasn’t changed much from older versions. Headings, paragraphs, blockquotes, lists, tables and so on are basically the same as older versions. It’s the CSS that does all the shiny stuff.
I had to look up Sid James. “Remembered for a lascivious persona….” Okay, guilty as charged. I’m worse in person, but you know on the internet you have to be careful because humor doesn’t always translate well.
Here’s a funny thing we middle aged people might find funny. It’s a bit off topic, but since this is a technology post…
However, I will say that I’m still an advocate for desktops. I swear my sister’s stiff neck is due to the fact that she works all day on a laptop. They’re just not ergonomic and shouldn’t be used for hours. I’ve switched back to a desktop after having a laptop for years.
Fojap, that clip is great, it reminds us just how far we’ve come in such a short time. The reactions of the kids are great!