markdown玩法

  1. 环境
  2. 玩法
    1. 折叠
    2. 折叠-2
    3. 文字上移/下移
    4. 提示框

环境

编辑器: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

用处:

通过该方式可以增加注释。