主题对markdown语法的支持

September 8, 2021 8 分钟阅读

Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式编写文档。

本网站使用minimal-mistakes的jekyll主题搭建，jekyll是一个功能比较全面的主题。

斜体

*斜体内容*
_斜体内容_

斜体内容
斜体内容

粗体

**粗体**

粗体

加粗加斜

***加粗加斜***

加粗加斜

删除线

~~删除线~~

~~删除线~~

blockquote 快引用

blockquote元素用于定义单独存在的引用，引用的内容可长可短，但必须来自另一个引用源。cite属性规定引用来源。

> blockquote 标签定义摘自另一个源的块引用。浏览器通常会对 blockquote 元素进行缩进

<cite>RUNOOB 网站</cite> --- HTML 参考手册, 2021

blockquote 标签定义摘自另一个源的块引用。浏览器通常会对 blockquote 元素进行缩进

RUNOOB 网站 — HTML 参考手册, 2021

分级标题

在当前主题中，不支持一级标题在目录中显示，页面还是正常显示。几个#代表几级标题

### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

三级标题

四级标题

五级标题

六级标题

超链接

通过a标签打开

markdown语法的超链接，只能跳转链接，不能新窗口打开链接，只能通过a标签打开新窗口

欢迎来到<a href="https://madcsb.github.io/" target="_blank">我的网站</a>

欢迎来到我的网站

行内式超链接

语法：[链接文字](链接地址 "title")，title属性可选。

欢迎来到[我的网站](https://madcsb.github.io/ "疯狂的程sir")

欢迎来到我的网站

参考式超链接

文中的写法 [链接文字][链接标记]。

在文本的任意位置添加[链接标记]:链接地址 "链接标题"，链接地址与链接标题前有一个空格。

欢迎来到[我的网站][mysite]

[mysite]:https://madcsb.github.io/ "疯狂的程sir"

欢迎来到我的网站

自动链接

只要用<>包起来，markdown会自动把他们转成链接。

<https://madcsb.github.io/>

https://madcsb.github.io/

锚点

在准备跳转的指定位置插入锚点{#标记},然后在其他地方插入锚点的链接[xxxx](#标记)

跳转到[斜体](#斜体)
//已经在斜体之后插入 {#斜体}

跳转到斜体

本站文章永久链接地址

{% link _collection/name-of-document.md %}
{% link _posts/2016-07-26-name-of-post.md %}
{% link news/index.html %}
{% link /assets/files/doc.pdf %}
// post博文也可以特殊处理
{% post _posts/2016-07-26-name-of-post.md %}

超链接样式

在主题中，已经定义了多种按钮样式的超链接

[默认](#link){: .btn}
[主要](#link){: .btn .btn--primary}
[成功](#link){: .btn .btn--success}
[警告](#link){: .btn .btn--warning}
[危险](#link){: .btn .btn--danger}
[信息](#link){: .btn .btn--info}
[相反](#link){: .btn .btn--inverse}
[浅色轮廓](#link){: .btn .btn--light-outline}

[超大主要](#link){: .btn .btn--primary .btn--x-large}
[大主要](#link){: .btn .btn--primary .btn--large}
[默认主要](#link){: .btn .btn--primary }
[小组要](#link){: .btn .btn--primary .btn--small}

默认主要成功警告危险信息相反浅色轮廓

超大主要大主要默认主要小组要

列表

无需列表

使用 *、+、- 表示无序列表。

* (+)列表
  + 内容1
  + 内容2
+ (-)列表
  - 内容1
  - 内容2

(+)列表
- 内容1
- 内容2
(-)列表
- 内容1
- 内容2

有序列表

使用数字接着一个英文句点

内容
内容
内容

内容
内容
内容

定义型列表

定义型列表由名词和解释组成。一行写上定义，紧跟一行写上解释。解释的写法:紧跟一个缩进(Tab)

Java
: Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，

Java: Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，

图片

行内式图片

语法：![图片Alt](图片地址 "图片Title")

欢迎光临我的网站。![java](/assets/images/logo.png "MadCsb")

欢迎光临我的网站。

参考式图片

语法：插入图片的地方![图片Alt][标记],其他地方[标记]:图片地址 “Title”

欢迎光临我的网站。![java][mySiteLogo]

[mySiteLogo]:/assets/images/logo.png "MadCsb"

欢迎光临我的网站。

注脚

在需要添加注脚的文字后加上注脚名 [^注脚名]。然后在其他地方（一般是文章最后）添加注脚[^注脚名]:注脚内容

如果你不知道注脚 [^1]是什么。

[^1]:解释字句的文字，注释、说明。

如果你不知道注脚 ¹是什么。

流程图

表格

第一行为表头，第二行分隔表头和主体部分，第三行开始每一行为一个表格行。列于列之间用管道符

隔开。

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。

| 左对齐头  | 居中对齐头 | 右对齐头 |
|:--------|:-------:|--------:|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|-----------------------------|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|=============================|
|  脚1    | 脚2     | 脚3      |

左对齐头	居中对齐头	右对齐头
cell1	cell2	cell3
cell4	cell5	cell6
cell1	cell2	cell3
cell4	cell5	cell6
脚1	脚2	脚3

分割线

在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格

***
* * * *
----
______

代码

行内代码使用<code>代码内容</code>。

使用java代码如new Date()创建一个时间对象。

行内代码使用`代码内容`。

`new Date()`

new Date()

用6个`包围多行代码

#include <stdio.h>
int main(void)
{
  printf("Hello world\n");
}

```css
#include <stdio.h> 
int main(void) 
{ 
  printf("Hello world\n"); 
} 
```

主题注意

在minimal-mistakes中，常用的注意使用如下方式，通过{: .notice}添加notice、notice–primary、notice–info、notice–warning、notice–success、notice–danger样式，显示不同的注意效果

**注意!** 当前使用notice样式，[超链接](#斜体-斜体)效果.
{: .notice}

**注意!** 当前使用 notice--primary 样式，[超链接](#斜体-斜体)效果.
{: .notice--primary}

**注意!** 当前使用 notice--info 样式，[超链接](#斜体-斜体)效果.
{: .notice--info}

**注意!** 当前使用 notice--warning 样式，[超链接](#斜体-斜体)效果.
{: .notice--warning}

**注意!** 当前使用 notice--success 样式，[超链接](#斜体-斜体)效果.
{: .notice--success}

**注意!** 当前使用 notice--danger 样式，[超链接](#斜体-斜体)效果.
{: .notice--danger}

注意! 当前使用notice样式，超链接效果.

注意! 当前使用 notice–primary 样式，超链接效果.

注意! 当前使用 notice–info 样式，超链接效果.

注意! 当前使用 notice–warning 样式，超链接效果.

注意! 当前使用 notice–success 样式，超链接效果.

注意! 当前使用 notice–danger 样式，超链接效果.

缩写标签

我现在在金海星公司做JAVA开发

figure 文档中插图

单图

<figure>
	<a href="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg"><img src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg"></a>
	<figcaption>单图说明</figcaption>
</figure>

2张图片使用half样式

<figure class="half">
	<a href="http://placehold.it/1200x600.JPG"><img src="http://placehold.it/600x300.jpg"></a>
	<a href="http://placehold.it/1200x600.jpeg"><img src="http://placehold.it/600x300.jpg"></a>
	<figcaption>两张图片</figcaption>
</figure>

3张图片使用third样式

<figure class="third">
	<img src="http://placehold.it/600x300.jpg">
	<img src="http://placehold.it/600x300.jpg">
	<img src="http://placehold.it/600x300.jpg">
	<figcaption>三张图片.</figcaption>
</figure>

语法高亮

支持的语言类型

GitHub Flavored Markdown

GFM是GitHub根据CommonMark，正式规范了markdown的语法和语义。

语法``` 语言类型代码内容 ```

```css
#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}
```

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

Jekyll Highlight 标签

语法: {% highlight 语言类型 %}代码内容{% endhighlight %}

{% highlight css %}
#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}
{% endhighlight %}

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

支持GitHub Gist

语法：通过script的src属性，引入gist的js

jekyll 禁止转义

用法: raw 禁止转义 endraw

raw = 大括号开始% raw 大括号结束

endraw = 大括号开始% endraw 大括号结束

解释字句的文字，注释、说明。 ↩

Twitter Facebook LinkedIn

程Sir

斜体

粗体

加粗加斜

删除线

blockquote 快引用

分级标题

三级标题

四级标题

五级标题

六级标题

超链接

通过a标签打开

行内式超链接

参考式超链接

自动链接

锚点

本站文章永久链接地址

超链接样式

列表

无需列表

有序列表

定义型列表

图片

行内式图片

参考式图片

目录

注脚

流程图

表格

分割线

代码

主题注意

缩写标签

figure 文档中插图

语法高亮

GitHub Flavored Markdown

Jekyll Highlight 标签

支持GitHub Gist

jekyll 禁止转义

分享

留下评论

猜您还喜欢

github国内访问