Расширение Showlight Highlightjs
Я пытаюсь написать редактор уценки в AngularJS. Я использую angular-markdown (оболочку AngularJS Showdown) для анализа уценки, и я хотел бы выделить фрагменты кода, используя highlightjs. Я написал следующее расширение Showdown:
/* global
hljs,
Showdown
*/
(function() {
'use strict';
Showdown.extensions.hljs = function(converter) {
return [
{
type: 'lang',
filter: function(text) {
return text;
var m = /([`]{3}[\S\s]*[`]{3})/gm.exec(text);
if(!m) {
return text;
}
for(var i in m) {
if(isNaN(i)) {
continue
}
var match = m[i];
var lang = match.replace(
/([`]{3})([\s\S]*)(\n){1}([\s\S]*)([`]{3})/gm,
'$2');
var code = match.replace(
/([`]{3})([\S\n]*)(\n){1}([\s\S]*)([`]{3})/gm,
'$4');
var hl;
try {
var hl = hljs.highlight(lang, code);
} catch(e) {
var hl = hljs.highlightAuto(code);
}
text = text.replace(match, '<pre>' + hl.value + '</pre>');
}
return text;
}
}
];
};
}());
Это пока не работает идеально. Текст, который идет после первого фрагмента кода, также вложен и выделен.
Я создал plunkr здесь. Соответствующий код находится в js/angular-markdown-hljs.js
,
Мой вопрос: как я могу заставить это работать?
1 ответ
Создать расширение для подсветки кода с помощью https://highlightjs.org/ было бы довольно просто с помощью расширенного движка RegExp нового шоудауна.
Вот пример кода для последней разборки.
showdown.extension('codehighlight', function() {
function htmlunencode(text) {
return (
text
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
);
}
return [
{
type: 'output',
filter: function (text, converter, options) {
// use new shodown's regexp engine to conditionally parse codeblocks
var left = '<pre><code\\b[^>]*>',
right = '</code></pre>',
flags = 'g',
replacement = function (wholeMatch, match, left, right) {
// unescape match to prevent double escaping
match = htmlunencode(match);
return left + hljs.highlightAuto(match).value + right;
};
return showdown.helper.replaceRecursiveRegExp(text, replacement, left, right, flags);
}
}
];
});