Automating the pasting of code in blog posts

8 years ago

So, just before Christmas, I switched to using a client-side library to highlight the code in my blog posts. The library I chose was Prism JS, and it works by marrying up some JavaScript and CSS  to specially decorated pre and code elements so that their content (the code itself) is highlighted nicely.

Specially decorated? Yep, it looks like this in the HTML:

<div class="jmbcodeblock">
    <pre><code class="language-foo">
_the code to be shown highlighted_ 
    </code></pre>
</div>

where ‘foo’ is the language of the code to be highlighted. The outer named div is strictly not part of Prism, but is there to help with styling the result for my blog’s theme.

The big problem is that just pasting code into the Windows Live Writer editor will produce a bunch of paragraphs, so you have to switch over to the Source window, paste the code, then add the pre- and post-markup as shown, and then switch back to the normal editor. Not an insurmountable manual process by any means, but you do have to remember what the language values are (for example, to paste HTML code like that above, the language is ‘markup’).

The answer then is to write a small plug-in that does all that automatically without worry. Which is what I did this afternoon, and posted it as a repository to GitHub (WLWCodePaster). Because ostensibly I’m supposed to be switching to Open Live Writer, I posted that version to GitHub too (OLWCodePaster).

Enjoy!

Album cover for Kylie MinogueNow playing:
Minogue, Kylie - Automatic love
(from Kylie Minogue)


Rusted clock - banner

Sat 14-Jan-2017 7:20 PM Blog / tags: css javascript code highlight
Loading similar posts...   Loading links to posts on similar topics...

1 Response

avatar
#1 Meziantou said...
17-Jan-17 6:02 AM

I did the same kind of plugin a few years ago for Windows Live Writer. The code is also available on GitHub (https://github.com/meziantou/Meziantou.WLW.CodeEditor).

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

  •  Emphasize with italics: surround word with underscores _emphasis_
  •  Emphasize strongly: surround word with double-asterisks **strong**
  •  Link: surround text with square brackets, url with parentheses [text](url)
  •  Inline code: surround text with backticks `IEnumerable`
  •  Unordered list: start each line with an asterisk, space * an item
  •  Ordered list: start each line with a digit, period, space 1. an item
  •  Insert code block: start each line with four spaces
  •  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...
Preview of response