PRE TAG IN BLOG

Monday, 26 January 2015

PRE TAG IN BLOG

How to Pretty-Print Code Snippets in Blogger

I often want to include snippets of code in my instructional blog posts, so to make my blog posts easier to read, I decided to add syntax-highlighting to my blog tonight. There are various syntax highlighting solutions out there, but we use google-code-prettify on code.google.com and it's worked well enough there, so I went with what I knew.
Here's how I added it to my Blogger blog:

Click the Design tab and "Edit HTML".

After the meta tab in the HTML, paste these two includes for the JS and CSS:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>

Search for script - for me, there's a script tag near the bottom of the page. In that script tag, put this javascript call:
```
prettyPrint();
```
If that tag doesn't exist, then just create a script tag at the bottom yourself.
Now, whenever you're posting, add the prettyprint class to your pre or code tags:
```
<pre class="prettyprint">
var i = 2 + 4;
</pre>
```

---------------------------------------------------------------------------------------------------------------------
2- METHOD BY CSS AND HTML CODE
---------------------------------------------------------------------------------------------------------------------

Syntax Highlighter

Using this theme you can make your code snippets look nice neat and easy to read. Google-code-prettify was used in order to enable this feature and the Desert theme was used to stylize the code snippets. If you want to use a different theme or customize this one, play around with the css

Take a look at some of the other themes already created as well. The CSS for the Desert theme looks like this:

/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}

To use the syntax highlighter you want to wrap your code in a <pre></pre> tag. It is also important to note that any angled brackets will have to be replaced that are inside the code. Use < to replace the less-than bracket and > for the more-than bracket. Finally make sure you give your pre tag .prettyprint tag.

<pre class="prettyprint">Put your code here</pre>

--------------------------------------------------------------------------------------------------------------------
OR USE THIS CSS CODE

pre.prettyprint{display:block;background-color:#080c11 !important;border:none !important;color:rgba(255,255,255,0.8) !important;margin:20px;padding:0 0 0 15px !important;font-size:14px;line-height:18px;font-family:'Inconsolata', sans-serif}pre .nocode{background-color:none;color:#000}pre .str{color:#d8e164;font-weight:bold}pre .kwd{color:#de1193;font-weight:bold}pre .com{color:#46515e}pre .typ{color:#93ecf9}pre .lit{color:#cd5c5c}pre .pun{color:#fff}pre .pln{color:#fff}pre .tag{color:#f0e68c;font-weight:bold}pre .atn{color:#bdb76b;font-weight:bold}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-left:27px;margin-bottom:0;padding:20px 0 20px 15px;color:#444;background-color:#0d131a}ol.linenums li{counter-increment:customlistcounter;list-style:none;*list-style-type:decimal;position:relative;margin-right:20px}ol.linenums li:before{display:block;content:counter(customlistcounter) " ";font-weight:bold;height:15px;left:-50px;position:absolute;text-align:right;top:0;width:25px}ol.linenums:first-child{counter-reset:customlistcounter}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none !important}li.L1,li.L3,li.L5,li.L7,li.L9{background-color:transparent !important}@media print{pre.prettyprint{background-color:none}pre .str,code .str{color:#060}pre .kwd,code .kwd{color:#006;font-weight:bold}pre .com,code .com{color:#600;font-style:italic}pre .typ,code .typ{color:#404;font-weight:bold}pre .lit,code .lit{color:#044}pre .pun,code .pun{color:#440}pre .pln,code .pln{color:#000}pre .tag,code .tag{color:#006;font-weight:bold}pre .atn,code .atn{color:#404}pre .atv,code .atv{color:#060}}@media only screen and (max-width: 767px){pre.prettyprint{font-size:13px;line-height:13px;margin:15px}}

---------------------------------------------------------------------------------------------------------------------
READ MORE:
http://blog.pamelafox.org/2010/08/how-to-pretty-print-code-snippets-in.html
http://thebuttertheme.tumblr.com/post/67800745393/syntax-highlighter