Skip to main content

Simple way to converting html tags to display in web pages

I think every one has tried at least ones to put some html code in your blog post. I tried several ways but finally I ended up replacing special characters like "<" and ">" with &lt; and &gt;

Following is a solution that you can easily integrate in to your web page. Include this javascript method in your header section.
function putInsidePre(txt,toPre){
var preText = document.createTextNode(txt);
document.getElementById(toPre).appendChild(preText);
}

and put the following style class in your css or just include them in a new >style< tag.
.codeStyle {
background-color:#EAEFF1;
border:1px solid #88BFCE;
color:#325669;
display:block;
font-size:11px;
height:200px;
line-height:1.5em;
overflow:auto;
}


Then you can create a
 tag and give it a id and call "putInsidePre" method to populate it.

Here is a full working example.

<html>
<head>
<style>
.codeStyle {
background-color:#EAEFF1;
border:1px solid #88BFCE;
color:#325669;
display:block;
font-size:11px;
height:200px;
line-height:1.5em;
overflow:auto;
}
</style>
<script>
function putInsidePre(txt,toPre){
var preText = document.createTextNode(txt);
document.getElementById(toPre).appendChild(preText);
}
</script>
</head>
<body>

<pre class="codeStyle" id="codeBlock"></pre>
<script>
putInsidePre('<html><head></head><body>Content</body></html>',"codeBlock");
</script>
</body>
</html>

Comments

Popular posts from this blog

Projecting HTML Elements on a circle using Javascript

Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted. My solution has 5 files prototype.js This is a handy javascript framework. You can download the latest version from there website ( www.prototypejs.org/download ). I am using this to simply handle the onload event in the page. circle.html script.js node-main-left.gif node-sub-left.gif The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”. This is how the html file looks(circle.html). <html> <head> <script src="prototype.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> <script language="javascript" xml:space...

Simple client side validation library

  Client side validation has never been easy.. Include jQuery and the validator.js < script src = " http://code.jquery.com/jquery-1.11.3.min.js " ></ script > < script src = " ../validate.js " ></ script > Simple validation < form id = " myForm " > < label >User Name < span class = " red-star " >*</ span > </ label > < input type = " text " name = " userName " class = " validate-required " /> < br /> < label >Password < span class = " red-star " >*</ span ></ label > < input type = " password " name = " password " class = " validate-required " /> < br /> < input type = " submit " value = " Login " /> </ form > ...

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases. 1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type. To create a new asset type you need to login to the carbon console (username:admin, password:admin) https:// :9443/carbon/ Navigate to Extensions > Configure > Artifacts Click "Add new Artifact" link at the bottom of the page. By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type. Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets Create a folder with name "applications"    Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults   Since we are overriding the details page we need to...