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.


Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications - please check your spam folder if you don't receive this.

Join 17,889,306 other followers

Alex Mills

99 Comments

Comments are closed.

  1. Lagunatic

    OMG – learning how to do any of this stuff is going to cost me money, isn’t it?

    Like

  2. golfsidan.is

    Looks great – thanks :D

    Like

  3. Andrew

    Great! Thanks a lot!

    Like

  4. ketzerisch

    Awesome!

    Like

  5. ileaneb

    This change might force me to learn some HTML. Thanks for another great feature.

    Like

  6. Pingback: Wordpress.com Fehler: Artikel verschwunden « Verlorene Generation
  7. capitalcomputergroup

    I love source code editing!

    Like

  8. Alastair Vance

    That is soooooo sweet. Thanks for this.

    Like

  9. everspike

    wow! that helps a lot! 10x a million! Like always, you ARE the best of the best!

    Like

  10. trollboy

    thats cool… of course one of the things i like about wordpress is i don’t have to deal with code anymore!

    Like

  11. timethief

    Thanks for this inclusion among the many wordpress.com features.

    Like

  12. Lokesh Shah

    On firefox 3.5.5 ubuntu 9.10 I don’t see any code.
    Just white and grey bars.

    Like

    • Alex M.

      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. :)

      Like

  13. Pingback: コード投稿機能の改善 « ブログ « WordPress.com
  14. jawher

    Many thanks for supporting Scala syntax highlighting ! :D

    Like

  15. Taufik

    thks for the update and the features

    Like

  16. Moses

    awesome! :)

    Like

  17. Mary

    This is cool.

    Like

  18. VIKAS |vikas-gupta.in

    Someday I’ll learn CSS and HTML and use all these features.

    Like

  19. phoxis

    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.

    Like

  20. nicmcj934

    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

    Like

  21. Captain Optimistic

    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.

    Like

  22. jhOy imPeRiaL

    great! =)

    Like

  23. libre fan

    Excellently spruced up feature. Congrat’ :-) and glad to know it made its way as a plugin into WP.

    Like

  24. sylviahubbard1

    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.

    Like

  25. Pingback: ??? « Rundordner Refilled
  26. bmoviehorror

    Very nice, first line number control is a great improvement. Thanks WP.com

    Like

  27. mardoto

    Nice, thanks.

    Like

  28. mattreyuk

    This is great! Having the language syntax highlight is a nice plus over the code view I’ve been using prior to this.

    Thanks.

    Like

  29. lawand

    That’s useful.

    Like

  30. Yella Ojrak

    This exactly is what I want! Thænkz!

    Like

  31. MoSop

    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. :)

    Like

  32. Budi

    Sounds good for me, since I’m going to post any source code to my blog.. ^^

    Like

  33. x4x-33

    cheerio!!!!

    Like

  34. mangalary

    Thanks a lot…

    Like

  35. Pingback: Latest Version Of SyntaxHighlighter Now Live On WordPress.com « Viper007Bond.com
  36. Pingback: Adding source code to engineeringtheworld blog « Blog on engineering, programming and some more
  37. softselect

    Thanks for another great addition to the wordpress.com functionality

    Like

  38. Wings of Wind

    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

    Like

  39. Pingback: Testing Source Code « Skarh
  40. suvayu

    This is an awesome extension! I was wondering if we can have syntax highlighting for lisp?

    Like

  41. sumitasok

    Something that I was waiting for…Thanks a lot.

    Like

  42. vcappuccio

    Excellent Stuff!

    Would you guys also consider adding Cisco or Juniper Syntax hightlight?

    WP Rocks!

    Thank you!

    Like

  43. Achmad

    mmm,…. good info

    Like

  44. arab4ads

    thanks !!!

    Like

  45. Sajal Dutta

    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.

    Like

  46. lnxwalt

    Truly awesome-tastic! Thanks.

    Like

  47. coffee0509

    great!

    Like

  48. admin

    Good work folks

    Like

  49. edytono

    Yea…Better source code..Nice..Very simple to using about that

    Like

  50. Hana

    Thank you so much. Id love to use this feature. WordPress is getting better

    Like

  51. auwoo

    It’s Very useful for me ;) thx

    Like

  52. Dan

    Any chance we’ll get support for ML style languages (like SML, Ocaml, and F#) and Lisps (like CL, Clojure, and elisp)?

    Like

  53. Sajal Dutta

    @Alex M.
    Thank you. Much appreciated.

    Like

  54. ronakorn

    Very useful plug-in.

    Like

  55. Florence Ria

    I was looking for this, great help, thanks. So long I was having difficulty in posting those codes.

    Like

  56. тензодатчик

    I prefer specialized plugins for source posting, cause there’s some highlighting as well

    Like

  57. lutgendorffarjen

    The .com versions/themes are much easier, you don’t have to think about how things work ;-)

    Like

  58. Syed Mehroz Alam

    The highlighting feature is greate. I missed it for quite long.

    Like

  59. sety4budi

    nice info.. lets try it :D

    Like

  60. Rizwan

    Great but its about time .. I would say..

    Like

  61. barbiedumpedkenforme

    I still don’t get it. And why should you source code posts?

    Like

  62. smashingidols7

    Want to learn how to make my blog look right

    Like

  63. Pingback: [Wordpress] Syntax-Highlighting im Blog bei Wordpress.com « PHP, MySQL, pgSQL, ExtJS – Ein Tutorial-Blog
  64. trinaramirez

    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.

    Like

  65. 1200seconds

    Hello,
    Could you please let me know these coding will help me to promote my blog?
    Thanks

    Like

  66. Charles Ling

    Thank you so much..

    Like

  67. overcoder

    Thanks, that’s great ! A really nice thing :)

    Like

  68. blueberry1210

    wow wow wow,,, this is nice!

    Like

  69. jars314

    UUhh what is source coding?? Im learning pple… :/

    Like

  70. Sensei

    LOL

    Like

  71. gondeaz

    thanks so much

    Like

  72. --x3BIGBANG Midnight Stardust

    Thx so much! It’s a lot like BBCode.

    Like

  73. zellis

    Thx this is really great :)

    Like

  74. Pingback: Wordpress source code posting « How did I do that again?
  75. artxulan

    Me thinks its a snowin on this here page!

    Like

  76. k0mischelectr0nisch

    that is really cool ;)

    Like

  77. philipphutter

    Cool!

    Thank you!

    Like

  78. arreane09

    muchas gracias for this!

    Like

  79. poettraveler

    Sounds very good! (and if it’s all beyond my wit then I know others will help me if I ask). :)

    Like

  80. Pingback: Python e la linea di comando « Giasone's Blog
  81. classic434

    Alex ..
    that’s cool
    thanx :)

    Like

  82. Sebastiaan Brozius

    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?

    Like

  83. charleshbaker

    Sweet! Thanks!

    Like

  84. Video Dinle İzle

    Very cool.:)

    Like

  85. Pingback: Syntax Highlight II « Diogo Besson :: web tecno log
  86. fausto1

    Good Work! Keep going!
    FP

    Like

  87. prosperospen

    Thank you! Thank you!

    Like

  88. Pingback: Better Source Code Posting | Ansermot.ch
  89. Ryoko

    It’s all greek to me.

    Like

  90. soumen

    I came to know ab’t this from your blog only and used it… Thanks,

    Soumen.

    Like

Follow

Get every new post delivered to your Inbox.

Join 17,889,306 other followers

%d bloggers like this: