Although WordPress fully supports Markdown via the JetPack plugin and Markdown supports code blocks there are occasions where the encoding gets thrown off on posting and has to be edited before making a post live.

Chris Aldrich linked to a piece on the WordPress.com support pages that details the [code] shortcode which, with a language parameter, preserves formatting and even adds syntax highlighting within posts and pages.

This is native to WordPress.com but a plugin is available for self-hosted blogs which I may start using.

Compare the two blocks below:

function make_post($post){
    $post = [
        'title' => $title,
        'content' => $body,
        'status' => $status,
        'format' => $format,
    ];
    return $post;
}
function make_post($post){
  $post = [
    'title' => $title,
    'content' => $body,
    'status' => $status,
    'format' => $format,
  ];
  return $post;
}

The first is the standard Markdown rendering (I had to correct the greater than symbols having been converted to >) and the second uses the plugin.

Pretty cool!

In Drafts I can create an action that inserts the shortcode after prompting for the language I want and I'll look at creating an Alfred workflow to do the same thing.

(You’ll need to visit the actual post to see the difference as you won’t get the effect via RSS.)

  1. devilgate says: #
    @colinwalker I saw this yesterday in M.B, and it looks fine. Today I saw it in my feed reader (ReadKit via Feedly) and the two code blocks are the wrong way round. Nice colourful one first, then old black and white.

    Hard to imagine what could have caused that, but I thought you should know.

    1. Colin Walker says: #
      I was going to mention this, I noticed the same thing in FeedBin. I think the Markdown code block is being recognised and certain feed readers include syntax highlighting whereas the second version is stored as plain text where the formatting is retained and the plugin does the work on site at the time of rendering. Because it’s plain text it isn’t recognised as a code block by the readers.
    2. Colin Walker says: #
      And something about the browser at work stops the plugin from rendering so I just see two grey boxes.
  2. Nitin says: #
    heh, saw this on the RSS feed and for a moment, was like, “but there’s no difference!”

    Then read till the end and came here to see it 🙂

    1. Colin Walker says: #
      Yeah, readers tend to vary in how they display the first one but the [code] blocks just seem to be blocks of text so not treated in any special way away from the site.