Displaying HTML as Text in a Blog

Forum Moderators: open

Message Too Old, No Replies

Displaying HTML as Text in a Blog

naitsirhc26

11:21 pm on Dec 5, 2007 (gmt 0)

Hello,

Someone recently asked me a question regarding posting links in HTML, and I was wondering what my options were in displaying this code as text in my blog. For some reason the Rich Text Editor on the blogging system doesn't automatically convert < symbols to the ampersand values.

I have tried <textarea>, but it just is a bit messy, and don't want to use that for every little piece of code.

I was wondering if I could somehow put <code></code> around my code, and then format that tag in CSS to display the code as text and not as HTML. Any thoughts?

Maybe something like:

code {
this is where the code would be to not parse anything in CODE tags.
}

Thank you!

encyclo

9:07 pm on Dec 8, 2007 (gmt 0)

There's nothing you can do with CSS. IN HTML there's the

XMP

element:

[b]<xmp>[/b]
<h1>header</h1>
<p>This would display as raw text including the HTML tags.</p>
[b]</xmp>[/b]

However,

XMP

is not part of HTML 4 and so won't validate, and browser support is not universal.

The best method remains to escape all HTML to the appropriate entities like

&lt;

and

&gt;

- not just for display, but also for security reasons.

lavazza

1:36 am on Dec 9, 2007 (gmt 0)

The best method remains to escape all HTML to the appropriate entities like < and > - not just for display, but also for security reasons.

This might make escaping a lot of < and > entities a little quicker than the manual 'find & replace' method:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en-GB"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>plain-textifier </title> 
<style type="text/css"> 
body, html { 
background-color:transparent;  
color: #006;  
font-family: Verdana, Arial, Tahoma, sans-serif; 
font-size: small; 
margin-left:auto;  
margin-right:auto; 
margin-top:10px; 
margin-bottom:20px; 
max-width:600px; 
min-width:600px; 
text-align: center; 
} 
h2, h3, h4 { 
text-align: left; 
} 
</style> 
<script type="text/javascript"> 
<!-- 
function clearFields() 
{ 
document.frmConverter.myInput.value=''; 
document.frmConverter.myOutput.value=''; 
} 
function codifyMyInput(myInputField)  
{ 
var myInput = document.frmConverter.myInput.value; 
var myOutput = '<div>\n<code>\n<pre>\n'; 
var myLength = myInput.length; 
for (i = 0; i < myLength; i++) 
{ 
var curChar = (myInput.charAt(i)); 
if (curChar == '<') 
{ 
charCode = 'lt';  
myOutput += '&' + charCode + ';'; 
} 
if (curChar == '>') 
{ 
charCode = 'gt';  
myOutput += '&' + charCode + ';';  
} 
if ((curChar!= '<') && (curChar!= '>')) 
{  
charCode = curChar; 
myOutput += charCode; 
} 
} 
myOutput = myOutput + '<\/pre>\n<\/code>\n<\/div>'; 
document.frmConverter.myOutput.value = myOutput; 
} 
--> 
</script> 
</head> 
<body onLoad="clearFields();"> 
<form name="frmConverter" id="frmConverter" action="#" method="post"> 
<div> 
<h1>plain-textifier</h1> 
<hr> 
<p>Converts &lt; and &gt; tags to &amp;lt; and &amp;gt; entities  
<br>and wraps the output in &lt;code&gt; and &lt;pre&gt; tags</p> 
<hr> 
<h5>Paste html code into the input box, click GO and copy the output</h5> 
<h4>Input:</h4> 
<textarea name="myInput"  
rows="10"  
cols="60"  
id="myInput"></textarea> 
<br><br> 
<input type="button"  
value="Go"  
onclick="codifyMyInput(myInput);"> 
<br> 
<h4>Output:</h4> 
<textarea name="myOutput"  
rows="10"  
cols="60"  
id="myOutput"></textarea> 
<br><br> 
<input type="button"  
value="Refresh"  
onclick="clearFields();"> 
<hr> 
</div> 
</form> 
</body> 
</html>

penders

11:53 am on Dec 9, 2007 (gmt 0)

The best method remains to escape all HTML to the appropriate entities like < and > - not just for display, but also for security reasons.

Or, if you have access to PHP, then the two functions htmlspecialchars() and htmlentities() provide for this.