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 :
[sourcecode]
[code lang="xml"]
.
.
.
[/code]
[/sourcecode]
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 :
[code lang=”xml”]
<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/Jesus-Manifesto.jpg"
alt="" width="74" height="110" /></a>
[/code]
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.
[code lang=”xml”]
<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/Jesus-Manifesto.jpg" alt="" width="74" height="110" /></a>
[/code]
