Blog各种文章格式的使用

提示块

<div class="note info">这里是 info 标签样式</div> 
<div class="note info no-icon">这里是不带符号的 info 标签样式</div> 
<div class="note primary">这里是 primary 标签样式</div> 
<div class="note primary no-icon">这里是不带符号的 primary 标签样式</div> 
<div class="note warning">这里是 warning 标签样式</div> 
<div class="note warning no-icon">这里是不带符号的 warning 标签样式</div> 
<div class="note danger">这里是 danger 标签样式</div> 
<div class="note danger no-icon">这里是不带符号的 danger 标签样式</div>

这里是 info 标签样式

这里是不带符号的 info 标签样式

这里是 primary 标签样式

这里是不带符号的 primary 标签样式

这里是 warning 标签样式

这里是不带符号的 warning 标签样式

这里是 danger 标签样式

这里是不带符号的 danger 标签样式

标签

<p>
<span class="label">空</span>
<span class="label label-primary">label-primary</span>
<span class="label label-info">label-info</span>
<span class="label label-success">label-success</span>
<span class="label label-warning">label-warning</span>
<span class="label label-danger">label-danger</span>
</p>

空 label-primary label-info label-success label-warning label-danger

代码块折叠

<details>
  <summary>点击展开</summary>
  	这是展开的内容.
</details>

点击展开

这是展开的内容.

选项卡#

PDF

{% pdf ../pdf.pdf %}

按钮

<p>
	<button type="button" class="btn btn-w-m btn-default">btn-default</button>
	<button type="button" class="btn btn-w-m btn-primary">btn-primary</button>
	<button type="button" class="btn btn-w-m btn-success">btn-success</button>
	<button type="button" class="btn btn-w-m btn-info">btn-info</button>
	<button type="button" class="btn btn-w-m btn-warning">btn-warning</button>
	<button type="button" class="btn btn-w-m btn-danger">btn-danger</button>
	<button type="button" class="btn btn-w-m btn-white">btn-white</button>
	<button type="button" class="btn btn-w-m btn-link">btn-link</button>
</p>

btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-white btn-link

B站视频

网易云音乐

Echarts

{% echarts 400 '85%' %} 
option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
{% endecharts %} 

代码块

[language][title][url][link-text]
正确姿势,代码片段开头:
[language]是代码语言的名称,用来设置代码块颜色高亮,非必须;
[title]是顶部左边的说明,非必须;
[ur1]是顶部右边的超链接地址,非必须;
[link-text]如它的字面意思,超链接的名称,非必须.
这4项应该是根据空格来分隔,而不是[],故请不要加[].除非如果你想写后面两个，但不想写前面两个;那么就必须加了,要这样写:[] [] [url] [link-text] .

helloworldQifeng Dai's Blog
public class Main {
	public static void main(String[] args) {
		System.out.println("hello world");
	}
}