HEXO下的语法高亮拓展修改

本文主要记录一下，修改Hexo下语法高亮的各种用法，修改后的语法可以快速设置多种样式，主要功能如下：

设置语法语言
设置标题
是否显示行号
设置起始行号
选定行号标记
设置代码添加删除标记（2017年11月26日新增）
设置跳转超级链接

格式总览

主要功能如上，都是自带功能，更重要的是只是想在``` ``` 后直接实现设置，不想使用{ % ... % }去实现这些功能。

格式

```[language] [:title] [lang:language] [line_number:(true|false)] [first_line:number] [mark:#,#-#] [diff:true|false] [url:http...]
code snippet
```

自定义
```
```
code snippet
```
```
效果

使用方法

设置语法语言

格式

``` language             //注意 语言类型 需要写在其他定义之前
code snippet
```

样例

```java
public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}
```

效果

public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}

设置标题

格式

``` [:words|:path|:url|:ftp|:ip/path]             //以英文冒号开头即可
code snippet 
```

样例

``` :file:///D:/zhuzhu xia/HelloWorldClass.java   //如果没有定义语言，词后缀可辅助
public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}
```

效果

file:///D:/zhuzhu xia/HelloWorldClass.java

public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}

是否显示行号

格式

``` [line_number:(true|false)]             //默认true
code snippet
```

样例

```java line_number:false   
public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}
```

效果

public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}

设置起始行号

格式

1
2
3

``` [first_line:number]             //默认
code snippet
```

样例

```java first_line:22   
public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}
```

效果

public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}

选定行号标记

格式

``` [mark:#,#-#]             //#行号，#-#行号范围
code snippet
```

样例

```java mark:2,4,8,10-14,18   
public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
    }
}
```

效果

public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
        System.Out.printl("Hello World");
    }
}

设置代码添加删除标记

格式
```
``` [diff:true|false]   
code snippet
```
```

样例

```js diff:true   
'use struct';
-var name = 'zhu'
+var name = 'zhuzhuxia';
function sayHello(){
-    alert(name);
+    console.log(name);
}
```

效果

'use struct';
var name = 'zhu'
var name = 'zhuzhuxia';
function sayHello(){
    alert(name);
    console.log(name);
}

还有更惊喜的功能，你点击左上角 复制 按钮，粘贴出去试试看！只会复制出最新代码哦。

设置跳转超级链接

格式

``` [url:http... download|下载]  //url:http 开头，无download则跳转链接，有则下载内容
code snippet
```

样例

``` :需要标题 url:http://zhuzhuyule.com/images/avatar.png download
这里会下载我的头像！
```

效果
需要标题 download
```
1
```
```
这里会下载我的头像！
```

修改代码

如果需要实现以上功能，需要更改 ./node_modules/目录下插件：

 node_module 
|--hexo
|  |--lib
|     |--plugins
|        |--filter
|           |--before_post_render
|              |--backtick_code_block.js 
|
|--hexo-util
|  |--lib
|     |--highlight.js

覆盖以上文件即可，详细不在这里描述了。

在添加样式文件即可：

 themes 
|--next
|  |--source
|     |--css
|        |--_custom
|           |--highlight.styl 
|           |--custom.styl      //感谢 @maoshengyang 提醒，还需要添加文件引用：@import highlight;

custom.styl中添加样式文件引用：

custom.styl

@import highlight;

theme.styl中直接添加颜色，可以自己调整颜色（放在这里好控制管理皮肤）：

.\themes\next\source\css\_common\components\highlight\theme.styl

$highlight-diffdeletion = #c7ffd7
$highlight-diffaddition = #ffd3d8

也可以这样，这是我的自己使用的皮肤配色：

.\themes\next\source\css\_common\components\highlight\theme.styl

if $highlight_theme == "custom light"
  $highlight-figcaptionBK   = #eee
  $highlight-figcaptionFont = #777
  $highlight-background   = #f8f8f8
  $highlight-emphasisBK   = #ffffff
  $highlight-emphasisFont = #111
  $highlight-current-line = #efefef
  $highlight-selection    = #d6d6d6
  $highlight-foreground   = #4d4d4c
  $highlight-comment      = #6eb55e
  $highlight-red          = #c82829
  $highlight-orange       = #f5871f
  $highlight-yellow       = #eab700
  $highlight-green        = #718c00
  $highlight-aqua         = #3e999f
  $highlight-blue         = #4271ae
  $highlight-purple       = #1212a0
  $highlight-diffdeletion = #c7ffd7
  $highlight-diffaddition = #ffd3d8
  $highlight-gutter       = {
    color: #5c5c5c,
    bg-color: #e7e5dc,
    right-border-color: #aed581
  }