markdown更具表现力

提示

让 markdown 更具表现力主要就是使用 html+css 样式，然后使用了一些样式或组件

注意

因为字体需要安装，可能会在不同的环境显示不一致。

# 各种代码块

# 字体

输入：

<font face="黑体">我是黑体字</font><br/>
<font face="微软雅黑">我是微软雅黑</font><br/>
<font face="STCAIYUN">我是华文彩云</font><br/>
<font color=red>我是红色</font><br/>
<font color=#008000>我是绿色</font><br/>
<font color=Blue>我是蓝色</font><br/>
<font size=5>我是尺寸</font><br/>
<font face="黑体" color=green size=5>我是黑体，绿色，尺寸为 5</font><br/>

1
2
3
4
5
6
7
8

输出：

我是黑体字
我是微软雅黑
我是华文彩云
我是红色
我是绿色
我是蓝色
我是尺寸
我是黑体，绿色，尺寸为 5

# Emoji

输入：

:tada: :100: :orange: :houses: :car: :boy: :clock3: :no_entry_sign:

输出： 🎉 💯 🍊 🏘 🚗 👦 🕒 🚫

参考列表：Emoji 列表 (opens new window) | emojipedia (opens new window) | emoji-cheat-sheet (opens new window)

技巧：

windows 系统下按 Win + . 快速打开表情选择框（不是右侧小键盘的 .）

mac 系统下按 Control + Command + 空格键

# 文本高亮

使用 `` 符号包裹或者 mark 标签包裹
输入：

`我是第一种`，<mark>我使用了 mark 标签</mark>

输出：
我是第一种，我使用了 mark 标签

# 图片

输入：

<!-- 因为博客使用了图片放大插件，这里使用 no-zoom 表示不适用放大插件 -->
<a href='https://eastonyangxu.github.io/' target='_blank'>
  <img src='/avatar-git.png' width='100px' class='no-zoom'/>
</a>

1
2
3
4

输出：

# markmap + iframe 使用

注意

iframe 可能会有兼容问题

markmap (opens new window)
输入：

<iframe
  src="/markmap/demo.html"
  width="100%"
  height="400"
  frameborder="0"
  scrolling="No"
  style="background-color: #eeeeee"
/>

1
2
3
4
5
6
7
8

输出：

# 标记

来源 vuepress 自带：Badge (opens new window)

参数:
- text- string
- type - string, 可选值： tip | warning | error，默认： tip
- vertical - string, 可选值： top | middle，默认： top
语法:

你可以在标题或其他内容中使用标记：

### 《沁园春·雪》 <Badge text="摘"/>

北国风光<Badge text="注释" type="warning"/>，千里冰封，万里雪飘。

> <Badge text="译文" type="error" vertical="middle"/>: 北方的风光。

1
2
3
4
5

效果：

# 《沁园春·雪》摘

北国风光注释，千里冰封，万里雪飘。

译文: 北方的风光。

# 徽章

提示

可使用 Shields (opens new window)来生成
如果没接触过 Shields，Shields 教程传送门

输入：

![stars](https://img.shields.io/github/stars/eastonyangxu/eastonyangxu.github.io)
![stars](https://img.shields.io/github/stars/eastonyangxu/eastonyangxu.github.io?style=social)
![kbt](https://img.shields.io/badge/easton-博客-green)