换了一个新的页面模板，于是需要重新配置HTML template，否则博文中使用的markdown无法被正确显示在页面上。
幸亏谷歌的cached page还可以找到原本的解决方案，
<!-- 2016.03: customize the page to use
showdown.js (for markdown) and highlight.js (for code highlight),
also utilise AngularJS directive for parsing <div data-markdown>
-->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/showdown/1.3.0/showdown.min.js'></script>
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js'></script>
首先要添加几个脚本，包括
1. Showdown
用来将 Markdown 的脚本转换为 HTML。
2. Hightlight
用于高亮显示代码，不过这个功能貌似还没有怎么用到。
3. Angular (1.x)
如果不想要用像是 jQuer 这样的脚本来操作 DOM，可以依赖 Ng 的directive来自动识别 `markdown` attribute 直接替换 DOM 内的文本。
然后在末尾添加一段 `script` 脚本定义一个 Angular direcctive 来处理 `data-markdown`：
```javascript
hljs.configure({
tabReplace: ' ', // two spaces
languages: ['Java', 'Scala', 'Javascript']
});
angular.
module('mkdApp', []).
directive('markdown', function () {
var converter = new showdown.Converter();
return {
restrict: 'A',
link: function (scope, element, attrs) {
var htmlText = converter.makeHtml(element.text());
element.html(htmlText).find('pre code', function(codeElem) {
hljs.highlightBlock(codeElem);
});
}
};
});
```
最后，在页面的 container 节点，加上一个 `ng-app` attribute 以启用 Angular：
<div class='column-center-inner' ng-app='mkdApp'>
今天更新的时候换了 CDN 并用了较新版本的 JS/CSS，但是整体的 solution 还是一致的。
评论