环境
编辑器：typora
静态网站生成器：Jekyll + kramdown
玩法
折叠
效果图：
完整示例点击此处
1
此处是代码
代码：
折叠-2
代码参考 此处 的 build_code_block()：
1
2
3
4
<div class="kyakya_collap">example code：</div>
<pre>
这是代码
</pre>
示例：
example code：
1
这是代码
文字上移/下移
效果图：
This text is superscripted
This text is superscripted
代码：
1
2
<p>This text is <sup>superscripted</sup></p>
<p>This text is <sub>superscripted</sub></p>
提示框
效果图：
code
代码：
1
<div class='sup' data-title="内容123456 12345546 1234324">文字</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// sass
.sup
&::after
display: none
margin-left: 10px
content: attr(data-title)
top: 50%
border: 1px solid #002f5f
position: absolute
-webkit-transform: translatey(-50%)
-moz-transform: translatey(-50%)
-o-transform: translatey(-50%)
transform: translatey(-50%)
font: 14px/20px Arial
padding: 5px 8px
background-color: #555
// z-index: 1000 用于将文字框显示到最前面
z-index: 1000
width: 300px
text-align: center
border-radius: 6px
line-height: 1.45em
transition: opacity 0.3s
&:hover
color: #fff
cursor: pointer
&::after
display: inline-block
用处：
通过该方式可以增加注释。