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

Post a Comment

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...
8 comments
Read more

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 > ...
1 comment
Read more

APIM 3.0 - populate multiple apis - bash script

Created a bash script to create, tag and publish multiple APIs. This is useful to populate data for the landing page. #!/bin/bash # get the URL consumer key clientId=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientId') clientSecret=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientSecret') echo $clientId echo $clientSecret encoded=$(echo -ne $clientId:$clientSecret | base64) echo $encoded # get access token accessToken=$(curl -k -d "grant_type=password&username=admin&password=admin&scope=apim:api_view,apim:api_create" -H "Authorization: Basic $encoded" https://localhost:9443/oauth2/token | jq -r '.access_token'...
Post a Comment
Read more