Markdown and Code Highlighting

Adding Markdown and Code Highlighting features to my blog

I've spent a little time this evening adding support for markdown by integrating markdown-clj

Quickly after adding that, I decided I wanted code highlighting and integrated highlightjs.

I had to figure out some Angular jiggery-pokery to apply the highlighting after asynchronously fetching the content and came up with this directive after browsing a few almost1, but not quite2, solutions on Stackoverflow


(defn hydrate-content
  "Hydrates the content for an article."
  (let [content (:content article)]
    (if (not (nil? content))
      (assoc article :rendered-content (md/md-to-html-string content :footnotes? true))


    .directive('highlight',  function () {
        return {
            replace: false,
            scope: {
                'ngBindHtml': '='
            link: function (scope, element, attrs) {
                scope.$watch('ngBindHtml', function(newValue, oldValue) {
                    var items = element[0].querySelectorAll('code,pre');
                        angular.forEach(items, function (item) {


  <p class="article-content" highlight ng-bind-html="article.renderedContent"></p>

  1. Dynamic Syntax Highlighting with AngularJS and Highlight.js
  2. Angular JS: Detect if ng-bind-html finished loading then highlight code syntax