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.