how to display code in blogger posts ~ WebSite Development

Wednesday, 5 February 2014

Filled Under:

how to display code in blogger posts

Posted By: Unknown on 00:42

Source Code Formatter for Blogger, Blogspot , Blog & Blogging is a one of the powerfull utility of javascript. JavaScript was developed by "Brendan Eich". javascript is a one of the dynamic computer programming language. and it is mostly used in web browsers.it is implementations allow client side scritps to interact with the user.
here you can easily display code in your blogger page or posts.just follow some step to display any languages code in your blog.

-> This source code formatter allow languages like Javascript, HTML, CSS, C#, PHP, ASP.net, VB.net, Visual Basic, DOT.net, ASP and other languages.
-> This is a javascript application so don't publish your secrete source code here.

1.go to blogger.com
2.click on Template which are located at left side.
3.click on Edit HTML button.
4.Ctrl+f to find </head> and copy below text and paste this code before finish </head> tag

 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>   
  <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>   
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>   
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>   
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>   
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>   
  <script type='text/javascript'>  
  SyntaxHighlighter.config.bloggerMode = true;  
  SyntaxHighlighter.all();  
  </script>

5.Ctrl+f to find <style> and copy below class and paste in the <style> tag.

 .codestyle  
  {  
   font-family:arial;  
   font-size:12px;  
   border:1px dashed #CCCCCC;  
   width:99%;  
   height:auto;  
   overflow:auto;  
   background:#f0f0f0;  
   background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggld3aVV9BD8xQZw2TvOTYYLGN10TmkVFNfjk4Tup8f5QLBO9E0Vrd1PgfNVn7gAQFrIMsx9j5oLpCC6l0Jrn2jXwIP2hY6tfAygVL9eMOanQX6zvb_QiOmDkmRBG-MzusvlKXFL_ofClT/s320/codebg.gif);  
   padding:0px;  
   color:#000000;  
   text-align:left;  
   line-height:20px;  
  }

6.and than click on save template button to save your changes.
7.now go to your post or page whare you want to display code in your blog post or page.
8.click on HTML button whose located below your post or page title textbox.
9.go to this link http://www.easyscript4u.com/demo/codeformatter/ and Paste your code in first box and
than click Format Source Code button.than your formmeted source code will display in second box copy
it. you can see your code look like third box.copy below code and paste your formatted code within the

 <pre class="codestyle">  
      <code style="color:#000000;word-wrap:normal;">   
        PASTE YOUR FORMMTED CODE HERE.   
      </code>  
  </pre>

10. now you can see your code in your blog. See Below Example,

 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <title>Easyscript4u.blogspot.in</title>  
 </head>  
 <body>  
      Syntax Highlighter Demo for Blogger and web page By Bhavesh Bodar.   
 </body>  
 </html>