How to Show Code in a Tumblr Post
Ever tried to display a bunch of code snippet through a Tumblr Post, just to later see it just doesn’t show once it’s published?. Syntax Highlighting in Tumblr can be done using more than one method.
This Tumblr Codes is useful mainly for those designers that have Tumblr blogs and, despite knowing a lot about HTML and CSS, don’t have that same expertise for JavaScript for instance. Bear in mind that this little trick could actually be used in any website.
How To Show Code Snippets in a Tumblr Post
- Go to Customize Appereance >> Edit HTML
- Paste the following code chunk right before the </head> tag. Update preview and then SAVE and close
- You can basically display code and syntax highlighting for CSS, HTML, JavaScript and Ruby.
- For every code snippet you are trying to display, you must wrap it within a <pre> and <code> tag. And assign a ruby, javascript, css or html class the <code> tag. Obviously, you need to close the wrappers
- Example 1. JavaScript.
- Example 2. HTML.
- Create a post >> Click on the HTML editor and create code snippets as shown in the examples above.
- Preview the Post to see it in action.
- Don’t worry if you don’t see the code snippet within the regular editor (for example, a html link). If you do a preview, you will notice how it changes and displays the code the way it should.
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/p2evvtm/MRzlypsda/styles.css"></link> <script src="http://static.tumblr.com/p2evvtm/qJBlypsdm/clean_tumblr_pre.js"></script> |
<pre><code class="javascript">
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</code>
|
<pre><code class="html"> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> </code> |
