ghost修改代码高亮和字体

今天开始用ghost，发现默认主题（casper）并没有代码高亮功能，用起来相当不爽。google并看了看ghost主题的代码，找到了解决方法。

在后台找到Code Injection，Blog Header和Blog Footer中分别加入一些代码即可。

修改方法

Blog Header:

<!--  加载highlight.js样式 -->
<link href="//cdn.bootcss.com/highlight.js/9.9.0/styles/tomorrow-night-eighties.min.css" rel="stylesheet">
<!--  加载google字体 -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono">
<!--  设置字体 -->
<style>
body,p,code,h1, h2, h3, h4, h5, h6,.hljs {
    font-family: 'Droid Sans Mono', monospace;
}
.hljs {
    font-size: 0.8em
}
</style>

Blog Footer:

1
2
3

<!--  执行highlight.js -->
<script src="//cdn.bootcss.com/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

原理

查看主题文件themes/casper/default.hbs，可以看到ghost_head和ghost_foot。我们在上面设置Code Injection后就会替换相应内容，从而改变页面显示。

<!DOCTYPE html>
<html>
<head>
    <!-- 隐藏掉无关信息 -->
    {{!-- Ghost outputs important style and meta data with this tag --}}
    {{ghost_head}}
</head>
<body class="{{body_class}} nav-closed">
    {{ghost_foot}}
</body>
</html>