MarkDown基础用法及其代码

目录

  1. MarkDown基础用法及其代码
    1. 高亮
    2. 插入网络图片
    3. 图片缩放
    4. 流程图样例
    5. 顺序图样例
  2. 隐藏标签
  3. Title用法
  4. Alert
  5. Block Quote
  6. jsFiddle
  7. Image
  8. Wide image

MarkDown基础用法及其代码

测试跳转
加粗加粗加粗加粗

1
**加粗加粗加粗加粗**

强调强调强调强调

1
*强调强调强调强调*

下划线下划线下划线t

1
<u>下划线下划线下划线 不建议使用</u>

2px下划虚线

1
<span style="border-bottom:2px dashed green;">2px下划虚线</span>

1px下划实线

1
<span style="border-bottom:1px solid red;">1px下划实线</span>

高亮

删除线删除线删除线

1
2
3
{% hl_text danger %}31231{% endhl_text %}
{% hl_text #00FFFF %}3123131{% endhl_text %}
{% hl_text primary %}31231{% endhl_text %}

123131

Highlight Text

1
2
3
4
5
6
7
8
9
10
11
{% hl_text danger %}your highlighted text{% endhl_text %}这里是其他内容
{% hl_text [(classes | hexa code | rgb color | rgba color)] %} 
content
{% endhl_text %}
E.g (hexa color) :
{% hl_text #00FFFF %}your highlighted text{% endhl_text %}
E.g (rgba color) :
{% hl_text rgba(12, 12, 12, 0.4) %}your highlighted text{% endhl_text %}
Argument Description
Classes classes :
  • red
  • green
  • blue
  • purple
  • orange
  • yellow
  • cyan
  • primary
  • success
  • warning
  • danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

tabbed_codeblock
  • js
  • css
1
var test = 'test';
tabbed_codeblock
1
2
3
4
5
6
7
8
9
10
{% tabbed_codeblock example http://example.com %}
      <!-- tab js -->
          var test = 'test';
      <!-- endtab -->
      <!-- tab css -->
          .btn {
              color: red;
          }
      <!-- endtab -->
  {% endtabbed_codeblock %}
1
2
3
4
代码块
{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}
这里是标题链接地址
1
2
NSLog("这里是OC的代码块");
<!--这里是注释-->

引用
啦啦啦

  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4

右移右移右移

链接

链接 结果 原因
文本内容 是 同协议同域名同端口
文本内容 是 同协议同域名同端口
文本内容 是 同协议同域名同端口

插入网络图片

图片名字

图片缩放

图片名字

可点击的图片可点击的图片

新段落新段落新段落新段落新段落新段落

流程图样例

1
2
3
4
5
6
7
8
9
10
11
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

顺序图样例

1
2
3
4
Andrew->China: Says Hello
Note right of China: China thinks about it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!

隐藏标签

1
2
3
4
5
6
7
8
9
tags:
- tags
showTags: false
- social 
showSocial: false
- pagination
showPagination: false

Title用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
disqusIdentifier: fdsF34ff34
keywords:
- javascript
- hexo
clearReading: true
thumbnailImage: image-1.png
thumbnailImagePosition: bottom
autoThumbnailImage: yes
metaAlignment: center
coverImage: image-2.png
coverCaption: "A beautiful sunrise"
coverMeta: out
coverSize: full
coverImage: image-2.png
gallery:
    - image-3.jpg "New York"
    - image-4.png "Paris"
    - http://i.imgur.com/o9r19kD.jpg "Dubai"
    - https://example.com/orignal.jpg https://example.com/thumbnail.jpg "Sidney"
comments: false
meta: false
actions: false

Alert

1
2
3
{% alert danger no-icon %}
Here is a danger alert without icon
{% endalert %}

Here is a danger alert without icon

1
2
3
{% alert info %}
Here is a danger alert without icon
{% endalert %}

Here is a info alert 

1
2
3
{% alert warning %}
Here is a warning alert 
{% endalert %}

Here is a warning alert 

1
2
3
{% alert success %}
Here is a success alert 
{% endalert %}

Here is a success alert

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

David Levithan Wide Awake

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

jsFiddle

1
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Image

fig-100和宽高不用同时设置，可以添加4个样式参数fancybox、 nocaption 、fig-50、 clear，fancybox可以点击的Image、 nocaption不显示Title、 fig-50显示宽度的百分之50、 clear可以换行，下表进行了详细说明。
• fancybox : Generate a fancybox image.
• nocaption : Caption of the image will not be displayed.
• left : Image will float at the left.
• right : Image will float at the right.
• center : Image will be at center.
• fig-20 : Image will take 20% of the width of post width and automatically float at left.
• fig-25 : Image will take 25% of the width of post width and automatically float at left.
• fig-33 : Image will take 33% of the width of post width and automatically float at left.
• fig-50 : Image will take 50% of the width of post width and automatically float at left.
• fig-75 : Image will take 75% of the width of post width and automatically float at left.
• fig-100 : Image will take 100% of the width of post width.
• clear : Add a div with clear:both; style attached after the image to retrieve the normal flow of the post.

1
Syntax : {% image [classes] group:group-name /path/to/image [/path/to/thumbnail] [width of thumbnail] [height of thumbnail] [title text] %}
大好河山
大好河山
A beautiful sunrise3

Wide image

宽幅图像标签全宽显示宽幅图像。 它占用整个窗口宽度。

A beautiful sunriseA beautiful sunrise