Here is a quick test of some Angular-esque HTML/CSS/JS pasted into the middle of some Markdown, that’s going to be runthrough Github’s Pages/Jekyll pipeline to become HTML:
Taking Ashish Singh’s calculator example, and inliningit into a gh-pages blog entry (this page) you end up with:
Angular-Markdown-Editor AngularJS (previous version) Dependencies Nice to have Dependencies Demo page Installation NPM Package Modify the angular.json file When using ngx-markdown and/or Prism.js Import Module Input attributes Global Options Event Hooks 1. Last Saturday, I gave yet another talk on getting started with AngularJS and with good success. I found myself wondering though, along the way, why is it that we keep needing these “getting started.
Ashish’s code was changed a little bit (mostly refactored), and is now contained it in a single <div> element:
Markdown Angular 8
Inserted Angular components can’t use {{ in a Jekyll blog because of the latter’s dependence onliquid (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 })}.
Markdown Angular Template
Note that the div in question was not actually in the markdown source, it’s pulled in at Jekyll’s build time. It isreally in its own source file for fast development, and jekyll has an incantation to bring it in:
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) straightfrom 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 Angulardoes its work. See here:
That copies into a place in the DOM that’s ready to be pretty printed in the browser:
Summary: Embedding Angular apps in Jekyll-Markdown blog entries works fine after some tweaks, and ifyou can contain it in a single HTML element.
Comments are closed.