环境
编辑器: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
用处:
通过该方式可以增加注释。