Hexo編緝方式筆記

發表於 | 更新於：
文章字數： 7.1k | 閱讀時間≈ 0:36

不止是 Markdown 就是了。記錄一下，供查詢用。

來源3

一般常用

1
2
3
4
5
6
7
# 標題(有分隔線)
## 標題
>引言
- 清單
- 清單
1. 有序清單
2. 有序清單

連結

1
[an example](http://example.com/ "Title")

或

1
2
This is [an example] [id] reference-style link.
[id]: http://example.com/  "Optional Title Here"

**粗體**
*斜線*
~刪除線~

行內的`程式碼`

圖片

1
![Alt text](/path/to/img.jpg "Optional title")

插入影片

作者4

1
2
3
<script src="/js/youtube-autoresizer.js"></script>
<iframe width="640" height="360" src="https://www.youtube.com/embed/HfElOZSEqn4" frameborder="0" allowfullscreen></iframe>

表格

| 控制分列，- 控制分行，: 控制對齊方式。

| Item | Value | Qty |
| :——- | ——–: | :—: |
| Computer | 1600 USD | 5 |
| Phone | 12 USD | 12 |
| Pipe | 1 USD | 234 |

工作清單

作者5

1
2
3
4
5
6
- [ ] Eat
- [x] Code
  - [x] HTML
  - [x] CSS
  - [x] JavaScript
- [ ] Sleep

效果

  • Eat
  • Code
    • HTML
    • CSS
    • JavaScript
  • Sleep

內文跳轉

來源1

1
2
# 第一章
## 第一節

相對應的跳轉方式就是

1
2
[第一章](#第一章)
[第一節](#第一節)

置中(Next)

來源2

1
{% centerquote %}內文{% endcenterquote %}

或

1
{% cq %} 內文 {% endcq %}

Bootstrap Callout(Next)

來源2

1
{% note class_name %} 內文 {% endnote %}

效果

內文

class_name 可以是以下值

default
primary
success
info
warning
danger

代碼折疊

來源6
效果

點擊顯/隱內容

something you want to fold, include code block.

1
2
3
{% fold 點擊顯/隱內容 %}
something you want to fold, include code block.
{% endfold %}

不渲染

1
2
{% raw %}
{% endraw %}

\的用法需在符號之前

代碼塊語法

作者7

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

本文主要記錄一下，修改 Hexo 下語法高亮的各種用法，修改後的語法可以快速設置多種樣式，主要功能如下：

設置語法語言
設置標題
是否顯示行號
設置起始行號
選定行號標記
設置代碼添加刪除標記 （2017 年 11 月 26 日新增）
設置跳轉超級鏈接
格式總覽
主要功能如上，都是自帶功能，更重要的是只是想在

後直接實現設置，不想使用{ % ... % }去實現這些功能。
1
2
3
4
5
格式
```[language] [:title] [lang:language] [line_number:(true|false)] [first_line:number] [mark:#,#-#] [diff:true|false] [url:http...]
code snippet

自定義

1
2
:编辑这里试一试
code snippet

效果

編輯這裡試一試
1
not find language !
使用方法
設置語法語言
格式

語言類型 需要寫在其他定義之前
1
code snippet

樣例

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

效果

1
2
3
4
5
public Class HelloWorldClass(){
public static void main(String[] args){
System.Out.printl(“Hello World”);
}
}
設置標題
格式

link
1
code snippet

樣例

xia/HelloWorldClass.javalink
1
2
3
4
5
public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}

效果

file:///D:/zhuzhu xia/HelloWorldClass.java
1
2
3
4
5
public Class HelloWorldClass(){
public static void main(String[] args){
System.Out.printl(“Hello World”);
}
}
是否顯示行號
格式

link
1
code snippet

樣例

line_number:false 
1
2
3
4
5
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

link
1
code snippet

樣例

first_line:22 
1
2
3
4
5
public Class HelloWorldClass(){
    public static void main(String[] args){
        System.Out.printl("Hello World");
    }
}

效果

22
23
24
25
26
public Class HelloWorldClass(){
public static void main(String[] args){
System.Out.printl(“Hello World”);
}
}
選定行號標記
格式

link
1
code snippet

樣例

mark:2,4,8,10-14,18 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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");
    }
}

效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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”);
}
}
設置代碼添加刪除標記
格式

1
code snippet

樣例

diff:true 
1
2
3
4
5
6
7
'use struct';
-var name = 'zhu'
+var name = 'zhuzhuxia';
function sayHello(){
-    alert(name);
+    console.log(name);
}

效果

1
2
3
4
5
6
7
8
9
‘use struct’;
var name = ‘zhu’
var name = ‘zhuzhuxia’;
function sayHello(){
alert(name);
console.log(name);
}
還有更驚喜的功能，你點擊左上角 複製 按鈕，粘貼出去試試看！只會複製出最新代碼哦。

設置跳轉超級鏈接
格式

download|下載]開頭，無download則跳轉鏈接，有則下載內容
1
code snippet

樣例

url:http://zhuzhuyule.com/images/avatar.png download
1
這裡會下載我的頭像！

效果

需要標題 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
}

因原文已失，故做搬運…

`

------ THE END ------