#Syntax Highlighting | Explore Tumblr posts and blogs

snippets-of-code-blog · 14 years ago

Text

Adding syntax highlighting into Tumblr

After much googling around, I found two popular ways to add syntax highlighting into Tumblr:

Alex Gorbachev’s Syntax Highlighter

Google's Prettify

I tried the Syntax Highlighter at first and spent a really long time trying to get it to work. When it finally did, it slowed the loading time by a huge amount, so I switched to the Prettify.

Prettify was a lot simplier to install. The code below automatically adds the prettyprint class to any <code> tag. Alternatively, you can leave out the script and add the class manually.

<script src="http://code.jquery.com/jquery-latest.min.js"></script> <link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"></link> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script> <script> function styleCode() { if (typeof disableStyleCode != 'undefined') { return; } var a = false; $('code').each(function() { if (!$(this).hasClass('prettyprint')) { $(this).addClass('prettyprint'); a = true; } }); if (a) { prettyPrint(); } } $(function() {styleCode();}); </script>

This assumes you don't already have jQuery.

When posting code, use a text editor to change all the angle brackets to < and > and enclose it in <pre><code></code></pre> tags. The <pre></pre> is necessary to keep the formatting.

Note: The highlighting won't show up in RSS feeds or the dashboard.

#prettifier #syntax highlighting #tumblr #html

190 notes · View notes

dom · 14 years ago

Photo

You guys have seen this, right? The custom HTML page now has SYNTAX HIGHLIGHTING. C'mon, that's so bad ass.

#customize #syntax highlighting #html #tumblr #work

59 notes · View notes

iheartvelma · 2 years ago

Text

Please reblog for reach!

cc: @zingring @macmanx @jv

#prism js #syntax highlighting #code blocks support #tumblr feature backlog

35 notes · View notes

schneems · 13 years ago

Text

Give Tumblr Some Code Love with Prettify.js

Lets admit it, code and Tumblr don't exactly get along right now. Sure you can write your posts in markdown, but there isn't really an out of the box experience for syntax highlighting in code blocks.

In the past I've resorted to using Gists to store code in my blog, but this can be a hassle to manage, especially if you need to modify your code later. One day I noticed that one of my favorite blogs The Changelog has great code highlighting on their Tumblr blog. With a little view source-ing and a little googling I eventually found out that the best way to add code highlighting to your blog is through a javascript library called prettify.js. I followed these directions by blairvanderhoof, and came up with something not too bad. While his instructions are good, I made a few modifications. Lets take a look.

Link to the prettify.js CDN in your html, by customizing and putting this in right before the<body> tag:

Add the 'prettyprint' class to all <pre> tags that contain a <code> tag. Then initialize the prettyPrint() javascript method by adding this in your HTML:

$(document).ready( function(){ $('code').parent('pre').addClass('prettyprint'); prettyPrint(); });

Pick a prettify theme. I chose the Desert theme. Add that style to the Add Custom CSS under the advanced section, or directly to your HTML.

/* desert scheme ported from vim to google prettify */ pre { display: block; background-color: #333; overflow:scroll; font-size:12px; } pre .nocode { background-color: none; color: #000 } pre .str { color: #ffa0a0 } /* string - pink */ pre .kwd { color: #f0e68c; font-weight: bold } pre .com { color: #87ceeb } /* comment - skyblue */ pre .typ { color: #98fb98 } /* type - lightgreen */ pre .lit { color: #cd5c5c } /* literal - darkred */ pre .pun { color: #fff } /* punctuation */ pre .pln { color: #fff } /* plaintext */ pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */ pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */ pre .atv { color: #ffa0a0 } /* attribute value - pink */ pre .dec { color: #98fb98 } /* decimal - lightgreen */ /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */ li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } /* Alternate shading for lines */ li.L1,li.L3,li.L5,li.L7,li.L9 { } @media print { pre { background-color: none } pre .str, code .str { color: #060 } pre .kwd, code .kwd { color: #006; font-weight: bold } pre .com, code .com { color: #600; font-style: italic } pre .typ, code .typ { color: #404; font-weight: bold } pre .lit, code .lit { color: #044 } pre .pun, code .pun { color: #440 } pre .pln, code .pln { color: #000 } pre .tag, code .tag { color: #006; font-weight: bold } pre .atn, code .atn { color: #404 } pre .atv, code .atv { color: #060 } } .content pre code {background-color:inherit; color:inherit} .content pre { padding:1em; margin: 0.5em 0px; }

Note: I changed some of the Desert theme to play nice with my existing styles.

If your blog includes code snippets, you owe it to your audience to have good looking and readable syntax highlighting.

If you're interested in getting started and aren't already locked into a blogging platform, I recommend trying out Jekyll on Heroku it's easy to set up and a real hackers blog. You also get syntax highlighting out of the box. Hope this helped & happy blogging.

#tumblr #code #pretty #syntax highlighting

26 notes · View notes

wildjcrt-code-highlighting-demo · 13 years ago

Text

如何呈現語法高亮度

這是我最近研究出來的方法，歡迎各方同好批評指教。

先選 theme

我嘗試後找到一個比較滿意的就是目前 demo 使用的這個。

select "Free Themes"

use "Pink touch 2 by kcmr"

記得 save

google-code-prettify

上網 survey 到 google-code-prettify 可以用，所以要到 custommize 設定去加入讓 js/css 生效。

Edit HTML

在 <head></head> 裡面加入這段 code

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

將 <body> 改成 <body onload="prettyPrint()">

一樣記得 save

使用方法

這隻 js 會吃兩種方法：

我的用法是加 <pre><code class="prettyprint">...</code></pre>。

範例

#highlighting #syntax highlighting #code highlighting

17 notes · View notes

chmod755 · 13 years ago

Text

Syntax highlighting for Tumblr posts

Just got this working, and I figured I'd share how I got it working. I'm not really a web design guy.

Somewhere in your <head> tag, add the following code: (I added it right before </head>)

Now, we need to load the prettyprint script when the body loads.

In the <body> tag, add the following:

If you want to add a custom theme, download the code from one of the themes at http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html

Upload the modified .css file to tumblr using the static uploader at

http://www.tumblr.com/themes/upload_static_file

And simply replace the url in the <link> tag to match your CSS.

Now, in the post editor, hit the HTML button and surround your code in <pre class="prettyprint"> </pre> tags.

Voila! Custom syntax highlighting for tumblr

#syntax highlighting #prettify #css #js #javascript

15 notes · View notes

20over20 · 13 years ago

Link

Quick Awesomeness

Guesses the language so all you need to do is wrap your code up in pre > code tags.

Hosted JS and Stylesheets (perfect for Tumblr).

Beautiful themes, including a GitHub one. Brilliant.

Customizable.

A bunch of plugins, including one for Wordpress.

Nearly flawless.

#syntax highlighting #javascript #web development

15 notes · View notes

blairvanderhoof · 13 years ago

Text

Code syntax highlighting on tumblr

Upon registering for tumblr, I was surprised that there weren't any widgets in the text editor to add a code block with syntax highlighting. After a little research, a couple file includes, and one JavaScript command, highlighting works.

To make it work, you'll be using google-code-prettify which requires a JavaScript and CSS file. Many people on the web seem to be including the JavaScript file directly from the google-code-prettify website which is bad for 2 reasons. One, it's not meant to be hotlinked and hosted by others and two, if google ever decides to change the URL for that file, you are out of luck and your blog won't prettify your code blocks. Luckily our friends at cdnjs have us covered and the css is small enough to be included inline.

Directions are as follows:

First you need to customize your blog customize your blog.

Next, click "Edit HTML" on the left top side.

Paste the following directly before the closing "</head>" tag:

Now that the files are included, you need to initialize prettyprint on page load. To do so add the following onload event to your body tag:

(Using the event attributes on html tags is a huge no-no in proper code, but i'll let it fly for a tumblr blog)

Now make a new text post. Click the "HTML" action on the grey editor bar. Now add the following:

<pre class="prettyprint"> function foo(){ return console.log("foo"); } </pre>

You can add any code you want inside the pre tags. As you can see above, the code is syntax highlighted and looking good.

UPDATE 03/13/2012** You'll notice that the above examples aren't exactly prettified. That's because I've given up the above in preference of Gists and a custom plugin I wrote. See more here: http://blog.blairvanderhoof.com/post/17938534590/embed-gists-easily-on-your-blog

#tumblr #syntax highlighting #code snippets

14 notes · View notes

runandhack-blog · 14 years ago

Text

Tumblr for Coder

Wanted to add few snippets of code ... But without syntax hightlighting, the snippets does not look like a code. So with some googling found a good syntax highlighter http://alexgorbatchev.com/SyntaxHighlighter/

After some trials ... Able to setup the Syntax Highlighter with Tumblr

1. Go to Customize Appearence

2. click on Edit HTML. You will see the HTML Section for the Theme being used.

3. In the HEAD Section add the following lines.

4. After the BODY Section add these lines

5. Then in the post for doing the syntax highlighting place the code between

Your Ruby Code Here :)

</pre>

#syntax highlighting #tumblr #code #ruby #snippets

11 notes · View notes

donmahallem-blog · 14 years ago

Text

Code Test - Syntax Highlighting

Here i try syntax highlighting for tumblr... obviously it works fine!

Here is the Link to what i found and use. Code Prettify works quite well.

package package de.donmahallem.martin; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.provider.ContactsContract.Contacts; import android.view.KeyEvent; import android.view.MotionEvent; import android.view.View; import android.view.View.OnKeyListener; import android.view.View.OnTouchListener; import android.widget.ImageView; public class MartinsActivity extends Activity implements OnTouchListener { /** Called when the activity is first created. */ protected boolean _active = true; protected int _splashTime = 2000; private static final int CONTACT_PICKER_RESULT = 1001; private ImageView a; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); a = (ImageView) findViewById(R.id.imageView1); a.setOnTouchListener(this ); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { // preventing default implementation previous to // android.os.Build.VERSION_CODES.ECLAIR return true; } return super.onKeyDown(keyCode, event); } @Override public boolean onTouch(View v, MotionEvent event) { // TODO Auto-generated method stub if(v==a){ this.finish(); } return true; } }

#android #blog #code #java #syntax highlighting #test #event #don #donmahallem #keydown #ontouch

11 notes · View notes

sandbochs · 13 years ago

Text

Syntax Highlighting, tumblr style

I'm making this post for boots that run across my blog, see the cool code snippets, and decide that they want some dope code snippets too!

I used Google's Prettify library: http://code.google.com/p/google-code-prettify/

To get Prettify to work I had look at a few blogs and combine the information so here it is all in one place:

Go to your tumblr url and click customize

Click the 'Edit HTML' button on the left

Scroll down until you see the closing head tag </head>

Paste the following code before </head> (Thank you! ghoti143.tumblr.com)

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet"/> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script> <style> pre.prettyprint { overflow-x: auto; margin: 5px 20px 20px; } </style>

Also, change the <body> tag to be <body onload="prettyPrint()">

Viola! You can now make code snippets. To do so just encapsulate your code like the following example and add it to your post's html.

<pre class="prettyprint"><code><br /> puts "Hello"<br /> puts "World" </code></pre>

Notes: to show <body> in the code snippet you would write it as <body> in the HTML. Also, <br /> denotes a new line.

#prettify #syntax highlighting #code snippets

9 notes · View notes

mnewt-blog · 13 years ago

Text

Code Syntax Highlighting in Tumblr

**Edited 08/10/2012: See updated post: [Add Code Syntax Highlighting to any page in “Two” Lines](/post/29164259480/add-code-syntax-highlighting-to-any-page-in-two-lines)** It aggravates me that no blogging platform makes it easy to enable code highlighting. Oh well, at least tumblr makes it easy to edit HTML manually to include code highlighting. I put together the code highlighting on this blog using the following two posts as guidelines: * http://ghoti143.tumblr.com/post/1412901908/google-code-prettify-tumblr-love * http://www.codingthewheel.com/archives/syntax-highlighting-stackoverflow-google-prettify Both of those posts are great, but I'm a minimalist so I want to make the whole process a bit easier. You can highlight all of your code blocks with one block that you can copy and paste into your html file right before the `

` tag: pre.prettyprint { overflow-x: auto; margin: 5px 20px 20px; } function styleCode() { if (typeof disableStyleCode != "undefined") { return; } var a = false; $("pre code").parent().each(function() { if (!$(this).hasClass("prettyprint")) { $(this).addClass("prettyprint"); a = true } }); if (a) { prettyPrint() } } $(function() { styleCode(); });

#code #development #syntax highlighting #tumblr

8 notes · View notes

doesitstillmatter-blog · 13 years ago

Text

Another test

This is a Java Test...

import java.util.*; public class Test { public static void main(String[] args) { System.out.println("Welcome to Syntax Highlighting!!!"); } }

#code snippet #syntax highlighting #java

8 notes · View notes

dropshadows · 13 years ago

Text

YAML Front Matter syntax highlighting in TextMate

_Aside:_ Right now I'm a train with spotty Wifi. Hence, lots of time for noodling rather than actual productivity. If you like that [Jekyll](https://github.com/mojombo/jekyll) as much as I do, chances are you've got lots and lots of wonderful Markdown files loaded with [YAML Front Matter](https://github.com/mojombo/jekyll/wiki/YAML-Front-Matter). I use Jekyll for everything, lo, even this very post! Let's get TextMate's Markdown Language Grammer to properly highlight the YAML up top. Crack open the Bundle Editor (Cmd + Opt + Ctrl + B) and select the Markdown Language Grammer. In TextMate 2, this is in Markdown > Language Grammers > Markdown. You'll need to add two bits. In the `block`, er, block, add `{ include = '#yaml_front_matter'; },` to the `patterns`: block = { patterns = ( { include = '#yaml_front_matter'; }, { include = '#separator'; }, { include = '#heading'; }, ... ); Then add the following pattern for `yaml_front_matter` under the `block` repository. I just added it after `separator` pattern. separator = { match = '(^|\G)[ ]{,3}([-*_])([ ]{,2}\2){2,}[ \t]*$\n?'; name = 'meta.separator.markdown'; }; # add this next bit yaml_front_matter = { patterns = ( { begin = '\G---'; end = '^---'; name = 'source.yaml.embedded.markdown'; patterns = ( { include = 'source.yaml'; } ); }, ); }; Boom. Now my Jekyll Markdown files look niiiiiiiiiice. ![YAML Front Matter](http://i.imgur.com/vyYAK.png)

#YAML #Markdown #TextMate #syntax highlighting #Jekyll

7 notes · View notes

trialbybyte · 14 years ago

Text

Add syntax highlighting to Tumblr

After posting a bunch of code it dawned on me that it should look a bit nicer than it does by default using <pre> tags.

So after a bit of googling this is the solution I came with. It uses portions of http://snippets-of-code.tumblr.com/post/6027484416/adding-syntax-highlighting-into-tumblr and http://tomayko.com/writings/javascript-prettification.

<script src="http://code.jquery.com/jquery-latest.min.js"></script> <link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"></link> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script> <script type="text/javascript">  </script>

When posting code, use a text editor to change all the angle brackets to < and > and enclose it in <pre><code></code></pre> tags. The <pre></pre> is necessary to keep the formatting.

#tumbler #syntax highlighting

7 notes · View notes

blairvanderhoof · 13 years ago

Text

Embed gists easily on your blog

#gist #github #embed code #syntax highlighting #javascript #jquery

7 notes · View notes