     # refer: http://stackoverflow.com/questions/18952623/synchronized-scrolling-using-jquery
     # ------------------------------------------------------------------------------------------------------------------
     $scope.aceLoaded = (editor) =>
-        editor.setShowPrintMargin(false)
-        # sync scroll: md -> html
-        editor_scroll_handler = (scroll) =>
-            percentage = scroll / (editor.session.getScreenLength() * \
-                editor.renderer.lineHeight - ($(editor.renderer.getContainerElement()).height()))
-            if percentage > 1 or percentage < 0 then return
-            percentage = Math.floor(percentage * 1000) / 1000;
-            # detach other's scroll handler first
-            $html_div.off('scroll', html_scroll_handler)
-            md_html_div = $html_div.get(0)
-            md_html_div.scrollTop = percentage * (md_html_div.scrollHeight - md_html_div.offsetHeight)
-            # re-attach other's scroll handler at the end, with some delay
-            setTimeout (-> $html_div.scroll(html_scroll_handler)), 10
-        editor.session.on('changeScrollTop', editor_scroll_handler)
-
-        # sync scroll: html -> md
-        html_scroll_handler = (e) =>
-            md_html_div = $html_div.get(0)
-            percentage = md_html_div.scrollTop / (md_html_div.scrollHeight - md_html_div.offsetHeight)
-            if percentage > 1 or percentage < 0 then return
-            percentage = Math.floor(percentage * 1000) / 1000;
-            # detach other's scroll handler first
-            editor.getSession().removeListener('changeScrollTop', editor_scroll_handler);
-            editor.session.setScrollTop((editor.session.getScreenLength() * \
-                editor.renderer.lineHeight - $(editor.renderer.getContainerElement()).height()) * percentage)
-            # re-attach other's scroll handler at the end, with some delay
-            setTimeout (-> editor.session.on('changeScrollTop', editor_scroll_handler)), 20
-        $html_div.scroll(html_scroll_handler)
+        scrollSyncor.syncScroll(editor, $html_div)
 
     $scope.aceChanged = (e) ->
         $html_div = $("#md_html_div")

    # ------------------------------------------------------------------------------------------------------------------
    vm.save_note = ->
        # fill the hidden html div
        $html_div_hidden = $("#md_html_div_hidden")

        # highlight code & style Latex
        $html_div_hidden.find('pre code').each (i, block) ->
            hljs.highlightBlock(block)
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, $html_div_hidden.get(0)])

        # remove all script tags
        $html_div_hidden.find("script").remove()

        # add inline style
        # refer: https://github.com/Karl33to/jquery.inlineStyler

angular.module('markever', ['ui.ace'])

angular.module('markever')
.controller "EditorController", ['$scope','$window', '$http', '$sce', 'enmlRenderer', 'scrollSyncor'
($scope, $window, $http, $sce, enmlRenderer, scrollSyncor) ->
    # ------------------------------------------------------------------------------------------------------------------
    # define frequently-used jquery elements
    # ------------------------------------------------------------------------------------------------------------------
