Posted: Wednesday, December 2nd, 2009 at 8:10 pm. Filed in Features, Posting.
Tags: code, sourcecode, syntaxhighlighter
Better Source Code Posting
For the coders among you, you may already know that posting source code is really easy here on WordPress.com thanks to the sourcecode shortcode. You just wrap your code in [sourcecode] and you’re good to go — no code escaping or anything.
If you are one of those code posters, or are looking to become one, then you’ll be happy to know that we’ve updated the feature allowing more flexibility as well as adding support for additional coding languages like Bash and SVN diff.
See for yourself — here’s some HTML with a little bit of PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>WordPress.com Code Example</title> </head> <body> <h1>WordPress.com Code Example</h1> <p><?php echo 'Hello World!'; ?></p> <p>This line is highlighted.</p> <p>This line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long.</p> <div class="foobar"> This is an example of smart tabs. </div> <p><a href="http://wordpress.com/">WordPress.com</a></p> </body> </html>
Besides a completely new, easier to use look, you may notice that line number 12 is highlighted. It’s just one of the many new features offered in the new version which also includes things like first line number control and the much better toolbar (hover over the code block to make it show up).
To see the full list of available languages and configurations parameters as well as some working examples, check out our in-depth support document.
This feature was implemented using Alex Gorbatchev’s SyntaxHighlighter package. It’s also available as a plugin for WordPress.org users.
December 2nd, 2009 at 8:22 pm
OMG – learning how to do any of this stuff is going to cost me money, isn’t it?
December 2nd, 2009 at 8:31 pm
Looks great – thanks
December 2nd, 2009 at 8:38 pm
Great! Thanks a lot!
December 2nd, 2009 at 8:44 pm
Awesome!
December 2nd, 2009 at 8:55 pm
This change might force me to learn some HTML. Thanks for another great feature.
December 2nd, 2009 at 9:00 pm
I love source code editing!
December 2nd, 2009 at 9:22 pm
That is soooooo sweet. Thanks for this.
December 2nd, 2009 at 9:47 pm
wow! that helps a lot! 10x a million! Like always, you ARE the best of the best!
December 2nd, 2009 at 9:52 pm
thats cool… of course one of the things i like about wordpress is i don’t have to deal with code anymore!
December 2nd, 2009 at 10:20 pm
Thanks for this inclusion among the many wordpress.com features.
December 2nd, 2009 at 11:30 pm
On firefox 3.5.5 ubuntu 9.10 I don’t see any code.
Just white and grey bars.
December 3rd, 2009 at 6:30 am
I’m unable to reproduce. I booted my laptop off an Unbuntu 9.10 live CD and used it’s Firefox 3.5.3 to test — it showed up as expected.
Please make sure you don’t have any addons conflicting or something.
December 2nd, 2009 at 11:54 pm
Many thanks for supporting Scala syntax highlighting !
December 2nd, 2009 at 11:58 pm
thks for the update and the features
December 3rd, 2009 at 12:26 am
awesome!
December 3rd, 2009 at 1:06 am
This is cool.
December 3rd, 2009 at 1:32 am
Someday I’ll learn CSS and HTML and use all these features.
December 3rd, 2009 at 3:19 am
I use these features extensively, and these are very important to me. The feature is perfect for me, except some minor visual issues (padding and borders in some variant) which i have already discussed on forums and #wordpress.com freenode channel.
December 3rd, 2009 at 4:02 am
Um, okaaaaay. I just tried wrapping the source code for a widget as described above, and all that happens is the actual code appears on my blog??? I’ve read just about everything I can find on the subject and I’m starting to feel like I’m missing something? A brain perhaps? Any ideas anyone? Thx
December 3rd, 2009 at 4:01 pm
Can you contact WordPress.com support and include the code as well as the URL where you tried to post it?
December 3rd, 2009 at 5:05 am
Copy to the toolbar alone is worth its weight in gold. Very nice feature!
The code itself looks kind of cramped though by default in Chrome on XP.
December 3rd, 2009 at 5:51 am
great! =)
December 3rd, 2009 at 9:48 am
Excellently spruced up feature. Congrat’
and glad to know it made its way as a plugin into WP.
December 3rd, 2009 at 11:30 am
I know this may be a silly question, but does this mean first I have to purchase CSS upgrade in order to do sourcecoding?
Plus would you recommend a site I can learn just a little bit more.
I understand HTML. I’m pretty good with the basics, and I’d love to learn some more. I’m going out to find an HTML5 book today just to stay on top of the little i know.
December 3rd, 2009 at 4:39 pm
You don’t have to purchase anything to use the sourcecode shortcode on WordPress.com. I think W3Schools is a great HTML resource. I have liked HTML Dog in the past too.
December 3rd, 2009 at 11:50 am
Very nice, first line number control is a great improvement. Thanks WP.com
December 3rd, 2009 at 1:50 pm
Nice, thanks.
December 3rd, 2009 at 7:31 pm
This is great! Having the language syntax highlight is a nice plus over the code view I’ve been using prior to this.
Thanks.
December 3rd, 2009 at 11:17 pm
That’s useful.
December 3rd, 2009 at 11:23 pm
This exactly is what I want! Thænkz!
December 3rd, 2009 at 11:39 pm
Wow, it’s just like you’re speaking English in another language!! I vow before I die I am going to take the time to decipher it, and I trust that by then WP will have made even more amazing updates.
December 4th, 2009 at 3:07 am
Sounds good for me, since I’m going to post any source code to my blog.. ^^
December 4th, 2009 at 4:23 am
cheerio!!!!
December 4th, 2009 at 5:25 am
Thanks a lot…
December 4th, 2009 at 2:37 pm
Thanks for another great addition to the wordpress.com functionality
December 4th, 2009 at 6:11 pm
Guys, you screwed up the SourceCode engine. Now, at the time of posting, everything shows up like it would be just formatted with ::pre:: tag. See your own blog post for the ‘nice’ effect.
HTH
December 4th, 2009 at 7:34 pm
This is an awesome extension! I was wondering if we can have syntax highlighting for lisp?
December 5th, 2009 at 7:50 am
Something that I was waiting for…Thanks a lot.
December 5th, 2009 at 12:53 pm
Excellent Stuff!
Would you guys also consider adding Cisco or Juniper Syntax hightlight?
WP Rocks!
Thank you!
December 9th, 2009 at 10:56 pm
It doesn’t look like anyone has written a “brush” (which is what adds support for a language) for either of those languages and I don’t think anyone here at WordPress.com knows those languages either.
If you’d like to write one yourself though, we’d be happy to include it. Just read the brush documentation and then submit the content of the brushes to us.
December 5th, 2009 at 12:57 pm
mmm,…. good info
December 5th, 2009 at 4:16 pm
thanks !!!
December 6th, 2009 at 12:56 am
Thank God.. I was pretty tired of converting my code into html decorated form and pasting ‘em in my blog. That is a good one. Java and C# should be added to the feature. Thanks a bunch.
December 7th, 2009 at 3:18 am
Java and C# (csharp) are both already supported. See the support document for the full list of supported languages: http://en.support.wordpress.com/code/posting-source-code/
December 6th, 2009 at 6:54 am
Truly awesome-tastic! Thanks.
December 6th, 2009 at 8:43 am
great!
December 6th, 2009 at 8:56 am
Good work folks
December 6th, 2009 at 12:45 pm
Yea…Better source code..Nice..Very simple to using about that
December 6th, 2009 at 2:46 pm
Thank you so much. Id love to use this feature. WordPress is getting better
December 6th, 2009 at 11:36 pm
It’s Very useful for me
thx
December 7th, 2009 at 1:30 am
Any chance we’ll get support for ML style languages (like SML, Ocaml, and F#) and Lisps (like CL, Clojure, and elisp)?
December 7th, 2009 at 8:26 am
@Alex M.
Thank you. Much appreciated.
December 7th, 2009 at 12:38 pm
Very useful plug-in.
December 7th, 2009 at 2:34 pm
I was looking for this, great help, thanks. So long I was having difficulty in posting those codes.
December 8th, 2009 at 8:02 am
I prefer specialized plugins for source posting, cause there’s some highlighting as well
December 8th, 2009 at 11:46 am
The .com versions/themes are much easier, you don’t have to think about how things work
December 8th, 2009 at 12:37 pm
The highlighting feature is greate. I missed it for quite long.
December 8th, 2009 at 1:17 pm
nice info.. lets try it
December 8th, 2009 at 2:49 pm
Great but its about time .. I would say..
December 8th, 2009 at 7:23 pm
I still don’t get it. And why should you source code posts?
December 9th, 2009 at 2:41 pm
Source code can be added to posts to show other people your neat/useful code.
December 8th, 2009 at 9:35 pm
Want to learn how to make my blog look right
December 9th, 2009 at 2:38 pm
Okay! The WordPress.com introduction page has some basics. Then head over to the forums or ask us in support if you need more help.
December 9th, 2009 at 12:54 am
Speak english, I don’t understand this source coding stuff… I’m just a daily photo blogger waiting for my blog to be freshly pressed.
December 9th, 2009 at 4:44 am
Hello,
Could you please let me know these coding will help me to promote my blog?
Thanks
December 9th, 2009 at 2:44 pm
The sourcecode shortcode is a way to show other people code examples, not a way to promote a blog.
December 9th, 2009 at 5:16 am
Thank you so much..
December 9th, 2009 at 11:34 pm
Thanks, that’s great ! A really nice thing
December 10th, 2009 at 2:57 pm
wow wow wow,,, this is nice!
December 10th, 2009 at 5:47 pm
UUhh what is source coding?? Im learning pple… :/
December 10th, 2009 at 6:50 pm
LOL
December 11th, 2009 at 9:59 am
thanks so much
December 11th, 2009 at 11:47 am
Thx so much! It’s a lot like BBCode.
December 11th, 2009 at 11:57 am
Thx this is really great
December 11th, 2009 at 6:00 pm
Me thinks its a snowin on this here page!
December 12th, 2009 at 12:07 am
that is really cool
December 12th, 2009 at 12:50 am
Cool!
Thank you!
December 12th, 2009 at 11:09 pm
muchas gracias for this!
December 13th, 2009 at 3:52 pm
Sounds very good! (and if it’s all beyond my wit then I know others will help me if I ask).
December 14th, 2009 at 6:37 am
Alex ..
that’s cool
thanx
December 14th, 2009 at 9:05 am
Looks great! One thing, though…
I’ve got some articles where code is inside code-tags. When I replace those tags with the new sourcecode-block, the quote-characters are rendered for html and are thus displayed as " instead of ‘just’ the normal character.
Am I doing something wrong here?
December 16th, 2009 at 1:09 am
Can you contact WordPress.com support with a specific example?
December 14th, 2009 at 5:54 pm
Sweet! Thanks!
December 14th, 2009 at 8:46 pm
Very cool.:)
December 14th, 2009 at 10:30 pm
Good Work! Keep going!
FP
December 15th, 2009 at 1:20 am
Thank you! Thank you!
December 16th, 2009 at 1:19 am
It’s all greek to me.
December 16th, 2009 at 4:28 pm
I came to know ab’t this from your blog only and used it… Thanks,
Soumen.