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 ``:
<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 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.