WordLog

A weblog authored by Carthik about the latest in the WordPress world.

Sunday, May 13, 2007

Displaying HTML Source Code in Your Blog Posts

Filed under: — Carthik @ 2:16 pm

I badly wanted to display the following html code in a blog post that I am drafting:
“<link rel=’archives’ title=’May 2007′ href=’http://wordlog.com/archives/2007/05/’ />”

I tried putting the raw line of html between “code” tags and then even “pre” tags, but it just wouldn’t show up. Turns out you need to encode the html entities, like the “<” by replacing them with their html code equivalents – & lt ; is the equivalent for the left angle bracket.

There is a cute little encoder tool at wordpress.org written by The matt – however it seems to not want to work anymore. So I found a replacement Encode/Decode HTML entities tool at centricle.com. It works, as evidenced by the code displayed in this blog entry.

26 Comments

  1. Elliot Swan’s Postable works well for encoding HTML entities as well.

    Comment by karsh — 5/13/2007 @ 3:13 pm

  2. I use a neat plugin called Code Markup (http://www.thunderguy.com/semicolon/wordpress/code-markup-wordpress-plugin/) to allow for automagic-conversion of special characters to entities within WordPress.

    There are others out there that may do more, but I’ve found that this one works best – it’s simple, but you can also configure it to your liking.

    Comment by Peter — 5/13/2007 @ 3:37 pm

  3. Would be nice of apostrophes and quotes were encoded as well, to prevent WordPress from changing them to fancy curly quotes, which is nice for text but not so nice for code.

    Comment by Rick Beckman — 5/13/2007 @ 4:29 pm

  4. Unfortunately it still changes singlequotes into ‘ and ’, invalidating everything and making copy/paste a complete pain. :-)

    Comment by Tom Edwards — 5/13/2007 @ 4:32 pm

  5. I knew that would happen!

    Comment by Tom Edwards — 5/13/2007 @ 4:32 pm

  6. http://cwanja.com/resources/html_to_hexadecimal/

    There is mine mock up of a HTML to Hexadecimal converter. It has the basic conversions, but I need to add more.

    Comment by cWanja — 5/13/2007 @ 8:16 pm

  7. I made a little plugin that adds a button to the post editing screen within wordpress. I need to update it because at the moment it only shows up when you’re editing a post – not creating a new one. It’s not a big fix. I’ve just been lazy to fix it… Here’s the post about the plugin.

    Comment by Jennifer — 5/13/2007 @ 8:27 pm

  8. You can try the Code Markup plugin. It display html codes & singlequotes nicely ;)

    Comment by Genkisan — 5/13/2007 @ 9:01 pm

  9. It’s a bit “fancier”, but I’ve been using iG:Syntax Hiliter for the last year or so and have been quite pleased with it.

    Comment by Chris — 5/13/2007 @ 9:06 pm

  10. Or, if you’re using Markdown like I am, just surround the code in backticks (`).

    Comment by Robin — 5/13/2007 @ 10:01 pm

  11. If you’re using Emacs, just Htmlize the buffer – you get syntax highlighting as well.

    Comment by Ankit — 5/13/2007 @ 10:44 pm

  12. try http://blog.igeek.info/wp-plugins/igsyntax-hiliter/

    Comment by LcF — 5/13/2007 @ 11:08 pm

  13. Or, if you’re using Markdown like I am, just surround the code in backticks (`).

    I second that. I’m using Markdown extra, and it’s great!

    Comment by Ankur — 5/13/2007 @ 11:44 pm

  14. You can somewhat laboriously use ampersand 39 semicolon for neutral apostrophe and ampersand quot semicolon for neutral quote (or look up the numeric value thereof if you are concerned about XHTML purity). Your text editor can do a search-and-replace.

    Comment by Joe Clark — 5/14/2007 @ 12:35 am

  15. Good point about the apostrophes and the quotes.

    Don’t you have to start using Markdown from the very beginning to use it? Could I start using it now, say – what sense will it make of the older posts, and would it scramble stuff up by processing things that weren’t written with Markdown in mind?

    Comment by Carthik — 5/14/2007 @ 1:44 am

  16. If you want to post code, be it HTML PHP or anything, your just can’t live with a plugin to do so. WP’s formatting functions are uber annoying when you’re dealing with code, and workaround like encoding entities, using markdown etc… are all but futureproof.

    Recommended: http://blog.igeek.info/wp-plugins/igsyntax-hiliter/ or http://codex.wordpress.org/Plugins/Syntax_Highlighting

    Comment by Ozh — 5/14/2007 @ 2:33 am

  17. Don’t take my word 100% on this, but if I remember well Markdown (and Textile) is ‘parallel-compatible’ with HTML. If you activate Markdown, new posts written with it will show up fine and old posts written in HTML will show as they were before. But if you want to come back to HTML, you should leave Markdown activated or risk to see your markdown-written posts scrambled.

    Can anyone confirm (or infirm) this?

    Comment by Serge K. Keller — 5/14/2007 @ 3:28 am

  18. [...] the plugin most of the way done and then got distracted with other things. But after reading about another person having the same annoyance, I decided I should finish the [...]

    Pingback by WP_CodeShield :: Dammit Jim! — 5/14/2007 @ 9:31 am

  19. I use Notepad++ for encoding the HTML code before I display it on my blog.

    Comment by Ajay — 5/14/2007 @ 9:40 am

  20. Little problem with your example, Carthik. You forgot to encode the apostrophes and quote marks. This is really common and if the code is copied will break upon use.

    I wrote about this and included converters and the actual code in Blog Bling: Signatures and Writing Code, and did a bit of a review and listing of WordPress Plugins That Help You Write Code for those who do this all the time.

    Comment by Lorelle — 5/14/2007 @ 11:46 am

  21. Just write html code in the “Visual” editor in WordPress and you will get the encoded code automatically.

    Comment by schuen — 5/14/2007 @ 2:50 pm

  22. One thing you *have* to watch out for is those !@#@#!$ing smartquotes.

    All code samples need to be:

    - entity encoded
    - put in a PRE tag

    or all of your quotations will be turned into smartquotes (which are anything but) and will break for people who try to use their code samples.

    Whoever thought converting quotes to smartquotes was a good idea should be raked over the coals.

    Comment by engtech — 5/14/2007 @ 2:52 pm

  23. @schuen: You still hit the smartquotes issue with using the visual editor.

    Comment by engtech — 5/14/2007 @ 2:55 pm

  24. I am a developer that has to publish code snippets constantly in my blog. I have begun to use the tool Microsoft’s Windows Live Writer (in beta at this time) which actually interfaces with WordPress! Its basic function as a blogging tool is excellent and I can post my blogs from it to WordPress and extract from the server to my local machine.

    But when I combine it with a Code Snippet addin tool, I can blog about HTML, XML, and C#. It handles other languages as well. It also allows one to embed styles, alternate lines, enclose in a box…really a nice addin which makes using WLW to blog tech topics no longer a chore.

    Here are the links. Microsoft plans to keep the WLW free after beta. Note the belows are all PC installs programs, so no need to figure out PHP commands or wordpress blog nuances.

    WLW: http://windowslivewriter.spaces.live.com/
    Code Snippet Add in: http://lvildosola.blogspot.com/2007/02/code-snippet-plugin-for-windows-live.html

    Comment by OmegaMan — 5/15/2007 @ 12:51 pm

  25. Just use a combination of both <code> and &lt; &gt;

    For example:

    <link rel='archives' title='May 2007' href='http://wordlog.com/archives/2007/05/' />

    Praying this works as I press the Submit Comment button ;)

    Comment by Azmeen — 5/16/2007 @ 9:34 am

  26. [...] Cool. P.S. Should have known that, to display code in wordress, should have used htmlentities.Thanks. Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]

    Pingback by trk’s weblog / Online Spell Checker... — 6/13/2007 @ 9:23 am

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

 

Powered by WordPress

eXTReMe Tracker