Why do we need to write code in Blog/Website? If we want to show the block of code on our Blogs/Websites to users then we need to write the code in such a way that it should not be parsed by HTML browsers. If we write a direct code then it will be compiled and the output will be showed. See more for steps...
To display the code without being parsed we need to follow some simple steps which are give below. To display a raw code is a real challenge for bloggers, not anymore by following this post anyone can show the block of raw code on their Website/Blogs.
|
|
|
Steps To View Code In Blog For Blog Or Website
Step:1 - Changes To Be Made In Code:-
To view the raw block of code the following tags must be replaced with some values, check below.
< = < or <
> = > or >
/ = /
] = ]
[ = [
" = " or "
' = '
“ = “ or “
” = ” or “
‘ = ‘ or ‘
’ = ’ or ’
& = & or &
> = > or >
/ = /
] = ]
[ = [
" = " or "
' = '
“ = “ or “
” = ” or “
‘ = ‘ or ‘
’ = ’ or ’
& = & or &
Step:2 - How Changes To be Made:-
Consider the below example as a raw code, to show it in a box the changes to be made are shown below the code.
<pre>
<code>
<a href="javascript:void(0)" id="1" onClick="reply_click(this.id)">B1</a>
<script >
function reply_click(clicked_id)
{
alert(clicked_id);
}
</script>
</code>
</pre>
<code>
<a href="javascript:void(0)" id="1" onClick="reply_click(this.id)">B1</a>
<script >
function reply_click(clicked_id)
{
alert(clicked_id);
}
</script>
</code>
</pre>
Code After Changes Are Made :-
<pre>
<code>
<a href="javascript:void(0)" id="1" onClick="reply_click(this.id)">B1</a>
<script >
function reply_click(clicked_id)
{
alert(clicked_id);
}
</script>
</code>
</pre>
<pre>
<code>
<a href="javascript:void(0)" id="1" onClick="reply_click(this.id)">B1</a>
<script >
function reply_click(clicked_id)
{
alert(clicked_id);
}
</script>
</code>
</pre>
Step:3 - Add Styles To Your Code:-
To view the raw block of code in a box you should add a Style to the code and include the desired background color in your style. See the example below
<style>
pre, code{
direction: ltr;
text-align: left;
}
pre {border: solid 1px blue;
font-size: 1.3 em;
color: blue;
margin: 10px;
padding:10px;
background: #FFFFB3}
code {font-size:1.2em;
color: #008099}
</style>
<pre>
<code>
<a href="javascript:void(0)" id="1" onClick="reply_click(this.id)">B1</a>
<script type="text/javascript">
function reply_click(clicked_id)
{
alert(clicked_id);
}
</script>
</code>
</pre>
When we paste the above code in the browser it will be showed as follows:-
<a href="javascript:void(0)" id="1" onClick="reply_click(this.id)">B1</a>
<script type="text/javascript">
function reply_click(clicked_id)
{
alert(clicked_id);
}
</script>
Author : Syed Mohammed Ameen
Designation: Associate Blogger
Bio: I am a computer science engineer who believes that there is no substitute to hard work, I am a technology freak and currently a Blogger at Techies Net.
Bio: I am a computer science engineer who believes that there is no substitute to hard work, I am a technology freak and currently a Blogger at Techies Net.
