View Full Version : Posting readable html on your blog.
How do you post html code on your blog for people to read without it converting to what it's supposed to be?
Does that make any sense? I want to post some code so people can see exactly what it looks like without it performing it's function.
I've tried....
[html]
<li>
and
<blockquote>
Sorry if it's an easy thing to fix. I'm still learning. Thanks for any help.
Here's an example of what I'm talking about.
A post from Sarah
Click here to see her post (http://www.bloggingtips.com/2008/11/13/html-basics-linking-pages/)
sarahG
12-12-2008, 07:47 AM
Hi Josh,
You need to encode your HTML so that the browser doesn't parse them as HTML. ie. instead of writing
<html>
you would write
<html>
Basically, you replace all < with < and > with > (less than and greater than signs).
For a lot of code, use this nifty code converter - http://www.tutorialtastic.co.uk/converter.php which will convert all of your code so you can drop in the code into the top box, convert it and copy the result.
Then in your blog put it in between <code></code> tags. So for example my post had
<code><a href="blah.html">anchor text</a></code>
Alternatively, there are some plugins out there but to be honest they're not that great. They either produce horrendous code, or they just don't work 100% correctly.
Anyway, hope that answers your questions :)
Donace
12-12-2008, 01:06 PM
I use wp-codebox (http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/) makes copying and pasting code a lot easier :p (an example here http://thenexus.tk/hello-visitor-the-quest-to-greet/)
sarahG
12-12-2008, 01:54 PM
<div class="wp_codebox"><table width="100%" ><tr id="p5031"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code" id="p503code1"><pre class="language" style="font-family:monospace;">//set id
global $id;
$refer=$_SERVER['HTTP_REFERER'];
$title=the_title('','',false);
$domain=$matches[0];
// get host name from URL
preg_match('@^(?:http://)?([^/]+)@i',
"$refer", $matches);
$host = $matches[1];
// get last two segments of host name
preg_match('/[^.]+\.[^.]+$/', $host, $matches);</pre></td></tr></table></div>
That'd be the horrendous code I mentioned ;) Imagine if you were using a screen reader... you'll get the numbers read about before the code, and it won't make much sense!
Donace
12-12-2008, 03:02 PM
lol but it works so i'm not to bothered :p
your visitors must really appreciate that.
sarahG
12-12-2008, 08:15 PM
lol but it works so i'm not to bothered :p
I have blind readers on my site, some are developers too. I hope you don't on yours as it's not very fair to them.
i have to say that i totally agree with sarahg and ap4a, in today's internet you have to think about everyone and not just how you see or use things.
Imagine the frustration that someone who has to use a screen reader has to go through to read the site.
Donace
12-12-2008, 10:23 PM
not being insensitive or anything but unless there is an easier way to do it then there's not much I can do to help resolve the issue. I keep an eye on stats and over the 12 month or so life of The Nexus, it hasn't picked up any screen readers etc [note I did not know what a screen reader was till the follow up post...and quickly scanned through woopra and analytics].
@ap4a i'm not to sure what your getting at there man,
I mean if their is an easy alternative; or a plugin that will automatically create a 'web standard' 'codebox' with numbering by using tags such as <pre> before and after...I would jump at it.
This plugin was the first one I came across when trying to add code and was failing at it, it worked so I used it.
Rarst
12-12-2008, 10:28 PM
Evil question. What is better then - plugin with syntax highlighting and rest of good features that produces messy code underneath or good code that looks like unreadable crap to the reader? :)
Thanks everyone for trying to help. :)
SarahG, you have a PM.
Evil question. What is better then - plugin with syntax highlighting and rest of good features that produces messy code underneath or good code that looks like unreadable crap to the reader? :)
Since when does it follow that good code has to produce unreadable crap? In my experience the reverse is true.
@ap4a i'm not to sure what your getting at there man,
I thought it was obvious, clearly not.
I'm sure that your readers appreciate the "couldn't give a damn about whether they could use your site or not" attitude. The irony is that you're publishing code examples, and using bad coding practices in order to do it.
As for not picking up any screen readers, you do know how they work? They bolt on to standard browsers (usually Internet Explorer) and read out the rendered output that appears in the browser. They aren't used independently. So you'll have few clues as to whether or not someone has used one on your site.
sarahG
12-13-2008, 08:22 AM
Evil question. What is better then - plugin with syntax highlighting and rest of good features that produces messy code underneath or good code that looks like unreadable crap to the reader? :)
Just have a 3rd option to produces readable code to the reader regardless of how they're reading it. Besides the fact that Donace's plugin doesn't look to be producing syntax highlighting anyway. The plugin used on the Blogging Tips site for doing syntax highlighting isn't great either. If you use the empty() function, it breaks it and gives something like
if (empty empty())
Sometimes WordPress hides some tags because it's trying to correct your code, as you're not putting it in as encoded.
I've looked at a lot of code plugins to try and find one that works well, and pretty much all of them cause one problem or another. Now my own code is laid out using a definition list with an ordered list (idea shamelessly stolen from ap4a's site). I also then have a couple of classes to set different padding for the indentation. So I achieve the same end result as Donace (actually better, as I have indentation), without messy code underneath.
I could do syntax highlighting, but I don't think that's a major necessary thing. To me, the line numbering and indentation is the important requirements.
Donace
12-13-2008, 10:36 AM
I actually have syntax highlighting turned off, as I mentioned before I used the plugin as I knew of no alternative, and yes the method used on ap4a's site (I had a sneak at the code) does make more 'sense' but converting all the code on my site to that format would take time. Bottom line this is a hobby I do this on the way to and from college or court etc. So it will take time and thank you for pointing out the errors that were being produced.
@ap4a '"couldn't give a damn about whether they could use your site or not" attitude.' your are making an assumption that is my attitude and you are wrong, and as I mentioned before I do not know what a screenreader is, thank you for the illumination.
Though your 'holier than thou' attitude seems condescending, people learn through mistakes and teaching, and yes there is a gap in my understanding and knowledge and I appreciate viewpoints and suggestion on how to fill it, not comments such as the one you made that offer nothing constructive.
@ap4a '"couldn't give a damn about whether they could use your site or not" attitude.' your are making an assumption that is my attitude and you are wrong, and as I mentioned before I do not know what a screenreader is, thank you for the illumination.
So you didn't say this?
lol but it works so i'm not to bothered :p
There's no assumption on my part, you explicitly said it. If it was just in jest then it was ill advised. There are some of us that take accessibility seriously and appreciate the difficulties that some people have on the internet. And so flippancy in regards to the subject matter tends to not gain any kind of favourable response.
Donace
12-13-2008, 11:47 AM
I always taken to the fact that any comment with ':p' is a jest...yes I was jesting it may have been ill advised but my later quantification still stands.
Unless there is an easier way to improve accessibility a lot of people 'new' to the field (as I am) would not do it or not know about it.
I did not know the code was outputted in such a manner now I do, while I will endeavour to improve it as well my own disability lends creditability to the efforts of other people to accommodate it, the reasoning still stands, the blogging platform is created for users to easily pick up and use and it has done so, not a lot of people on the platform (myself included) would consider such aspects.
In regards of your comment about 'favourable response' by earlier comment on tact I feel still applies, there are always more than one way to do things; the point blank near rudeness as I am interpreting from your comments and then the more...direct but 'understanding' view point. While ignorance is not an excuse, reacting to it in such a manner will not cure ignorance, and through battling ignorance can it truly become a standard adhered to.
In regards of your comment about 'favourable response' by earlier comment on tact I feel still applies, there are always more than one way to do things; the point blank near rudeness as I am interpreting from your comments and then the more...direct but 'understanding' view point. While ignorance is not an excuse, reacting to it in such a manner will not cure ignorance, and through battling ignorance can it truly become a standard adhered to.
My initial comment was simple, to the point and not rude. It was just a statement of opinion. You didn't get the point so I clarified it for you. No rudeness intended, and looking through it I don't see how it can be construed as rude. It's simply a statement of opinion based on your remark. There's little point in debating the semantics of my response, it stands in the context of what it was replying to.
If you'd like to push beyond it and learn how to make your site more accessible then feel free to ask questions, I'm more than happy to oblige, and you've already had a good alternative for your code blocks suggested by Sarah. If you'd like to see the method in action you can on either her or my blogs, and if you want to ask questions on it then feel free to do that too.
Donace
12-13-2008, 12:16 PM
your right these is no point debating semantics, different regions of UK, educational background and general background alter interpretations and perceptions.
though moving to remedying it, I notice your codeboxes are slightly different to Sarah's and in my eyes a more practical alternative, how do you achieve the numbering and title box? and if possible could you contact me on MSN, PM'ing you my addresses
sarahG
12-13-2008, 12:27 PM
Just to point out... the OP isn't using WordPress, so a plugin was of no use anyway :)
I notice your codeboxes are slightly different to Sarah's
His are styled differently, although I just noticed I've missed out the code tags, but otherwise they are the same.
As for going through old posts, yes you're right. It's a long and tedious task. I've not updated all of my old posts, but I do use this improved method/code on my posts from now on. I do intend to update code in my old posts and do so as and when I can.
though moving to remedying it, I notice your codeboxes are slightly different to Sarah's and in my eyes a more practical alternative, how do you achieve the numbering and title box? and if possible could you contact me on MSN, PM'ing you my addresses
I don't use MSN, but am happy to answer here.
It's done with a combination of a definition list, with the definition title hused for the code block title and the definition description used to contain an ordered list. Although if you prefer to not use a definition list you can use a div containg a heading plus the ordered list. I prefer the definition list because it's more flexible and portable IMO - as you don't have to vary the heading type dependent on where in the document structure the code block appears (eg. if within a h2 headed block it would need to use a h3, if within a h3 headed block it would then need to be a h4); and I also think the semantics fit (so long as your title is appropriate) as the code list contained acts the definition, for example:
<dl>
<dt>Example code for a link</dt>
<dd>
<a href="link.html">A link</a>
</dd>
</dl>
So, in that example the example code for a link does provide a defined example of what the definition title is introducing.
So, basic semantics out of the way, a more detailed and usable version would contain line numbering as per the code boxes on my blog. These are achieved by nesting an ordered list within the definition description, for example from my blog:
<dl class="code">
<dt>The opening code for a simple data table:</dt>
<dd>
<ol>
<li><code><table summary="An example of a simple data table containing dummy data"></code></li>
<li><code><caption>A dummy data table</caption></code></li>
<li><code><colgroup span="4" width="100"></colgroup></code></li>
</ol>
</dd>
</dl>
We now have a list, and each list item contains a single line of code to be presented. I've also wrapped each line of code within code tags, as this indicates semantically that what is being presented to the reader is code.
sarahG
12-13-2008, 01:40 PM
Just to add, I then use classes called indent1, indent2 etc. and add those to the list items when I need an indentation. These are then just set with padding-left. So indent1 has 20px left padding, indent2 has 40px left padding and so on.
vBulletin® v3.8.3, Copyright ©2000-2012, Jelsoft Enterprises Ltd.