I received an email today from EnnisP – a blogging self-starter (the very type of person I love to encourage) who is teaching himself about all manner of online tech stuff so that he can run his own Religious Issues website well.
Due to his efforts, EnnisP is also able to show others what he himself has learned and as such finds he needs to put code samples on his site. This gets tricky because a WordPress page is itself written in HTML. His specific question was however,
How can you type an HTML code sample and get it to wrap without some of the lines jutting out into the sidebars of the blog?
I think the problem and solution are best demonstrated with a short video clip.
Here is the code from EnnisP’s website inserted here, using the Syntax Highlighter Evolved Plugin (based on original code by Alex Gorbatchev)
The settings I used for the plugin are as follows :
And the tags I used were :
1
To help the plugin break lines effectively add the source code with line breaks where you can or in an example like the code below, it will attempt to put the code all on one line (because that is how it is supposed to be written.) This is how it looks with hard line breaks added by me :
<a href="http://www.amazon.com/gp/product/0849946018?ie=UTF8&tag=XXXXXXXX&linkCode=as2&camp=1789&creative=9325& creativeASIN=0849946018" target="_blank"> <img class="alignleft size-full wp-image-1062" title="Jesus Manifesto" src="http://nowthinkaboutit.com/wp-content/uploads/2010/06/Jesus-Manifesto.jpg" alt="" width="74" height="110" /></a>
And this is how it looks with no line breaks, just with the code as written. But you can play around with the tags and settings to get it to look as you want it to.
<a href="http://www.amazon.com/gp/product/0849946018?ie=UTF8&tag=XXXXXXXX&linkCode=as2&camp=1789&creative=9325&creativeASIN=0849946018" target="_blank"><img class="alignleft size-full wp-image-1062" title="Jesus Manifesto" src="http://nowthinkaboutit.com/wp-content/uploads/2010/06/Jesus-Manifesto.jpg" alt="" width="74" height="110" /></a>
{ 21 comments… read them below or add one }
Thanks Liz. You’re the best!
Unfortunately, I’ll have to wait till tomorrow to play with this as I have a meeting now.
Hey Liz,
I installed everything OK and arranged the settings. The code is showing but still expanding out through the sidebar, it’s not wrapping at all. I’m probably missing some simple thing but haven’t yet figured it out. Any help you can give will be appreciated.
Regards,
Ennis
Hi EnnisP
You have a very narrow content area on your blog, only 500px wide. I put the settings I used on the blog post – did you use those exactly?
One other thing, looking at your code – compare it to mine (the amazon link) and yours is incorrect – take out the character codes for the ampersands and replace with actual ampersands.
Then edit the amazon code to ahve hard line breaks in it, as I did in my second example.
I’m experiencing several problems that don’t seem “usual” for most WP installations.
The character codes such as “amp” for ampersand just show up. I don’t type them in at all. I tried re-inserting the code (without the character codes) several times and after updating, moving away from the screen and returning, they mysteriously reappear.
I have tried inserting line breaks two different ways:
1. Using my keyboard on the visual editor
2. Inserting code on the html editor – . It has no effect either way. I might be doing this wrong. No surprise there.
What I haven’t done is include breaks using a standard word processor and then transferring the code to the WordPress editor from there.
On the settings, I have tried using your exact settings and have also tried turning on the “wrap” feature but there seems to be no difference either way.
Any advice will be appreciated. If you need an expletive or two I can handle it.
Thanks,
Ennis
To effectively work with code samples and how tos, my belief is it’s best to stop using the Visual Editor altogether. It will hamper your ability to write your posts when they are more complicated than just text and an image, as in your current case.
Go to the dashboard and into users, then click the box that disables the Visual Editor. Even if you write stuff using the HTML editor in the beginning, as soon as you switch back to the Visual Editor it wrecks your efforts. It is evil. Kill it off now.
Once you have switched off the visual editor – you’ll have to do that part of the post again (the code part). See if that makes a material difference, then leave all the settings exactly as I had them. You don’t have a scroll bar so you can’t have them the same. See how mine has a bar to stop the thing being too wide by allowing the user to scroll horizontally?
Also if you want to not have the bar, but put in your own natural braks, you need first to get the code right (without the weird ampersand conversions) and then to simply press the return key (not BR tags) where you want the breaks to appear.
OK, I’m working on these things now but I have a quick question. I usually write all my material in a word processor (Word for Mac) and paste it into the visual editor using the “Word Paste” option. What is the best option for pasting Word text into the html editor?
Umm – the best option is you do not use a word processor. What is the point? There is a draft facility on Wordpress so you can save frequently as you type – so no need for an intermediate step. If you want to work away from an internet connection, simply use an ordinary text editor. You should be formatting text in Wordpress, not outside it. If not you will be accepting that spurious stuff can enter your post.
Hey Liz,
IT’S WORKING!! Thanks very much for the assistance.
Can you recommend a text editor that closely mimics a word processor or one that is at least excessively user friendly?
I have two other quick questions:
One: I would like to add an anchor (<a>) to the text of the post also but the the syntax highlighter is a bit over the top for that. Is there an easy way to include a small piece of code?
Two: can I get additional buttons for the html editor for things like changing the color of the text or for inserting bullets? Otherwise I’ll have to manually insert ul and li tags. I use bullets a lot!
Thanks again. I learned more through this experience than I did through all of high school.
PS – you really need a facility for donating on your site.
If I understand you, you may be getting a bit confused. Or I am.
Do you mean links to other people’s sites like mine and the other person you mentioned? You said you wanted to put an anchor tag in? Well if this is what you mean don’t get confused by code that is supposed to be part of the page (e.g anchor tags) and code that isn’t (e.g your sample code).
If you mean this – actually use the anchor tag in your post to link out. If you didn’t mean that, then I didn’t understand.
Or – if you mean you want to mention < a > tags from time to time, then you could do it casually like I did in this paragraph by putting spaces about the ‘a’.
However, going back to your code sample, it is still not quite right. You have a bunch of extra semicolons in there – see image below:
Hey Liz,
OK, I removed those semicolons and even went to the Amazon link builder and discovered they weren’t there initially. More malicious effects from VE.
I haven’t used either editor in the past primarily because they are confining and I did loose some material on the one occasion I tried it. But, here’s the question. On the odd occasion when you copy material from some other source which may not already be in a text format how do you convert it before pasting in your doc?
Thanks for the info and the illustrations. I did sign up with Jing. Looking forward to using it.
Ennis – On the odd occasion when you do a cut and paste, then most often, it will be safe to copy. The Visual Editor has become less bad in recent times at messing up the post code. If you paste it into the HTML editor you won’t get bad effects – the reason you got them before was because you allowed the VE to check back in on your stuff.
If you have got rid of the VE for now, you have less to worry about when copying and pasting. But you will have to manually format what you paste.
If you are still using the VE, you can either just cut and paste and only worry about it if there is a code sample in there, or paste into a text editor first to ‘clean’ the snippet and then paste from there into the VE.
Can you see why I prefer to hand code? It’s simpler.
Lizzy
Actually, I get your point clearly and I don’t disagree. In fact, my VE is retired and I am exclusive with the other.
But, how to do certain functions isn’t as obvious in the html window. Knowing where to find code or how to make formatting changes is where most newbies, like me, get lost. However, your advice has convinced me to move in the direction I wanted to go anyway.
Do they have more buttons for the html editor? Seems a little skimpy as it is.
Just a thought. Could you write a post on building an amazon link completely from scratch?
I don’t know of any more buttons for the HTML window. What confuses me is why you need more. Please let me know the type of button you wish you had and maybe I can explain.
Well, there are two things that come to mind for which there are no buttons and I wouldn’t know how to do. One, is change the color of the text and two is underline text.
Hey Liz,
I have been perusing some of my old posts to do a bit of editing and cleanup. Key words and such weren’t so well organized in many of them and I revisit to smarten them up a bit.
What I am discovering is just how many of them have distorted html all of which I assume was caused by the VE. It is hard to understand why such a powerful platform can have such a useless visual editor and why more people aren’t letting us newbies in on the secret.
My next trial experiment will be to install an Amazon image link using only the html editor and see if that works better without the VE.
Hi Ennis – Most of your internal post code will be a bit messy because of the methods you’ve used to create posts. It’s not the fault of the Visual Editor – it’s mostly because of the habit formed of creating the posts ex-Wordpress in some editor whose HTML is crap, and then pasting that into your Wordpress blog, Doing it via the VE just hid the damage from you. Brushed it under the carpet.
The problem with this is that not only does it produce messy code, when you look at it, you end up thinking HTML and CSS and all the stuff you should really be writing by hand is difficult. It isn’t. (Do bear in mind I am a bit of a hand code evangelist – many will disagree with me for the sake of an easy life – but my point is that using visual tools without knowledge does not lead to an easy life. It leads to one of confusion.)
Anyway – the other bad thing messy post code does, is it hampers the search engines efforts to index your site and therefore to bring you traffic. Think about it – it’s like stuffing fast food down your neck. The search engines want wholesome food to consume (read clean code).
You have opened up another topic altogether in your quest for a button to colour text and to do underlines. I will have to start another post to answer that.
I’ll look forward to the post on changing the color of text and underlining but I’m a bit worried about the word processor issue. I have a lot of material which I often rework for posting. The easiest way to do that is copy from a Word text and convert it to html before pasting into WordPress. From what you have said and I have found others who agree, even text editors don’t always speak the same language. Will have to be careful about that.
The right way to proceed is simply to use HTML editor with no text or word processor in between. On the occasion where you have to cut and paste either don’t (link to the other person’s website instead), or cut an paste in the MAC equivalent of notepad (don’t know what that is – textedit?) and paste into the HTML editor from there. If any spurious stuff comes with it, edit it out. I will demo this in another post when I get the chance, along with colours and underlines.
Thanks for that. I haven’t used the Mac editor but will dust it off.
I was lucky to discover your topic in baidu search. I am from Rome.
Also I get a lot from your videos – really thank your very much
People like you get all the brains. I just get to say thanks for the answer.