Paul Hammant's Blog: Angular Embedded in Jekyll-Markdown Blog Entries

Here is a quick test of some Angular-esque HTML/CSS/JS pasted into the middle of some Markdown, that’s going to be run through Github’s Pages/Jekyll pipeline to become HTML:

Taking Ashish Singh’s calculator example, and inlining it into a gh-pages blog entry (this page) you end up with:

Ashish’s code was changed a little bit (mostly refactored), and is now contained it in a single <div> element:

Inserted Angular components can’t use {᠎{ in a Jekyll blog because of the latter’s dependence on liquid (a templating technology), so you have to use <span ng-bind="op_field"/> instead of {᠎{op_field}᠎} and ng-model="field" instead of value="{᠎{field}᠎}" where appropriate. That is slightly less elegant.

Alternatively you can change {᠎{ to something else - that is what I’ve done, here, to {({ via $interpolateProvider. Similarly, }᠎} to })}.

Note that the div in question was not actually in the markdown source, it’s pulled in at Jekyll’s build time. It is really in its own source file for fast development, and jekyll has an incantation to bring it in:

{% include_relative demoSrc/calc.html %}

Note demoSrc is in my _posts folder.

Fast development means I can load it into Chrome, with only the <div> elements (no html, no body tags) straight from the file system (not over http).

I also have the example’s source shown in this blog entry too. I’m copying that straight from the DOM before Angular does its work. See here:

<script type="text/javascript">
$(document).ready(function() {
    document.getElementById("source").innerHTML = document.getElementById("example").outerHTML.
    replace(new RegExp('<', 'g'), '&lt;').
    replace(new RegExp('>', 'g'), '&gt;');
});
</script>

That copies into a place in the DOM that’s ready to be pretty printed in the browser:

<div>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/google/code-prettify/master/styles/desert.css"/>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<pre id="source" class="prettyprint lang-html lang-css">
</pre>
</div>

Summary: Embedding Angular apps in Jekyll-Markdown blog entries works fine after some tweaks, and if you can contain it in a single HTML element.