STAY HOME! STAY SaVE

Techies Net
  • Home
  • Software
    • Dotiny
  • Web & App Development
    • Website Builder
    • App Development
  • Request Review
  • Advertise
  • Mobile App
  • Contact Us

How to Write Code In Box For Blog & Websites

5/9/2014

0 Comments

 
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...
Code Image
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.
< = &lt; or &#60;
> = &gt; or &#62;
/ = &#47;  
] = &#93;
[ = &#91;
" = &quot; or &#34;
' = &#39;
“ = &ldquo; or &#8220;
” = &rdquo; or &#8220;
‘ = &lsquo; or &#8216;
’ = &rsquo; or &#8217;
& = &amp; or &#38;
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 After Changes Are Made :-
<pre>
<code>
&lt;a href="javascript:void(0)" id="1" onClick="reply_click(this.id)">B1<&#47;a>

&lt;script >
function reply_click(clicked_id)
{
    alert(clicked_id);
}
<&#47;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

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.

Share This Post




0 Comments



Leave a Reply.

    Get Updates Via Email

    Enter Email Address

    7:00 AM - 9:00 AM IST

    Blog Sponsors


    Category

    All
    Apps
    Camera
    Cars Bikes
    Cloud
    Computers
    Earn Easy Money
    Education
    Entertainment
    Fun
    Games
    How To
    Innovation
    Mobile
    News Internet
    News Internet47f3cea023
    News Internet769585a1ca
    News Of Internet
    News Of Internet
    SmartBand
    Smartwatch
    Software
    Technology

    Archives

    January 2019
    July 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    December 2017
    August 2017
    July 2017
    June 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015
    September 2015
    August 2015
    July 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015
    January 2015
    December 2014
    November 2014
    October 2014
    September 2014
    August 2014
    July 2014
    June 2014
    May 2014
    April 2014
    March 2014
    February 2014
    January 2014
    December 2013
    November 2013
    October 2013
    September 2013
    August 2013
    July 2013
    June 2013
    May 2013
    April 2013
    March 2013
    February 2013
    January 2013
    December 2012
    November 2012
    October 2012
    September 2012
    August 2012
    July 2012
    June 2012
    May 2012
    April 2012
    March 2012
    February 2012
    January 2012
    December 2011
    November 2011
    October 2011
    September 2011
    August 2011
    July 2011
    June 2011
    May 2011
    April 2011
    March 2011
    February 2011

Contact Us

Email: support@techiesnet.com

Stay Connected

Download Our Mobile App 

Techies Net Mobile App
Copyright © 2011-2019 Techies Net | Our Logo | Advertise | Careers | Donate Us | All Right Reserved.
All the trademarks are sole property of their respective owners.

Powered By HostChef.In

  • Home
  • Software
    • Dotiny
  • Web & App Development
    • Website Builder
    • App Development
  • Request Review
  • Advertise
  • Mobile App
  • Contact Us