How To: Post Code on Tumblr
I had someone ask how I got the code in my previous post to show up without Tumblr breaking the formatting on it. I figured I would share my solution publicly in case it helps anyone else.
- Hit the HTML button on the post you are editing.
- Put a set of pre tags (<pre></pre>). This tag specifies your HTML is already formatted and not to change the whitespace on it.
- Copy and paste your code between the pre tags. You will need to copy and paste from something else to get the tabs into Tumblr. If you hit the tab key in the blog editor it will cycle the control focus out of the text window.
- Your code will now be displaying but line wrap will be turned off so your text will be clipped if the lines are too long. Edit your theme and add the css below to show horizontal scrollbars on overflow. I also change the background to a light grey to offset it from the regular text in my blog, style your however best fits your theme.
re {
overflow: auto;
width: 500px;
background-color:#e0e0e0;
}