我正在尝试将这些库与 AngularJS 结合起来:
- ng-摊牌
- 角高光js
ng-showdown 工作正常,highlightjs 适用于静态模型,我想要实现的是动态更改标记语法高亮,以便再次应用动态模型 hljs 上的每个更改。
这个 plunker 显示了这个问题:https ://jsfiddle.net/062m5wzb/1/
HTML:
<div ng-app="myApp" ng-controller="Ctrl as vm">
{{name}}
<textarea ng-model="vm.notworking"
style="width: 50%; height: 30vh;">
</textarea>
<br> Dynamic
<p markdown-to-html="vm.notworking" hljs hljs-source="vm.notworking"></p>
Static
<p markdown-to-html="vm.working"></p>
</div>
JavaScript:
hljs.initHighlightingOnLoad();
var app = angular.module('myApp', ['ngSanitize', 'ng-showdown', 'hljs'])
.controller("Ctrl", function($scope) {
var vm = this;
vm.working =
`
\`\`\`javascript
function hello() {
alert('Hello world!');
}
\`\`\`
`;
vm.notworking =
`
\`\`\`javascript
function hello() {
alert('Hello world!');
}
\`\`\`
`;
});
我通过了 angular-highlightjs 的文档,但似乎没有什么对我有用。
https://github.com/pc035860/angular-highlightjs
我想我在重新应用 highlightjs 时错过了 on change 事件。