不止是 Markdown 就是了。記錄一下,供查詢用。
來源3
一般常用
1234567
# 標題(有分隔線)## 標題>引言- 清單- 清單1. 有序清單2. 有序清單
連結
或
12
This is [an example] [id] reference-style link.[id]: http://example.com/ "Optional Title Here"
**粗體**
*斜線*
~刪除線~
行內的`程式碼`
圖片
1

插入影片
作者4
123
<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
123456
- [ ] Eat- [x] Code- [x] HTML- [x] CSS- [x] JavaScript- [ ] Sleep
效果
- Eat
- Code
- HTML
- CSS
- JavaScript
- Sleep
內文跳轉
來源1
12
# 第一章## 第一節
相對應的跳轉方式就是
置中(Next)
來源2
或
Bootstrap Callout(Next)
來源2
效果
內文
class_name
可以是以下值
default
primary
success
info
warning
danger
代碼折疊
來源6
效果
something you want to fold, include code block.
123
{% fold 點擊顯/隱內容 %}something you want to fold, include code block.{% endfold %}
不渲染
12
{% raw %}{% endraw %}
\的用法需在符號之前
代碼塊語法
作者7
12
```[language] [:title] [lang:language] [line_number:(true|false)] [first_line:number] [mark:#,#-#] [diff:true|false] [url:http...]code snippet
本文主要記錄一下,修改 Hexo 下語法高亮的各種用法,修改後的語法可以快速設置多種樣式,主要功能如下:
設置語法語言
設置標題
是否顯示行號
設置起始行號
選定行號標記
設置代碼添加刪除標記 (2017 年 11 月 26 日新增)
設置跳轉超級鏈接
格式總覽
主要功能如上,都是自帶功能,更重要的是只是想在
自定義
12
:编辑这里试一试code snippet
效果
編輯這裡試一試
1
not find language !
使用方法
設置語法語言
格式
1
code snippet
樣例
12345
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”);
}
}
設置標題
格式
1
code snippet
樣例
12345
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”);
}
}
是否顯示行號
格式
1
code snippet
樣例
12345
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
樣例
12345
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”);
}
}
選定行號標記
格式
1
code snippet
樣例
1234567891011121314151617181920
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
樣例
1234567
'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);
}
還有更驚喜的功能,你點擊左上角 複製 按鈕,粘貼出去試試看!只會複製出最新代碼哦。
設置跳轉超級鏈接
格式
1
code snippet
樣例
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
}
因原文已失,故做搬運…
`