by ·0 Comments

Open your own Tumblr dashboard and here click to the Customize.
In the Theme menu click to Custom HTML… It will load code of the current template… Find the `<body>` string and replace it with this lines:

<body onload="prettyPrint()">

Then insert these lines befor `</head>`:

<link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css">
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-sql.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-yaml.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-hs.js"></script>

ok… the installation is ready. (see http://google-code-prettify.googlecode.com/svn/trunk/src/ for other additional supported languages)

To modify default style click the Advanced menu and write your own style under the `Add custom CSS` label. Eg:

 

pre .str, code .str { color: #65B042 !important; }
pre .kwd, code .kwd { color: #E28964 !important; }
pre .com, code .com {
  color: #AEAEAE !important;
  font-style: italic !important;
}
pre .typ, code .typ { color: #89bdff !important; }
pre .lit, code .lit { color: #3387CC !important; }
pre .pun, code .pun { color: #fff !important; }
pre .pln, code .pln { color: #fff !important; }
pre .tag, code .tag { color: #89bdff !important; }
pre .atn, code .atn { color: #bdb76b !important; }
pre .atv, code .atv { color: #65B042 !important; }
pre .dec, code .dec { color: #3387CC !important; }

pre.prettyprint, code.prettyprint {
  background-color: #000 !important;
  -moz-border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  -o-border-radius: 4px !important;
  -ms-border-radius: 4px !important;
  -khtml-border-radius: 4px !important;
  border-radius: 4px !important;
}

pre.prettyprint {
  width: 95% !important;
  margin: 1em auto !important;
  padding: 1em !important;
  white-space: pre-wrap !important;
}

ol.linenums {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #AEAEAE !important;
}
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 { } 

pre { padding: 5px; font-size: 1em !important; }

hr {
  border: none;
  border-top: 1px dotted #AA2200;
  width: 80%;
  margin-left: 0;
}

Now if you want insert any code snippet into your post you need to edit as HTML (right side of the editor icon set) and put it into a `pre` tag (or `code`). Eg:

<pre class="prettyprint lang-php">
  <!--?php echo 'Test' ?-->
</pre>

Where lang-XXX is the language what you want to use.

If you have any questions feel free to ask.

Related Posts: