To use google-code-prettify on Blogger.com you have to add the following css to your template:
/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 } /* plain text */
@media screen {
.str { color: #800000 } /* string content */
.kwd { color: #00008b } /* a keyword */
.com { color: #808080 } /* a comment */
.typ { color: #2b91af } /* a type name */
.lit { color: #800000 } /* a literal value */
/* punctuation, lisp open bracket, lisp close bracket */
.pun, .opn, .clo { color: #000 }
.tag { color: #800000 } /* a markup tag name */
.atn { color: #ff0000 } /* a markup attribute name */
.atv { color: #0000ff } /* a markup attribute value */
.dec, .var { color: #000 } /* a declaration; a variable name */
.fun { color: #000 } /* a function name */
}
/* Use higher contrast and text-weight for printable form. */
@media print, projection {
.str { color: #060 }
.kwd { color: #006; font-weight: bold }
.com { color: #600; font-style: italic }
.typ { color: #404; font-weight: bold }
.lit { color: #044 }
.pun, .opn, .clo { color: #440 }
.tag { color: #006; font-weight: bold }
.atn { color: #404 }
.atv { color: #060 }
}
/* Put a border around prettyprinted code snippets. */
pre.prettyprint
{
background-color:#eeeeee;
font-family:Consolas;
font-size:10.5pt;
overflow:auto;
padding:5px;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* 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 { background: #eee }
Also you have to add the following javascript between the <head></head> tags of your blog.
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>And add onload='prettyPrint()' in the body tag.
<body onload='prettyPrint()'>Now you can create posts with code snippets stackoverflow.com style.
You need to add your code between <pre class="prettyprint"> and </pre>.
<pre class="prettyprint lang-cs">
// A Hello World! program in C#.
using System;
namespace HelloWorld
{
class Hello
{
static void Main()
{
Console.WriteLine("Hello World!");
// Keep the console window open in debug mode.
Console.WriteLine("Press any key to exit.");
Console.ReadKey();
}
}
}
</pre>
The result of the code snippet is:// A Hello World! program in C#.
using System;
namespace HelloWorld
{
class Hello
{
static void Main()
{
Console.WriteLine("Hello World!");
// Keep the console window open in debug mode.
Console.WriteLine("Press any key to exit.");
Console.ReadKey();
}
}
}
Thank you , for sharing this tip. I badly need this hack for blogger. To maintain consistency for the code i post.
ReplyDeleteYou can get better fonts and formatting borders with this addition.
ReplyDelete/* Put a border around prettyprinted code snippets. */
pre.prettyprint
{
border: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif;
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
max-height: 600px;
overflow: auto;
padding: 5px;
text-align: left;
vertical-align: baseline;
width: auto;
background-image: initial;
background-attachment: initial;
background-color: rgb(238, 238, 238);
background-origin: initial;
background-clip: initial;
}