Hello World

Markdown

Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档。

一、 标题

使用#显示标题
示例：

# 这是一个一级标题
## 这是一个二级标题
### 这是一个三级标题

二、斜体、粗体、删除线

斜体、粗体、删除线可混合使用

三、链接

1. 外链接

使用 [描述](链接地址) 为文字增加外链接。

2. 锚点

其实呢，每一个标题都是一个锚点，和HTML的锚点（#）类似，比如我们

不过要注意，标题中的英文字母都被转化为小写字母了。

3. 参考链接

在YAML前置元数据块中添加 reference_links 内容

---
title:  Hello World
category: 个人博客
reference_links:
    - https://gorpeln.top/works
    - https://gorpeln.top
---

四、代码块、高亮

使用一对各三个的反引号（```）

1. 代码块

#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSLog(@"Hello World");
    
}
@end

2. 文字高亮

文字高亮功能能使行内部分文字高亮，使用一对反引号（`）。 语法：

`linux` `iOS` `HTML5` `小程序` `php` `APIClound`

效果：linux iOS HTML5 小程序 php APIClound

语法：

`绿色`{:.bg-green} `蓝色`{:.bg-blue} `黄色`{:.bg-yellow} `红色`{:.bg-red} `紫色`{:.bg-purple}

效果：绿色 蓝色 黄色 红色 紫色

3. 块引用

此行显示块引用，使用方法：> + 空格

4. 提示

显示tip类型提示符的示例。使用方法：块引用 + {: .tip-green }

显示info类型提示符的示例。使用方法：块引用 + {: .tip-blue }

显示warning类型提示符的示例。使用方法：块引用 + {: .tip-yellow }

显示danger类型提示符的示例。使用方法：块引用 + {: .tip-red }

5. 卡片提示

自定义博客文章卡片

6. 弱化提示

① 在一段文字中，可以弱化某些文字内容。使用方法：*斜体* + {:.color-gray}
② 在一段文字中，可以弱化(隐藏)某些文字内容。使用方法：*斜体* + {:.color-light-gray}
③ 在一段文字中，可以高斯模糊某些文字内容。使用方法：*斜体* + {:.blur}
④ 弱化一整块内容：
效果

方式和内容：

• 方式
  • 1
  • 2
  • 3
• 内容
  • 1

示例

{% capture content %}

方式和内容：
- 方式
    - 1
    - 2
    - 3
- 内容
    - 1

{% endcapture %}
{{ content | add_class_to_tags: "p,li", "color-gray" }}

7. 内容折叠

{% detail 更多博客图片尺寸 %}
    <p>文字示例内容</p>
    <img src="https://img.gorpeln.top/blog/20190101010101187.png" alt="">        
{% enddetail %}

示例效果：

更多博客图片尺寸

文字示例内容

五、列表

1. 无序列表

使用 *，+，- 表示无序列表。
示例：

- 无序列表项 
- 无序列表项 
- 无序列表项 
    - 无序列表
    - 无序列表

效果：

• 无序列表项
• 无序列表项
• 无序列表项
  • 无序列表
  • 无序列表

2. 有序列表

就是在数字后面加一个点，再加一个空格。不过看起来起来可能不够明显。
示例：

1. 有序列表项 
2. 有序列表项 
3. 有序列表项 

效果：

1. 有序列表项
2. 有序列表项
3. 有序列表项

3. 描述列表

冒号后加一个空格。
示例：

太阳  
: 地球绕其轨道运行的恒星  

月亮  
: 地球的天然卫星，通过太阳的反射光可见  

效果：

太阳

地球绕其轨道运行的恒星

月亮

地球的天然卫星，通过太阳的反射光可见

4. 复选框列表

你可以使用这个功能来标注某个项目各项任务的完成情况。
示例：

- [x] 需求分析
- [x] 系统设计
- [x] 详细设计
- [ ] 编码
- [ ] 测试
- [ ] 交付

效果：

• 需求分析
• 系统设计
• 详细设计
• 编码
• 测试
• 交付

六、表格

表格可以使用:指定对齐方式

| 左对齐 | 居中 | 右对齐 |
| :------------ |:---------------:| -----:|

效果：

七、diff语法

版本控制的系统中都少不了diff的功能，即展示一个文件内容的增加与删除。 GFM中可以显示的展示diff效果。使用绿色表示新增，红色表示删除。

其语法与代码高亮类似，只是在三个反引号后面写diff， 并且其内容中，以 +开头表示新增，-开头表示删除。

效果：

+ 运筹帷幄之中，决胜千里之外
- 运筹帷幄之中，决胜千里之外

八、缩进

　　把输入法由半角改为全角。 两次空格之后就能够有两个汉字的缩进。

九、 图片

1. 图片链接

因为图片本身和链接本身都支持URL标识符的形式，所以图片链接也可以很简洁:

 ![alt](URL title)

alt和title即对应HTML中的alt和title属性 (都可省略）：

• alt表示图片显示失败时的替换文本
• title表示鼠标悬停在图片时的显示文本 (注意这里要加双引号）
• 后面添加(target)可以完成跳转

#	语法/示例	备注	效果
1		仅显示图片
2		图片和标题
3	[](target-url)	图片和跳转

2. 图片位置

图片默认居中显示。

![图片居左](https://img.gorpeln.top/p/icon/gorpeln-128.png){:.img-left}

![图片居中](https://img.gorpeln.top/p/icon/gorpeln-128.png)

![图片居右](https://img.gorpeln.top/p/icon/gorpeln-128.png){:.img-right}

十、分割线

// 双实线
<hr class="hr-double">

// 斜纹分隔线
<hr class="hr-twill">

<hr class="hr-twill-colorful">

// 带文字内容的分隔线
<hr class="hr-solid-content" data-content="文字自适应，背景透明">

<hr class="hr-fade-content" data-content="分隔线">

效果：

1. 双实线

2. 斜纹分隔线

3. 带文字内容的分隔线

使用示例：

十一、设置css

十二、数学公式

MathJax的基本使用

结束

在 {删除% raw %} 和 {删除% endraw %} 之间的内容会被原样输出，不会进行标签转换

{删除% raw %}
...
{删除% endraw %}