GitHub的README.md的常用样式的标签使用

首先注意一点,GitHub上README.md的编写,在大多数情况下与CSDN的MarkDown编辑器一样的,但是它回车不一样,在README.md上用<br> 代替回车。在不需要上传图片等资源时,基本上只需要注意回车即可。而需要在README.md上展示图片等资源的方法,本文也有介绍。以下给出常遇的一些情况的写法。 
效果可以看我放到github上的一个例子:https://github.com/Cutepingping/reactJS/edit/master/README.md

1.标题

在文字前写#,注意文字与#之间有一个空格

# 一级标题
## 二级标题
### 三级标题
  • 1
  • 2
  • 3

以此类推 
或者用连续的减号或等号写在文字之下:

标题
---
  • 1
  • 2

2.粗体斜体

**这个是粗体**
*这个是斜体*
***这个是粗体加斜体***
  • 1
  • 2
  • 3

3.代码块

因为编辑器原因,这里上图(就是一对三个在键盘上的esc键下的那个键): 
这里写图片描述

4.表

|列名1|列名2|
|:---|:---|
|列1的内容1|列2的内容1|
|列1的内容2|列2的内容2|
  • 1
  • 2
  • 3
  • 4

以此类推 
5. 链接

[会显示出来的描述](跳转网址)
  • 1

这里直接给个例子吧:

[点击前往谷歌搜索](https://www.google.com.hk/)
  • 1

效果: 
这里写图片描述

6. 图片

建议的做法是现将readme.md里面要展示的图片放到仓库里面,再调用图片链接,当然直接调用网络上已经有的图片地址是面有问题的。显示图片的写法:


![这个括号里写的在图片加载失败时显示](图片网址)
  • 1
  • 2

在github网页打开图片,浏览器显示的网址就是图片的地址了。 
举例:

![头像](https://github.com/HeTingwei/ReadmeLearn/blob/master/avatar1.jpg)
  • 1

效果: 
这里写图片描述
大得屏幕都显示不完了,下面举例怎么控制图片尺寸。

<img src="https://github.com/HeTingwei/ReadmeLearn/blob/master/avatar1.jpg" width="150" height="150" alt="图片加载失败时,显示这段字"/>
  • 1

效果: 
这里写图片描述

接着如果又想让图片居中:

<div align=center><img width="150" height="150" src="https://github.com/HeTingwei/ReadmeLearn/blob/master/avatar1.jpg"/></div>
  • 1
  • 2

效果: 
这里写图片描述

猜你喜欢

转载自blog.csdn.net/PINGER0077/article/details/82596421
今日推荐