博客解锁的新样式语法测试

1、四个新的prompt

①加标题形式

蓝色注意的标题

这里是蓝色注意的内容。

绿色小tips的标题

这里是绿色小tips的测试内容。

黄色警告的标题

这里是黄色警告的内容。

红色警告的标题

这里是红色警告的内容 实现标识两行为一句话或者为紧挨着的两部操作用 “>”

对应的语法：

<div class="box-info" markdown="1">
<div class="title"> 蓝色注意的标题 </div>
这里是蓝色注意的内容。
</div>

<div class="box-tip" markdown="1">
<div class="title"> 绿色小tips的标题 </div>
这里是绿色小tips的内容。
</div>

<div class="box-warning" markdown="1">
<div class="title"> 黄色警告的标题 </div>
这里是黄色警告的内容。
</div>

<div class="box-danger" markdown="1">
<div class="title"> 红色警告的标题 </div>
>  这里是红色警告的内容
> 实现标识两行为一句话或者为紧挨着的两部操作用 ">"
</div>

②不加标题形式

这里是蓝色注意的内容。

这里是绿色小tips的测试内容。

这里是黄色警告的内容。

这里是红色警告的内容 实现标识两行为一句话或者为紧挨着的两部操作用 “>”

对应的语法：

<div class="box-info" markdown="1">
这里是蓝色注意的内容。
</div>

<div class="box-tip" markdown="1">
这里是绿色小tips的测试内容。
</div>

<div class="box-warning" markdown="1">
这里是黄色警告的内容。
</div>

<div class="box-danger" markdown="1">
>  这里是红色警告的内容
> 实现标识两行为一句话或者为紧挨着的两部操作用 ">"
</div>

2、Details 元素的样式设计

详细信息

哇咔咔，这里是恭喜你看到了详细信息。

对应的语法：

<details class="details-block" markdown="1">
<summary>详细信息 </summary>

哇咔咔，这里是恭喜你看到了详细信息。



</details>

3、原有语法复习

①链接

纯URL：<https://leaderchen007.github.io/>

文字上+URL: [Pat1ence](https://leaderchen007.github.io/)

链接变量：
[Pat1ence][1]
[1]:https://leaderchen007.github.io/（这句话是看不见的，一般放在论文页脚）

链接变量

多次使用同一个链接时，可以使用变量定义链接。

效果：

纯URL：https://leaderchen007.github.io/

文字上+URL: Pat1ence

链接变量：

Pat1ence

②插入媒体视频

哔哩哔哩：

视频分享处有嵌入代码

抖音：

进入到视频详细页面获取到视频的ID

https://www.douyin.com/video/7422623070327803177?modeFrom=

输入ID获取IFrame代码

https://open.douyin.com/api/douyin/v1/video/get_iframe_by_video?video_id=7422623070327803177

打开后拿到：

<iframe width=\"1920\" height=\"1252\" frameborder=\"0\" src=\"https://open.douyin.com/player/video?vid=7422623070327803177&autoplay=0\" referrerpolicy=\"unsafe-url\" allowfullscreen></iframe>

去掉反斜杠最终：

<iframe width="1920" height="1252" frameborder="0" src="https://open.douyin.com/player/video?vid=7422623070327803177&autoplay=0" referrerpolicy="unsafe-url" allowfullscreen></iframe>

效果展示：