1. 程式人生 > 其它 >【2021-10-04】連嶽摘抄

【2021-10-04】連嶽摘抄

Markdown語法介紹

Markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文字格式編寫文件。 它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成有效的XHTML(或者HTML)文件。這種語言吸收了很多在電子郵件中已有的純文字標記的特性。

由於Markdown的輕量化、易讀易寫特性,並且對於圖片,圖表、數學式都有支援,許多網站都廣泛使用Markdown來撰寫幫助文件或是用於論壇上發表訊息。 如GitHub等等。

接下來,我主要從一下這8個方面來介紹一下markdown的常用方法,最後在進行一些特殊的補充。

1.標題

對應標題的語法形式

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題

效果展示

一級標題

二級標題

三級標題

四級標題

五級標題
六級標題

2.字型

對應字型的語法程式碼

*這是斜體*
**這是粗體**
***這是粗斜體***
~~這是刪除~~

效果展示

這是斜體
這是粗體
這是粗斜體
這是刪除

3.程式碼塊

對應程式碼塊的語法程式碼

​​```對應的語言,如bash,c++,c,java
​```

效果展示

#include <iostream>
using namespace std;

int main()
{
    cout << "hello world!" << endl;
    return 0;
}

4.列表

列表主要分為有序列表和無序列表,這裡再簡要介紹一下列表的巢狀

有序列表、無序列表的語法

- 無序列表1
- 無序列表2
- 無序列表3

1. 有序列表1
2. 有序列表2
3. 有序列表3
  • 無序列表1
  • 無序列表2
  • 無序列表3
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3

因為列表比較常用,這裡再介紹一下容易遇到的列表巢狀

列表巢狀語法
列表巢狀需要在子列表中的選項前面新增四個空格


1. 主列表1
    - 兒子列表
        - 孫子列表
2. 主列表2
  1. 主列表1
    • 兒子列表
      • 孫子列表
  2. 主列表2

5.引用

因為也是我們寫文章常用的東西,引用和列表可以相互巢狀,引用也可以自己巢狀,對應演示如下所示

引用程式碼

> 這是最外層引用
>> 這是第二層引用
>>> 這是第三層引用
>>>> 這是第四層引用


這是最外層引用

這是第二層引用

這是第三層引用

這是第四層引用

引用巢狀列表

  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  • 無序列表
  1. 列表巢狀引用
    這是尚未引用部分

    這是引用部分

  2. 列表

6.表格

表格語法

| head1 | head2 |
| ---- | ---- |
| value1 | value2 |
| value3 | value4 |

| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |

效果展示
cnblogs上對md表格語法支援還是有點問題的,在typora上你沒有問題

head1 head2
value1 value2
value3 value4
左對齊 右對齊 居中對齊
單元格 單元格 單元格
單元格 單元格 單元格

7.圖片與超連結

對應圖片、超連結語法

圖片:    ![this_is_a_photo_link](https://pic.cnblogs.com/avatar/1772262/20200523104724.png)
超連結:  [this_is_a_link_to_baidu](www.baidu.com)
該連結無法跳轉到百度,我會在第九點進行講解

效果展示

圖片:

超連結: this_is_a_link_to_baidu

8.分割線

分割線的語法

***
---

效果展示
cnblogs上對md表格語法支援還是有點問題的,同樣在typora上你沒有問題



9.特殊點

對應的html和css語法,方便細緻的處理

  1. 字型渲染的css用法
    我們寫部落格或者是文章,最最最常用的就是字型渲染,md語法中提供的渲染效果較為單一,這裡推薦使用 css 語法中的字型渲染

    css 程式碼

    <div style="color:#B22222;font-weight:bold;font-size:14px">這是css文字渲染</div>
    

    渲染效果

這是css文字渲染
  1. 關於圖片大小設定的問題

    這裡主要還是需要藉助css Img 標籤進行設定

       <img src="url" style="zoom:縮放比例" />  
    
  1. 關於 [](跳轉地址)無法跳轉的問題
    不難得知,我們跳轉的 url 為 www.baidu.com,但是在cnblogs 中,他自動給我們加入了字首,變成了
    https://i.cnblogs.com/www.baidu.com
    使用 html 的標籤,檢視效果一致,考慮加上字首,解決!

        <a href="地址">文字描述</a>
    

    LINK1
    LINK2

  2. 文字居中的效果

        <p align="center">居中的文字,可以巢狀其他語法</p>
        <div style="color:blue;text-align:center;font-size:14px;font-weight:bold">居中文字</div>
    

文字居中

居中文字 數學公式的書寫,放在下一篇部落格