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 14,964,408 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?

  2. golfsidan.is

    Looks great – thanks :D

  3. Andrew

    Great! Thanks a lot!

  4. ketzerisch

    Awesome!

  5. ileaneb

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

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

    I love source code editing!

  8. Alastair Vance

    That is soooooo sweet. Thanks for this.

  9. everspike

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

  10. trollboy

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

  11. timethief

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

  12. Lokesh Shah

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

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

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

    Many thanks for supporting Scala syntax highlighting ! :D

  15. Taufik

    thks for the update and the features

  16. Moses

    awesome! :)

  17. Mary

    This is cool.

  18. VIKAS |vikas-gupta.in

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

  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.

  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

  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.

  22. jhOy imPeRiaL

    great! =)

  23. libre fan

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

  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.

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

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

  27. mardoto

    Nice, thanks.

  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.

  29. lawand

    That’s useful.

  30. Yella Ojrak

    This exactly is what I want! Thænkz!

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

  32. Budi

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

  33. x4x-33

    cheerio!!!!

  34. mangalary

    Thanks a lot…

  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

  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

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

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

  41. sumitasok

    Something that I was waiting for…Thanks a lot.

  42. vcappuccio

    Excellent Stuff!

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

    WP Rocks!

    Thank you!

  43. Achmad

    mmm,…. good info

  44. arab4ads

    thanks !!!

  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.

  46. lnxwalt

    Truly awesome-tastic! Thanks.

  47. coffee0509

    great!

  48. admin

    Good work folks

  49. edytono

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

  50. Hana

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

  51. auwoo

    It’s Very useful for me ;) thx

  52. Dan

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

  53. Sajal Dutta

    @Alex M.
    Thank you. Much appreciated.

  54. ronakorn

    Very useful plug-in.

  55. Florence Ria

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

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

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

  57. lutgendorffarjen

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

  58. Syed Mehroz Alam

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

  59. sety4budi

    nice info.. lets try it :D

  60. Rizwan

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

  61. barbiedumpedkenforme

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

  62. smashingidols7

    Want to learn how to make my blog look right

  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.

  65. 1200seconds

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

    • Sheri

      The sourcecode shortcode is a way to show other people code examples, not a way to promote a blog.

  66. Charles Ling

    Thank you so much..

  67. overcoder

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

  68. blueberry1210

    wow wow wow,,, this is nice!

  69. jars314

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

  70. Sensei

    LOL

  71. gondeaz

    thanks so much

  72. --x3BIGBANG Midnight Stardust

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

  73. zellis

    Thx this is really great :)

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

    Me thinks its a snowin on this here page!

  76. k0mischelectr0nisch

    that is really cool ;)

  77. philipphutter

    Cool!

    Thank you!

  78. arreane09

    muchas gracias for this!

  79. poettraveler

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

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

    Alex ..
    that’s cool
    thanx :)

  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?

  83. charleshbaker

    Sweet! Thanks!

  84. Video Dinle İzle

    Very cool.:)

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

    Good Work! Keep going!
    FP

  87. prosperospen

    Thank you! Thank you!

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

    It’s all greek to me.

  90. soumen

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

    Soumen.

Follow

Get every new post delivered to your Inbox.

Join 14,964,408 other followers

%d bloggers like this: