最近看到被人GitHub项目上的READMD排版得很漂亮,就去了解了一下,原来背后是用markdown语法编写的,md即markdown的缩写,READMD也是支持markdown语法的,同时大部分博客的可视化编写也有一定的markdown基础,所以掌握markdown基本语法对我们很有帮助。
本文分为三部分,第三部分是如何在GitHub上编写readmd,第二部分是markdown的基本语法,第三部分是markdown的可视化图,读者只要结合最后俩部分来看,就能满足READMD上的基本需求,同时这也是本人的第一篇学习笔记,供以后查看,也希望可以帮助到大家,有错误欢迎指出。
-
GitHub上编写readmd
首先打开你的github主页,按以下步骤。
然后看下图。
红色框区域就是编写markdown语法的地方,绿色框就是预览效果图,接下来就可以开始学习markdown了。
-
markdown的基本语法
- markdown一级标题(0个数以上的=)
- ====
- 二级标题(0个数以上的-)
- ----
- # 一级标题
- ## 二级标题
- ### 三级标题
- #### 四级标题
- ##### 五级标题
- ###### 六级标题
- ### 横线
- 加横线(三个以上下滑线_)
- ___
- 加横线(三个以上星号*)
- ***
- ### 普通文本
- 你好,这是一段普通文本
- ### 换行
- 直接回车不能换行 <br>
- 要使用 \<br> 或 \<\br> <br>
- ### 普通URL
- 超连接直接写URL:https://github.com/13660139155/SVGTest <br>
- ### 单行文字空格
- 单行文字首个空格都会被忽略 <br>
- 如果想要显示首行空格,把输入法的半角改成全角输入 <br>
- ### 单行文字显示
- 单行文本显示,在首行加入俩个tab键或四个空格 <br>
- ### 多行文字显示
- 多行文本显示,在首行加入俩个tab键或四个空格 <br>
- 多行文本显示,在首行加入俩个tab键或四个空格 <br>
- 多行文本显示,在首行加入俩个tab键或四个空格 <br>
- ### 文字高亮显示
- 如果你想使一段话中部分文字`高亮显示`,来起到突出`强调的作用`,那么可以把它用 \` ` 包围起来。注意这不是单引号,而是Tab上方,数字1左边的按键(注意使用英文输入法)<br>
- ### 文字链接
- 给一段文字加入超链接的格式:[Github地址](https://github.com/13660139155/SVGTest) <br>
- 给一段文字加入超链接的格式,你还可以给他加上一个鼠标悬停显示的文本(把鼠标放在文字链家上会有文字悬停提示): [Github地址](https://github.com/13660139155/SVGTest "悬停显示"),即在URL之后 用双引号括起来一个字符串 <br>
- ### 圆点符分级
- * 一级圆点号 ,markdown中用 星号 + 空格 表示,不加空格则为普通星号, *普通星号 <br>
- * 二级圆点号,tab + 星号 + 空格 表示
- * 三级圆点号,俩个tab + 星号 + 空格 表示
- ### 缩进符分级
- > 层次一
- >> 层次二
- >>> 层次三
- >>>> 层次四
- >>>>> 层次五
- ### 普通分级
- 1. 就是在数字后面加一个点,再加一个空格
- 2. 就是在数字后面加一个点,再加一个空格
- 3. 就是在数字后面加一个点,再加一个空格
- ### 插入图片
- #### 来源于网络的图片,格式:\!\[](图片URL)
- ![](http://www.baidu.com/img/bdlogo.gif)
- * []方括号里加描述,这个方括号里的描述并不会对图像显示造成任何改动 <br>
- ![百度](http://www.baidu.com/img/bdlogo.gif)
- * 在URL后面,加一个双引号包围的字符串,显示悬停 <br>
- ![baidu](http://www.baidu.com/img/bdlogo.gif "baidu")
- #### GitHub仓库里的图片,格式:\!\[](图片URL)
- * 其实与上面的格式基本一致的,所不同的就是括号里的URL该怎么写
- * ` https://github.com/ 你的用户名 / 你的项目名 / raw / 分支名 / 存放图片的文件夹 / 该文件夹下的图片`
- ![github仓库里的图片](https://github.com/13660139155/SVGTest/raw/master/app/src/main/res/drawable/girl.png)
- #### 给图片加上超链接,格式:文字链接格式 + 插入图片格式 即:
\[](图片URL)\[](图片URL)(图片的超链接)- [![baidu](http://www.baidu.com/img/bdlogo.gif)](http://www.baidu.com)
- * 文字悬停,第一种方式 <br>
- [![baidu](http://www.baidu.com/img/bdlogo.gif "baidu")](http://www.baidu.com)
- * 文字悬停,第二种方式 <br>
- [![baidu](http://www.baidu.com/img/bdlogo.gif)](http://www.baidu.com "百度")
- ###上传gif图片,格式:\!\[](gifURL)
- * 其实与上面的图片格式基本一致的,所不同的就是括号里的URL该怎么写
- * ` https://github.com/ 你的用户名 / 你的项目名 / blob/ 分支名 / 存放gif的文件夹 / 该文件夹下的gif`
- ![github仓库里的gif](https://github.com/13660139155/SVGTest/blob/master/gif/systemGif.gif)
- ### 插入代码片段
- 需要在代码的上一行和下一行用```标记,```不是三个单引号,而是数字1左边,Tab键上面的键,要实现语法高亮那么只要在 ```之后加上你的编程语言即可(忽略大小写)<br>
- * 普通写法
- ```
- Drawable drawable = ivSystem.getDrawable();//java
- ```
- * 高亮写法
- ```java
- Drawable drawable = ivSystem.getDrawable();//java
- ```
- ### 锚点 (移动到某个位置)
- 其实呢,每一个标题都是一个锚点,比如 [回到顶部](#一级标题)
- ### 表格 (每个格短横线-要大于一个)
- |表头1 |表头2 |
- |- |-------|
- |内容1 |内容2 |
- |内容1 |内容2 |
- ### 字体
- |语法 |效果 |
- |-------|-------|
- | \*斜体1* | *斜体1* |
- | \_斜体2_ | _斜体2_|
- | \*\*粗体1** | **粗体1** |
- | \_\_粗体2__ | __粗体2__|
- | \~\~删除线~~ | ~~删除线~~ |
- | \*\*\*斜粗体1*** | ***斜粗体1*** |
- | \_\_\_斜粗体2___ | ___斜粗体2___ |
- | \*\*\*\~\~斜粗体删除线1~~*** | ***~~斜粗体删除线1~~*** |
- | \~\~\*\*\*斜粗体删除线2***~~ | ~~***斜粗体删除线2***~~ |
看一下上图的源文再看一下下图,就能秒懂了。
-
markdown的可视化图
好了,以上就是全部内容,要注意的地方,都在上面标注了,同时要注意上面的输入除了中文,所有的标点符号都是在英文输入下输入的,还有第二部分的`\`是转义字符。以后会不定期更新。