Link Search Menu Expand Document
GXL-Groups
  1. Just The Docs主题下markdown基本组件的使用
    1. Markdown 基本排版元素的使用
    2. button
    3. 文本标签
    4. 表格
    5. 列表
    6. 代码
  2. Heading with <inline code snippet> in it.
    1. Just the Docs 定义的其它辅助布局的标记

Just The Docs主题下markdown基本组件的使用

Markdown 基本排版元素的使用

button

  1. 普通带有跳转链接的button

    1

    [Link button](http://example.com/){: .btn }

Link button

  1. 自定义颜色的button

    1
2
3

    [Link button](http://example.com/){: .btn .btn-purple }
[Link button](http://example.com/){: .btn .btn-blue }
[Link button](http://example.com/){: .btn .btn-green }

Link button Link button Link button

  1. 带有边缘框的button

    1

    [Link button](http://example.com/){: .btn .btn-outline }

    Link button

GitHub Flavored Markdown不支持button,不得不通过HTML的方式来使用:

1

<button type="button" name="button" class="btn">Button element</button>

效果和上面的一样

通过一些工具来更加灵活的使用button

  1. 改变大小

    用其它的组件来包裹button,通过设置包裹组件容器的属性来设置

    1
2
3
4
5
6
7

    <span class="fs-8">
[Link button](http://example.com/){: .btn }
</span>
     
<span class="fs-3">
[Tiny ass button](http://example.com/){: .btn }
</span>

    Link button

    Tiny ass button

  2. 在按钮中添加空白

    1
2
3
4
5

    [Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
[Button ](http://example.com/){: .btn .btn-blue }
     
[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
[Button ](http://example.com/){: .btn .btn-blue }

    Button with space Button

    Button with more space Button

文本标签

通过label来给文本中一些内容添加额外的标记,可以使用少量的颜色,默认的颜色是蓝色.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Default label
{: .label }

Blue label
{: .label .label-blue }

Stable
{: .label .label-green }

New release
{: .label .label-purple }

Coming soon
{: .label .label-yellow }

Deprecated
{: .label .label-red }

Default label

Blue label

Stable

New release

Coming soon

Deprecated

表格

markdown格式的表格

1
2
3
4
5
6

| head1        | head two          | three |
|:-------------|:------------------|:------|
| ok           | good swedish fish | nice  |
| out of stock | good and plenty   | nice  |
| ok           | good `oreos`      | hmm   |
| ok           | good `zoute` drop | yumm  |
head1 head two three
ok good swedish fish nice
out of stock good and plenty nice
ok good oreos hmm
ok good zoute drop yumm

列表

  1. 无序列表

    1
2
3
4
5
6
7
8
9

    - Item 1
- Item 2
- Item 3
     
_or_
     
* Item 1
* Item 2
* Item 3
  • Item 1
  • Item 2
  • Item 3

or

  • Item 1
  • Item 2
  • Item 3

  1. 有序列表

    1
2
3

    1. Item 1
1. Item 2
1. Item 3
    1. Item 1
    2. Item 2
    3. Item 3

  2. 任务列表

1
2
3

- [ ] hello, this is a todo item
- [ ] hello, this is another todo item
- [x] goodbye, this item is done
  • hello, this is a todo item
  • hello, this is another todo item
  • goodbye, this item is done

  1. 使用html语法来定义列表

    1
2
3
4
5
6
7
8
9
10

    <dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>
Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green

代码

  1. 行内代码
1
2
3

Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Heading with `<inline code snippet>` in it.

Lorem ipsum dolor sit amet, <inline code snippet> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading with <inline code snippet> in it.

  1. 多行代码(语法高亮)
1
2
3
4
5
6
7

```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}
```

1
2
3
4
5

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

  1. jekyll渲染代码

    1. 带有按钮跳转的

      1

      [Link button](http://example.com/){: .btn }

      Link button

    2. 与div搭配使用

      1
2
3
4
5
6
7
8

      <div class="code-example" markdown="1">
          
[Link button](http://example.com/){: .btn }
          
</div>
```markdown
[Link button](http://example.com/){: .btn }
```

  2. 代码使用行号

    HTML压缩的默认设置与jekyll针对高亮代码中行号生成的html不兼容.

    为了避免不符合标准的html和不满意的布局,可以使用一下配置选项关闭html压缩

    1
2
3

    compress_html:
  ignore:
    envs: all

    在使用kramdown代码块时,可以通过下面的配置选项全局打开:

    1
2
3
4

    kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

    可以通过Liquid标签来在本地抑制显示高亮代码块的行号(没有linenos标签)

    ```md

     Some code
     
1

 ```

  1. 压缩html与代码块行号突出显示一起使用

    所有的高亮代码块要通过下面的方式进行包装:

    三个反引号的方法:

    ````md

1
2
3

 ```some_language
 Some code
 ```

1
2
3
4
5

 ````

 使用Liquid模板高亮:

 ```md

1
2

     Some code
     

1

 ```

Just the Docs 定义的其它辅助布局的标记