Replace marked.js with markdown-it.js

The markdown parser used in StoryBoard (marked.js) is buggy and
mostly unmaintained. This commit replaces it with a better library
which is actually maintained.

There is a small change to functionality incurred with this change,
we no longer automatically attempt to highlight every code block by
guessing the language. Instead only fenced code blocks are
highlighted, and then only if the language is specified. For example:

    ``` python
    def foo():
        return 'foo'
    ```

Change-Id: I8ee562e3e97ab6f0d09a21c27907d1a0959aceb1
This commit is contained in:
Adam Coldrick 2017-11-08 21:59:54 +00:00
parent 09332833aa
commit 980e5d3ec3
4 changed files with 15 additions and 11 deletions

View File

@ -14,7 +14,7 @@
"angular-moment": "0.9.0",
"angular-cache": "3.2.5",
"angularjs-viewhead": "0.0.1",
"marked": "0.3.5",
"markdown-it": "8.4.0",
"moment-timezone": "0.5.4",
"highlightjs": "9.1.0",
"ng-sortable": "1.3.1"

View File

@ -18,9 +18,19 @@
* Service for rendering text as markdown.
*/
angular.module('sb.services')
.directive('insertMarkdown', function($sanitize) {
.directive('insertMarkdown', function($sanitize, $window) {
'use strict';
var md = $window.markdownit({
html: true,
highlight: function(code, lang) {
if (lang && $window.hljs.getLanguage(lang)) {
return $window.hljs.highlight(lang, code, true).value;
}
return ''; // Don't highlight if no language specified
}
});
return {
restrict: 'E',
scope: {
@ -28,7 +38,8 @@ angular.module('sb.services')
},
link: function(scope, elem) {
scope.$watch('content', function(newVal) {
elem.html('<div>' + $sanitize(marked(newVal)) + '</div>');
var html = md.render(newVal);
elem.html('<div>' + $sanitize(html) + '</div>');
}, true);
}
};

View File

@ -63,13 +63,6 @@ angular.module('storyboard',
preferences: PreferenceResolver.resolvePreferences
}
});
// Set up syntax highlighting for the markdown parser
marked.setOptions({
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
})
.run(function ($log, $rootScope, $document) {
'use strict';

View File

@ -40,7 +40,7 @@
<script src="moment-timezone/builds/moment-timezone-with-data.min.js"></script>
<script src="angular-moment/angular-moment.js"></script>
<script src="angularjs-viewhead/angularjs-viewhead.js"></script>
<script src="marked/marked.min.js"></script>
<script src="markdown-it/dist/markdown-it.min.js"></script>
<script src="highlightjs/highlight.pack.js"></script>
<script src="ng-sortable/dist/ng-sortable.js"></script>
<!-- endbuild -->