ghost代码高亮

介绍

Highlightjs是高亮js插件，支持对各种语言编写的代码添加语法高亮样式
官网

使用

代码自定义下载 下载地址

1.将highlight放在 主题\assets目录下

2.打开主题文件夹下的default.hbs文件进行编辑，添加css和js

<link rel="stylesheet" type="text/css" href="{{asset "/highlight/styles/你需要的样式.css"}}" />  

样式选择 官方demo

例如：

<link rel="stylesheet" type="text/css" href="{{asset "/highlight/styles/rainbow.css"}}" />  

3.找到{{! The main JavaScript file for Casper }}，在下面添加：

 <script type="text/javascript" src="{{asset "/highlight/highlight.pack.js"}}"></script>
 <script type="text/javascript">hljs.initHighlightingOnLoad();</script>

添加行数

Highlightjs默认是不包括显示代码行号（Line Number）这一特性的,需要js和css实现

1.在hljs.initHighlightingOnLoad后面添加script

  $("code").each(function(){
      $(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");
    });
</script>  

2.修改/highlight/styles/你需要的样式.css，例如rainbow.css

/*

Style with support for rainbow parens

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #333;
  color: #d1d9e1;
}

.hljs {
    border: 0;
    font-family: "Consulas", "Courier New", Courier, mono, serif;
    font-size: 14px;
    display: block;
    padding: 1px;
    margin: 0;
    width: 100%;
    font-weight: 200;
    color: #d1d9e1;
    white-space: pre-wrap
}


.hljs-comment,
.hljs-quote {
  color: #969896;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type,
.hljs-addition {
  color: #cc99cc;
}

.hljs-number,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #f99157;
}

.hljs-string,
.hljs-doctag,
.hljs-regexp {
  color: #8abeb7;
}

.hljs-title,
.hljs-name,
.hljs-section,
.hljs-built_in {
  color: #b5bd68;
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-class .hljs-title {
   color: #ffcc66;
}

.hljs-section,
.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-link {
  color: #f99157;
}

.hljs-deletion {
  color: #dc322f;
}

.hljs-formula {
  background: #eee8d5;
}

.hljs-attr,
.hljs-attribute {
  color: #81a2be;
}

.hljs-emphasis {
  font-style: italic;
}



.hljs ul {
    list-style: decimal;
    background-color: #474949;
    margin: 0px 0px 0 40px !important;
    padding: 0px;
}
.hljs ul li {
    list-style: decimal-leading-zero;
    border-left: 1px solid #ddd !important;
    background: #474949;
    padding: 5px!important;
    margin: 0 !important;
    line-height: 14px;
    word-break: break-all;
    word-wrap: break-word;
}
.hljs ul li:nth-of-type(even) {
    background-color: #474949;
    color: inherit;
}

样式有待修改，超过1000行就bug了