如果你是一名程序猴子🐒并且善于在hexo上写博客的话,我相信你肯定不少接触markdown代码块语法,但普通的markdown代码块语法提供的功能是有限的,如果你想在代码块标题栏或者内部加入一点新鲜的点缀,比如在标题栏上显示文件名、文件路径、下载地址等等;在代码内部根据行首的+
或者-
进行diff高亮,那么你是否无从下手?哈哈😄 …废话不多说!下面就为您提供方案。
正常markdown代码块的写法是这样的:
``` [language]
code snippet
```
code snippet
```
而本文介绍的hexo代码块进阶写法是如下格式的:
``` [language] [title] [url] [link text]
code snippet
```
code snippet
```
各参数意义如下:
langugae:语言名称,引导渲染引擎正确解析并高亮显示关键字
title:代码块标题,将会显示在左上角
url:链接地址,如果没有指定 link text 则会在右上角显示 link
link text:链接名称,指定 url 后有效,将会显示在右上角url 必须为有效链接地址才会以链接的形式显示在右上角,否则将作为标题显示在左上角。以 url 为分界,左侧除了第一个单词会被解析为 language,其他所有单词都会被解析为 title,而右侧的所有单词都会被解析为 link text。
¶进阶一、langugae+title
案例:
```java /root/Demo.java
public class Demo{}
```
public class Demo{}
```
效果如下:
1 | public class Demo{} |
¶进阶二、langugae + title + url + text
案例:
```java Demo类 https://www.qcmoke.site/ 我的主页
public class Demo{}
```
效果如下:
public class Demo{}
```
1 | public class Demo{} |
¶进阶三、langugae + url + text
如果不想填写 title,可以在 language 和 url 之间添加至少三个空格。
案例:
```java https://www.qcmoke.site/
public class Demo{}
```
public class Demo{}
```
效果如下:
1 | public class Demo{} |
¶进阶四、langugae + url
案例:
```java https://www.qcmoke.site/
public class Demo{}
```
public class Demo{}
```
没有text的话,默认显示的名称是link
效果如下:
1 | public class Demo{} |
¶进阶五、diff高亮
只需在 [language] 这写 diff
,然后在相应代码前面加上 -
和 +
就行了。
案例:
```diff
- public static void main(String[] args){
-
- }
+ public static void main(String[] args){
+
+ }
```
- public static void main(String[] args){
-
- }
+ public static void main(String[] args){
+
+ }
```
效果如下:
1 | public class Demo{ |
💁♂ 如果diff没有显示,尝试编辑站点配置文件配置文件 /myblog/_config.yml
,设置自动高亮试试(反正我的不设置也能用):
1 | highlight: |