Typora编辑的markdown文本post到Github Page时遇到的坑

代码高亮问题

修改_config.yml中highlight - enable

使用hexo在根目录有_config.yml文件,一般在#writing后有hexo自带的代码高亮开关:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
	#writing
...
highlight:
enable: true #这里
line_number: false
auto_detect: false
tab_replace:
​```
在初始化时这个默认为`true`,但当引用hexo theme时,有些主题会给出视觉效果更好的highlight并在readme中提示关闭系统自带。但倘若没有提示,默认情况下是应该开启的。所以在设置/更换主题时若没有出现预想的代码高亮效果可能是`enable`的状态不对。

被hexo用户广泛使用的next系列主题enable是需要为`true`才能正确使用其预先设定的Tomorrow theme代码高亮。

<!--more-->

## Typora和Github Page代码语言名称的语法区别

之所以会遇到这个问题,还有一个原因就是编写Unity 3D的脚本使用的是C#语言。C#有很多同义词,如C#,Csharp, cs. 在markdown语言中为了更好地表示高亮代码,通常会在代码块引用开头\`\`\`后+引用语言的名称。在Typora中选择栏里默认为“C#”,但原markdown文本无论是po到CSDN还是github page上都会多少出现一些语法的不兼容性,在CSDN上部分代码完全不出现代码块,在github page上只有**代码块而没有高亮**。

前者的解决方法主要是调整缩进和换行,其他博客中也有说过:[在Markdown里一个回车,不是分段而是换行,要两个回车,才是分段。](https://blog.csdn.net/felcon/article/details/45333077)

面对后者的问题,一般都是"\`\`\`"标注的代码块开头后面的语言名称写错了,比如Typora中写为C#,但对github page,发现应该写成Csharp才能有正确的高亮效果。

总结一下:

1. 没有出现代码块一般为排版问题,可以尝试调节缩进/换行。
2. 出现代码块而没有语法高亮,一般为代码块开头没有加入代码语言或者语言名称写法不对。

----

# 表格缩进

问题产生的背景是想在blog无序列表中的某一项下面插入表格,但却出现无法显示表格或下一分项自动变为代码块的问题。根据[这位大佬的博客](https://blog.csdn.net/felcon/article/details/45333077),原因为在Markdown里按下四个空格,就自动转入Code模式。因为设置列表层级较多,表格由于缩进的缘故,自动变成了代码块:

![表格因缩进变为代码块](https://github.com/Yuandi-Sherry/3DGameDesign/blob/master/Blog%E9%85%8D%E5%9B%BE/%E8%A1%A8%E6%A0%BC%E8%87%AA%E5%8A%A8%E4%BB%A3%E7%A0%81%E5%9D%97.PNG?raw=true)

或是因为下一分项和上一分项不连接,导致表格顶格处理后,下一分项又进入了自动代码块:

![表格顶格](https://github.com/Yuandi-Sherry/3DGameDesign/blob/master/Blog%E9%85%8D%E5%9B%BE/%E8%A1%A8%E6%A0%BC%E4%B8%8B%E4%B8%80%E5%88%86%E9%A1%B9%E8%87%AA%E5%8A%A8%E4%BB%A3%E7%A0%81%E5%9D%97.PNG?raw=true)

解决方案:用html代替markdown。另外,因为markdown本身是不支持缩进排版的,首行缩进也难以实现(如[这篇博客]()所述),html也可以很好的解决这方面问题。

![html写表格](https://github.com/Yuandi-Sherry/3DGameDesign/blob/master/Blog%E9%85%8D%E5%9B%BE/html%E4%BB%A3%E6%9B%BF.PNG?raw=true)

----

# 图片尺寸设置

markdown虽然能够完美支持流畅插入图片`![img](http://)`,但无法调节图片尺寸,根据[知乎提问](https://www.zhihu.com/question/23378396)的回答,亲测在markdown本身语法下添加`width`, `height`等属性的均(至少无法再我使用的hexo主题下)无法再github page上发挥作用。

解决方案:html(知乎表示hexo下可用,但其他地方依然有待考证)

```html
<img src="" width="50%" height="50%">

其中widthheight变为具体尺寸数值也是可以的。