Markdown语法tips | Ivan's blog

本文Markdown语法在typora中适用，其他未知

列表

断开两个列表的关联&调整缩进：在列表结构下按enter回车，会自动生成下一行的列表，如果按backspace删除键，序号会被删掉（或者是无序列表的小圆点）但缩进仍然存在，再按shift+tab，可以自动移到最左边，此时下面的文字与之前的列表没有关联了。在全角情况下按两个空格，就可以继续缩进。（之前踩过这样的坑，想生成两个互不相关的无序列表，结果发现其实是一个。采用如上的办法可以断开这两个无序列表的关联）

注意：这样做同时会有一个坑，上下列表序号乱了。

解决方法：

① 数字加英文句号标点 .  加空格 加文字
eg>
1. xxxxx
② 如果要添加二级或者其他代码块啊啥的，要记得在下一行中先敲一个[TAB]键然后再重复上面的步骤
eg>
1. xxxx
[tab]1. xxxx 
[tab] 代码块

参考 Markdown 有序列表多级列表序号错乱解决

有时候觉得都是1.2.3.不好看，采用 A.B.的方式，会发现文章中开头的 B. 和中间的 B. 产生了关联。建议：删除 “.”，可以用 A B 的方式来标序号

快捷键

加粗：ctrl+b
倾斜：ctrl+i
下划线：ctrl+u
删除线：alt+shift+5
引用：输入>之后输入空格
插入图片：直接拖动到指定位置即可或者ctrl+shift+i
代码块：ctrl+alt+f
插入链接：ctrl+k
无序列表：输入-或者+之后输入空格，如 “+ ”， “- ”
有序列表：输入数字+“.”之后输入空格，如 “1. ”，“2. ”
任务列表：-[空格]空格文字
标题：ctrl+数字
表格：ctrl+t
生成目录：[TOC]按回车
选中一整行：ctrl+l
选中单词：ctrl+d
选中相同格式的文字：ctrl+e
跳转到文章开头：ctrl+home
跳转到文章结尾：ctrl+end
搜索：ctrl+f
替换：ctrl+h

转自 Typora快捷键

插入图片

一、方式

相关内容请参考Ivan的另外一篇 [用hexo+GitHub搭建个人博客指南](https://ivanyang.coding.me/2018/07/25/%E7%94%A8hexo-GitHub%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%8C%87%E5%8D%97/#%E4%BA%8C%E3%80%81hexo%E5%8D%9A%E5%AE%A2%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87%EF%BC%9F)

二、调整图片的大小位置

在前面的基础上可以采用如下的代码：

（参考 [Markdown-图片设置（大小，居中）]https://blog.csdn.net/qq_35451572/article/details/79443467))

1
2

<img src="文件夹名\task3.png" width=50% height =50%  div align=left />  # 或者
<img src="http:..." width = "100" height = "100" div align=right /> # width和height可以调整大小(height也可以不调整，图片整个是按比例缩放的) # div align 可以调整位置

效果如下：

或者

是不是很神奇？

三、图片并排显示

<figure class="fifth">
	<img src="光影流年-触不可及-Intouchables\实五角星.png" width=4.53% />
	<img src="光影流年-触不可及-Intouchables\实五角星.png" width=4.53% />
	<img src="光影流年-触不可及-Intouchables\实五角星.png" width=4.53% />
	<img src="光影流年-触不可及-Intouchables\实五角星.png" width=4.53% />
	<img src="光影流年-触不可及-Intouchables\半星.png" width=4% />
</figure>

图片显示效果如下：

不然直接用下面的语句出来的是这个：

typora上效果不明显，但是网页上的效果就是这个：

四、星级评分显示（静态）

针对以上的问题，下面采用font awesome icon的方法来实现

具体可以参考巧用 Font Awesome 装点 Markdown 文档

以及中文官方网址Font Awesome

使用前需要在文档的末尾添加以下的代码（放中间容易影响文章）：

<head> 
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> 
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> 
</head> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

引用icon的代码示例如下：

1
2
3

<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-half" aria-hidden="true"></i>
或者就单独一个：
<i class="fa fa-star" aria-hidden="true"></i>

在typora上面看不出来效果，但是网页上是这样的：

(第五课半星和第四颗之间有点间距，目前没啥好办法调整，就这样先凑合吧)

首行缩进

在输入法全角状态下打两个空格

PS: 全/半角切换快捷键：shift + space