Including Code within pre tags

Including code within pre tags

It may be apparent to some that putting code on the page may be difficult at times. Especially if you have a for loop such as the following:

for(i=0;i<5;i++){
// Do Something
}

Solution:

If you have something similar to the popular editor Notepad++, then you will be able to use some of the built in tools to handle your needs.

The Real Issue

With any protocol or communication standard, there are often particulars which make it somewhat difficult to do perform the simplest of tasks. In our case, we are trying to include some text that contains either < or > which if not switched to its entity form or escaped somehow will tend to break the normal processing of the html. There are other examples of course, but when you post code or articles for that matter, you “should” check the output to see what is happening to ensure things are displaying properly.

Converting Code to html entities using Notepad++

First Step is to paste your code into Notepad++

The second step is to select everything by right clicking in the content area of Notepad++, then choosing Select All with the left mouse button

The third step is to conver the code using the TextFX pluigin. From the menu, choose TextFX, then Convert, then Encode HTML (&<>).

The last step is to select everything again and choose copy from the main menu.

Once this has been completed you can paste everything into your content management system within pre tags. The output should look similar to the following:

&lt;pre class='brush:js'&gt;
for(i=0;i&lt;5;i++){
// Do Something
}
&lt;/pre&gt;

You may note that I have a class specified as brush:js – you may do a google search for syntax highlighter for some insights.

ttessier

About ttessier

Professional Developer and Operator of SwhistleSoft
This entry was posted in Html, Web Development and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *