#google prettify

[creationandconsumption]

This is a Test

$(document).ready(function() { $("#msgid").html("This is Hello World by JQuery"); });

[zarkweb]

Add syntax highlighting to Tumblr posts

Just add this tag:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js" type="text/javascript"></script>

in your template and use 

<pre class="prettyprint">yout code here</pre>

whenever you want to highlight lines of code

[fernandosavio]

Google Prettify no Tumblr

Para quem, como eu, usa o Tumblr como blog e já precisou de um Sintax Highlighter para algum trecho de código, segue um passo-a-passo de como integrar o Google Prettify aos seus posts.

1. Arquivos do Google Prettify

Adicione este trecho de código antes de </body> no editor HTML:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

  2. Postando o código

Cole/digite o código no editor do Tumblr (isso fará com que sejam substituídos todos os caracteres reservados HTML do seu código), alterne para o modo de edição HTML e envolva o código com as tags PRE e CODE. Como no exemplo:

<pre class="prettyprint"><code>/* Seu código aqui */</code></pre>

  3. Customizando

Para mostrar o número de linhas apenas adicione a classe "linenums" à tag PRE. Isso fará com que todas as linhas múltiplas de 5 sejam mostradas.

<pre class="prettyprint linenums"><code>/* Seu código aqui */</code></pre>

  4. Mas e as outras linhas?

Para que sejam mostradas as outras linhas apenas adicione estas regras CSS a sua folha de estilo:

.prettyprint{    overflow: auto; } li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8{    list-style-type: decimal !important;   }

[aquamoogle]

Tumblr Over A Custom Blog Site

Well to anyone who knows me knows that I have written quite a few blog engines and spooled up a number of my "own blogs" which after a period of time I get annoyed with and take down.   I won't make any lofty promises that this won't be any different HOWEVER we shall give it a spin.  First and foremost.. Google Prettify, lets kick the tires and see how well this works.  I'm not going to say this will all be about code but a LARGE chunk of it will be.  Just like my life, a significant portion of my day is spent on a keyboard for both work and fun.

Another thing I will give props to Tumblr for is giving us the capability of re-pointing a domain at their servers or even a sub-domain without using domain masking.  Pretty neat feature.  I have also heard that this RTE isn't entirely pointless for search targeting so I guess we shall see on that front as well. So lets get this first post out of the way and onto bigger and better things.  I might do a few short ones on intro tips and tricks with JavaScript and JQuery to get things rolling.  I did open up the "You'll get trolled" anonymous posts, so if you want a topic feel free to hit me up!  If you tell me who you are I'll even publicly thank you for the request! 

So lets get started right and put some code in this post.

Prettify Your Code on Tumblr

1) Go to Customize Your Layout

2) Click the teeny tiny "edit html" link

3) Smile because their layout editor actually doesn't suck

4) Put the code below into your blog and follow the instructions in comments

NOTE:  Remember to update the paths to the prettify.css and prettify.js files to the static file links for your tumblr account.  After enough of us put this in our blog they'll likely add hard paths for us to use but until then... Modify the URL's!!! 

<!-- We can't do anything without JQuery right? --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <!-- Download the following from http://code.google.com/p/google-code-prettify/ --> <script src="prettify.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="prettify.css" /> <script type="text/javascript"> $(function(){ //The below line makes the magic happen prettyPrint(); }); </script>

Now the crappy part is after you make these changes through the very nice and robust layout editor when you go to make your first "syntax pretty" post you have to go into HTML mode.  Unlike their awesome layout editor that allows tabbing and has rudimentary syntax highlighting their HTML editor for a blog post does not.  Suffer through it as will I.. and shortly I'll build a plug-in for their RTE if one isn't already out there.

To post an entry with pretty print capabilities you can use a <code class="prettyprint">...</code> or <pre class="prettyprint">...</pre> tag.  

Also remember all instances of < you have to manually turn into < and all instances of > you have to manually turn into > or it'll just post as straight HTML and you won't see any of your code in the post!  Oh No!   Ok this post is complete I think and it's time to move onto other things for the night!  Until next time! 

[thenullchar-blog]

Syntax Highlighting in Tumblr

How to:

1) Download source from: http://code.google.com/p/google-code-prettify/

2) Use Tumblr's static file upload to upload prettify.css and prettify.js (file upload).

3) Follow the README.

4) Done!

#include <stdio.h> int main(void) {     printf("Hello world!"); }  

[automateeverything-blog]

Better Code Syntax Highlighting w/ Highlight.js

Lately I've been getting more and more snobby about my text editor of choice for writing code, but more specifically the syntax highlighting it provides. At about the same time that I started writing this blog, I tried out [Sublime Text 2 beta](http://www.sublimetext.com/) and have been hooked ever since. I've installed it on my two Ubuntu machines (work & home) and am about to install it on my Windows 7 machine (my second work laptop). At the same time, I discovered the amazing solarized dark color scheme. Since I'm so infatuated with this syntax highlighting scheme it seemed natural to set it up for my blog as well. I had zero previous experience with dynamic syntax highlighting on a blog I just Googled for a good solution that would work with Tumblr. I settled on the solution of using Google Prettify. It's also being used by Google Code and StackOverflow. The problem is that most of my "code" is Bash. For what ever reason, Google Prettify does not do a good job of marking up Bash. It was a very half ass implementation. It looked great on JavaScript, C and HTML, but was shitty for Bash which is the majority of what I post here. After seeing a new JavaScript syntax highlighter released a couple days ago called [Rainbow.js](http://craig.is/making/rainbows), I was motivated to try to find a solution that would satisfy highlighting desires. Rainbow.js was exciting, but still not my solution for Bash since only a few languages are currently supported. I Googled around a bit more and found a post by the creator of [Highlight.js](http://softwaremaniacs.org/soft/highlight/en/). His post was being a bit critical of Rainbow.js. IMHO, he has the right to be critical. His syntax highlighting JavaScript library is far above Google Prettify and is much more versatile with the languages it supports. Best of all - it provides the most thorough syntax highlighting for Bash that I've seen. It even has a built in css scheme for the solarized dark color scheme. If you're reading this then I have already fully switched over the highlighting from Google Prettify to Highlight.js. Here's a sample script to demonstrate the code highlighting. #!/bin/sh echo "Enter the address:\t\t\c" read address_raw address=$(echo "$address_raw" | sed 's/ /+/g') new_address=$(curl -s "http://maps.googleapis.com/maps/api/geocode/xml?address=$address&sensor=false" | \ grep "formatted_address" | \ sed 's/.*//g;s/<\/formatted_address>//g') echo "The validated address is:\t$new_address" The code above works. It just uses Google Maps to correct malformed addresses. Anyway...I'm much more happy now. The only feature that is missing is line numbers. I hope that feature gets added at some point but if not I'll manage. If Rainbow.js ever supports Bash I may give it a try as well.