It's way harder than it needs to be to publish syntax-highlighted HTML code snippets to Blogger. Here's the process I've gone through so far to get Blogger to behave.
Okay Idea: highlight.js
There's highlight.js
which looks for <code>
blocks and colors them on the client side. It works well for Python and Javascript, but I also want to publish HTML snippets, like this:
<style>
.blue {
background: #00f;
}
</style>
It's very tedious manually turning all the <
and >
into <
and >
. It was tedious enough doing it for that sentence, let alone a 20 line chunk of HTML. There must be a better way.
Bad Idea: Escape in Javascript
I toyed with escaping it in Javascript like this:
var codes = d3.selectAll('code')[0];
codes.each(function(tag) {
tag.innerHTML = tag.innerHTML
.replace(/>/g, '>')
.replace(/</g, '<');
});
This is bad because any script
tags would actually be executed.
Getting Warmer: Google API, Jinja and Pygments
Then I remembered that Google provides an API for Blogger. I'd used it once long ago, but didn't really have a need for it. Now I do! I followed this Python reference to make a terribly-written, wonderfully-functional script that:
- Uses Pygments to highlight code snippets using a
- Custom Jinja extension to
- Authenticate and post to Blogger
Annoyances
The script in its current form is annoying for a few reasons:
- Blogger replaces all newlines with
<br />
tags, forcing the script to remove all superfluous newlines before submitting (while maintaining newlines in<pre>
tags). - My Jinja extension does well for code blocks, but doesn't work for inline code snippets.
- Mostly because of the newline problem, I have to write my posts in HTML... which is good and bad. It's good because I know what HTML will be generated. It's bad because it's not as fun to write as say Markdown or ReST.
Help
Does anyone else have a better method for posting syntax-highlighted, escaped HTML snippets to Blogger?
keep updating UI online course
ReplyDelete