Markdown and Code Highlighting

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 almost¹, but not quite², solutions on Stackoverflow

routes.clj

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

mango.js:

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

blog_article.html

  <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↩