使用```看效果

vuepress

我是使用了>的效果

文章中插入按钮

[button]矩形按钮文字[/button]

[button color="succees"]矩形按钮文字[/button]

[button type="round" color="success"]椭圆形按钮文字[/button]  

[button color="success" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]



type:选填,不填默认为矩形按钮。可选值:

round:椭圆形按钮
color: 选填,不填默认为success(绿色),可选值:

light:白色
info:蓝色
dark:深色
success:绿色
black:黑色
warning:黄色
primary:紫色
danger:红色

icon:选填,不填默认为文字按钮,可用按钮见图标列表

url:选填,填写点击的链接。举例:如果你的链接是http://www.baidu.com,请手动将/前面加一个反斜杆,即http://www.baidu.com

[button color="danger" icon="fontello fontello-gratipay" url="http:\/\/wpa.qq.com\/msgrd?v=3&uin=535425690&site=qq&menu=yes"]点击QQ咨询购买(√推荐)[/button]

[button color="success" icon="glyphicon glyphicon-send" url="mailto:ihewro@163.com"]ihewro#163.com[/button]

文章内插入音乐

云解析歌曲:暂时支持解析单曲,不支持歌单:

[hplayer media="netease" id="1309896289" type="song" size="large" auto="false" /]

00:00
加载中……请稍等……

本地mp3地址播放:

[hplayer title="歌曲名" author="歌手" url="https://music.163.com/#/song?id=1371056767" size="large" /]

00:00
加载中……请稍等……

00:00
加载中……请稍等……

00:00
加载中……请稍等……

文章页面插入播放器size默认为large时光机插入播放器size默认为small
你也可以手动改动这个标签的内容以选择不同的播放器样式:)

文章内插入视频

[vplayer url="https:\/\/www.runoob.com\/try\/demo_source\/movie.mp4" pic="https:\/\/cdn.jsdelivr.net\/gh\/guugg\/pic@master\/20171231\/1.jpg" /]

文章内调用其他文章

post cid="1" /     //存在  需要使用[]包起来
post cid="2" /     //不存在

存在的文章


不存在的文章

文章内调用外链网站

post url="https:\/\/www.ihewro.com" title="友人C" intro="一个个人博客" cover="https://cdn.jsdelivr.net/gh/guugg/pic@master/20171231/1.jpg" /
//需要使用[]包起来
title:必填,外链的名称/标题
url:必填,外链的地址(请填写绝对地址,就是浏览器地址栏什么样的就填什么样的)
intro:(可选)外链网站的简介/介绍
cover:(选填)外链网站的介绍图片地址

文章内插入相册

我是就是普通的文字,没有其它的标签.插入了6张图片。

[album]
![请输入图片描述][1]
[/album]

请输入图片描述
请输入图片描述
请输入图片描述
请输入图片描述
请输入图片描述
请输入图片描述
请输入图片描述
请输入图片描述
请输入图片描述
请输入图片描述
请输入图片描述
请输入图片描述

我是就是普通的文字,没有其它的标签

文章内部分隐藏回复可见

hide  #使用[]包括起来
> 22222222222222
hide

22222222222222

此处内容需要评论回复后(审核通过)方可阅读。

22222222222222

文章内部分内容登录可见

login  #使用[]包括起来
11111111111
/login

11111111111

该部分仅登录用户可见

11111111111

文章中插入短代码高亮文本

scode type="share"]这是灰色的短代码框,常用来引用资料什么的[/scode
scode type="yellow"]这是黄色的短代码框,常用来做提示,引起读者注意。[/scode
scode type="red"]这是红色的短代码框,用于严重警告什么的。[/scode
scode type="lblue"]这是浅蓝色的短代码框,用于显示一些信息。[/scode
scode type="green"]这是绿色的短代码框,显示一些推荐信息。[/scode


这是黄色的短代码框,常用来做提示,引起读者注意。

这是红色的短代码框,用于严重警告什么的。

这是浅蓝色的短代码框,用于显示一些信息。

这是绿色的短代码框,显示一些推荐信息。

主题设置里的markdown扩展设置

!>(空格)文字 表示黄色警告框
i>(空格)文字 表示蓝色信息框
@>(空格)文字 表示银色引用框
x>(空格)文字 表示红色错误框
√>(空格)文字 表示绿色成功框

文字 表示黄色警告框

文字 表示蓝色信息框

文字 表示红色错误框

文字 表示绿色成功框
添加 {{拼音 : pin yin}} 语法解析注音

添加 拼音 (pin yin) 语法解析注音

文章中插入收缩框

collapse title="标题" status="false"]一些文字内容[/collapse
collapse title="标题"]一些文字内容[/collapse

其中status为false 表示默认不显示文字内容,为true表示默认显示内容。
不写status 属性,默认是展开内容的。

标题
一些文字内容

标题
一些文字内容

文章内插入标签卡

tabs]
tab name="标签页 1" active="true"]内容 1[/tab
tab name="标签页 2"]内容 2[/tab
[/tabs

每个tab 都必须包括name属性,只能有一个tab 添加active属性,表示默认显示该tab的内容。

内容 1
内容 2

此外tab支持更多css的属性,比如颜色,字体粗细等:
tab name="标签页 2" color:"#000" font-weight="bold"]高级内容文本示例[/tab

高级内容文本示例
高级内容文本示例
高级内容文本示例

文章内插入标签

tag]默认白色文字[/tag
tag type="primary"]紫色文字[/tag]
tag type="info"]蓝色文字[/tag]
tag type="warning"]黄色文字[/tag]
tag type="danger"]红色文字[/tag]
tag type="success"]绿色文字[/tag]
tag type="dark"]黑色文字[/tag]

默认白色文字
紫色文字
蓝色文字
黄色文字
红色文字
绿色文字
黑色文字

最后修改:2020 年 01 月 03 日 01 : 08 PM
如果觉得我的文章对你有用,请随意赞赏