1. 程式人生 > 實用技巧 >Markdown - Typora 10分鐘入門 - 精簡教程

Markdown - Typora 10分鐘入門 - 精簡教程

Markdown - Typora 10分鐘入門 - 精簡教程

JERRY_Z. ~ 2020 / 8 / 22 轉載請註明出處!

一、簡介

1.說給我們聽

這篇部落格是我學習使用 Markdown 及 Typora 後的個人總結,也是我人生真正意義上的第一篇部落格,作為一名計算機專業的學生,我鼓勵自己將所學所得積極地記錄、總結和分享出來,這篇部落格對我意義重大,希望大家喜歡,同時希望我將來繼續保持記錄與分享的好習慣!

交流方式:

QQ: 1846334075

WeChat: zhoujirui54

知乎:https://www.zhihu.com/people/JERRY-Z-J-R

簡書:https://www.jianshu.com/u/6fea080bb149

bilibili:https://space.bilibili.com/505277890

GitHub:https://github.com/JERRY-Z-J-R

gitee:https://gitee.com/JERRY-Z-J-R

cnblogs:https://www.cnblogs.com/JERRY-Z-J-R/

CSDN:https://blog.csdn.net/D_si_God

OSCHINA:https://my.oschina.net/JERRYZJR

感謝:

B站 遇見狂神說:https://space.bilibili.com/95256449/

菜鳥教程:https://www.runoob.com/

以上的個人和平臺為我學習 Markdown - Typora 提供了極大的幫助,在此非常感謝!

2.Markdown 簡介

Markdown 是一種輕量標記語言,通過簡單的語法,使普通文字具有一定的格式。

Markdown 語言在 2004年 由 約翰·格魯伯 (John Gruber) 建立。

Markdown 編寫的文件可以匯出 HTML,Word,影象,PDF 等 多種格式的文件。

Markdown 編寫的文件字尾為 .md.markdown

Markdown 當前被許多網站廣泛使用來撰寫幫助文件或是用於論壇上發表訊息及撰寫部落格。例如:GitHub、CSDN、cnblogs、OSCHINA、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge 等。

3.Markdown 編輯器簡介

本部落格使用 Typora 編輯器來講解 Markdown 的語法,同時本人也極度安利大家使用這款小清新神器來撰寫 Markdown 文件。Typora 支援 MacOS 、Windows、Linux 平臺,且包含多種主題,頁面超級簡潔,功能精煉,編輯後直接渲染出效果,可為使用者提供超高效的沉浸式寫作體驗。

Typora 編輯器支援匯出HTML、PDF、Word、圖片等多種型別檔案。

點選進入:Typora 官網

先放一張Typora的官網首頁圖!對於我這種簡約風格顏值控來說,簡直太漂亮了!

其他 Markdown 編輯器推薦:印象筆記、VS Code、Sublime Text、Atom……

二、Typora 的簡單使用介紹

1.進入 Typora 官網

點選連結:Typora 官網

2.右上角點選 Download

3.選擇相應的系統版本

4.下載、安裝

建議:安裝時不要選擇預設路徑,不要選擇帶有中文的路徑

5.系統會自動建立一個 Typora 桌面圖示

6.開啟 Typora

Typora 預設主題是: GitHub ,是不是超級簡潔呢!如果你不喜歡的話還有無數的主題 ( Typora 官網可以找到一部分精美主題 ) 可供下載!同時也支援利用 CSS 樣式定製個人主題,由於本blog為入門基礎,所以就不一一說明了,感興趣的話請查閱相關教程!

7.檔案 —— 偏好設定

為方便後序使用,建議將以下設定全部完成!

8.選單欄設定及功能

選單欄中還由許多設定及功能,請多多試用,並查閱相關幫助文件

9.利用 Markdown 編寫文件

......具體教程請看後文

10.儲存、另存為、匯出……

三、Markdown 語法基礎

說明:此處只是列舉了 Markdown 的常用語法,並不涉及如:圖表、流程圖等,高階的部分。Markdown 是輕量級文字標記語言,所以利用非常簡單的標籤來設定文字格式。下面遇到的所有程式碼示例均是 Markdown 格式。

1.Markdown 標題

Markdown 中一共支援六級標題

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

合理使用標題有利於在大綱模式下管理文件結構,同時也利於編排

2.Markdown 字型

*斜體文字*
_斜體文字_
**粗體文字**
__粗體文字__
***粗斜體文字***
___粗斜體文字___

顯示效果:

斜體文字
斜體文字
粗體文字
粗體文字
粗斜體文字
粗斜體文字

~~刪除線~~
<u>下劃線</u>
==高亮==

顯示效果:

刪除線
下劃線
高亮

3.Markdown 格式

Markdown^上標^
Markdown~下標~
<!--註釋-->

顯示效果:

Markdown上標
Markdown下標

4.Markdown 列表

* 第一項
* 第二項
* 第三項

+ 第一項
+ 第二項
+ 第三項

- 第一項
- 第二項
- 第三項

顯示效果:

  • 第一項
  • 第二項
  • 第三項
  • 第一項
  • 第二項
  • 第三項
  • 第一項
  • 第二項
  • 第三項
<!---列表巢狀只需在子列表中的選項前面新增四個空格即可-->
1. 第一項:
    - 第一項巢狀的第一個元素
    - 第一項巢狀的第二個元素
2. 第二項:
    - 第二項巢狀的第一個元素
    - 第二項巢狀的第二個元素

顯示效果:

  1. 第一項:
    • 第一項巢狀的第一個元素
    • 第一項巢狀的第二個元素
  2. 第二項:
    • 第二項巢狀的第一個元素
    • 第二項巢狀的第二個元素

5.Markdown 分割線

---
***

顯示效果:



6.Markdown 程式碼

<!--段落上的一個函式或片段的程式碼-->
`printf()`

<!--你也可以用3個`包裹一段程式碼,並指定一種語言(也可以不指定)-->
​```c
#include <stdio.h>

int main(void){
	printf("hello, world!\n");
	
	return 0;
}
​```

​```python
print("hello python");
​```

顯示效果:

printf()

#include <stdio.h>

int main(void){
	printf("hello, world!\n");
	
	return 0;
}
print("hello python");

7.Markdown 圖片

![圖片屬性文字](圖片路徑)		<!--路徑可以是本地的,也可是網路的-->

<!--Markdown 還沒有辦法指定圖片的高度與寬度,如果你需要的話,你可以使用普通的 <img> 標籤-->
<img src="圖片路徑" width="50%">

8.Markdown 連結

[連結名稱](連結地址)	<!--第一種連結方式:帶名稱>

<連結地址>	<!--第二種連結方式:不帶名稱,只有一個連結>

9.Markdown 表格

<!--Markdown 製作表格使用 | 來分隔不同的單元格,使用 - 來分隔表頭和其他行。-->
|  表頭   | 表頭  |
|  ----  | ----  |
| 單元格  | 單元格 |
| 單元格  | 單元格 |

顯示效果:

表頭 表頭
單元格 單元格
單元格 單元格
<!--
我們可以設定表格的對齊方式:

-: 設定內容和標題欄居右對齊。
:- 設定內容和標題欄居左對齊。
:-: 設定內容和標題欄居中對齊。
-->
| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |

顯示效果:

左對齊 右對齊 居中對齊
單元格 單元格 單元格
單元格 單元格 單元格

10.Markdown 區塊

> 區塊引用

> 最外層
> > 第一層巢狀
> > > 第二層巢狀

> 區塊中使用列表
> 1. 第一項
> 2. 第二項
> + 第一項
> + 第二項
> + 第三項

* 第一項
    > 列表中使用區塊
* 第二項

顯示效果:

區塊引用

最外層

第一層巢狀

第二層巢狀

區塊中使用列表

  1. 第一項
  2. 第二項
  • 第一項
  • 第二項
  • 第三項
  • 第一項

    列表中使用區塊

  • 第二項

11.Markdown 轉義

<!--
\反斜槓 + 特殊符號 = 普通符號
-->
\`   反引號
\*   星號
\_   下劃線
\{}  花括號
\[]  方括號
\()  小括號
\#   井字號
\+   加號
\-   減號
\.   英文句點
\!   感嘆號

顯示效果:
` 反引號
* 星號
_ 下劃線
{} 花括號
[] 方括號
() 小括號
# 井字號
+ 加號
- 減號
. 英文句點
! 感嘆號

12.Markdown 公式

$$
1 + 2 = 3
$$

顯示效果:
$$
1 + 2 = 3
$$

四、Typora 使用技巧

1.原始碼模式

點選左下角 </> 即可 進入/退出 原始碼模式

Ctrl + / 快捷鍵:在游標所在語句的原始碼與預覽模式之間來回跳轉

2.大綱檢視

選單欄——檢視——大綱,即可開啟大綱模式

3.開發者工具

Typora 提供了與瀏覽器相同的開發者工具,開啟方式:Shift + F12 快捷鍵 或 右鍵——檢查元素

利用開發者工具可以彌補 Markdown 功能的不足,使用者可以根據 HTML CSS 改變文件內容使文件設計得更加完美!當然,前提條件是掌握了一定的 HTML CSS 基礎知識。

五、附

本部落格便是利用 Markdown 編寫的,若需要原始碼請留言。