Markdwon學習筆記[基礎 + 進階 + 應用]
阿新 • • 發佈：2018-12-18
Markdown 使用手冊
1. 簡介
Markdown 是一種易讀易寫的文字標記語言，它可以用簡單的語法代替Word中的格式按鈕操作，是記筆記、寫文件的理想語法
Markdown 編輯器
Markdown 線上編輯器
支援Markdwon的網站
2. 基本語法
| Element | Markdown | example | Remarks |
|---|---|---|---|
| 多級標籤 | # 一級標籤 ## 二級標籤 ### 三級標籤 | — | — |
| 加粗 | *加粗* | 加粗 | 快捷鍵：Ctrl + B |
| 斜體 | *斜體* | 斜體 | 快捷鍵：Ctrl + I |
| 加粗且斜體 | *** *** | 加粗且斜體 | |
| 刪除線 | ~~ ~~ | ||
| 文字引用 | > | ||
| 程式碼引用 | ``` | ||
| 無序列表 | * + - | ||
| 有序列表 | 1. | ||
| 分隔線 | — | ||
| 插入圖片 |  | ||
| 表格 | |title1|title2| |-------|-------| |content|content| | |左對齊|居中對齊|右對齊 |:---------|:------------?------? |1 |2 |3 | | |
| To do list | - [] |
3. Markdown 進階
-
Markdwon + HTML
-
更改圖片顯示大小
<img src=“C:\Users\a2data\Desktop\Markdown 學習小組\logo-markdown.png” width=“50” >
-
更改字型
<font color=gray size=20> 灰色字型</font>
灰色字型
屬性 face 字型 color 顏色 size 大小
-
-
Markdown + Latex 數學公式
關鍵字： $…$ 或 $$ + 回車
example：
$$\sum_{x=1}^{100} x+x^2$$
-
用Markdown畫流程圖
繪製圖標的功能是Markdown的擴充套件功能，標準的Markdown並不支援
關鍵字 圖示 flow 流程圖 sequence 序列圖 mermaid 流程圖/甘特圖 #定義結點 st=>start: Start op=>operation: gender cond=>condition: MALE or FEMALE? e=>end: End #定義結點關係 st->op->cond cond(yes)->e cond(no)->op #小tips st->op(right)->cond 表示gender的右側作為線尾指向cond這個元素 st->op(left)->cond 表示gender的左側作為線尾指向cond這個元素
語法
tag=>type: content:>url
| 型別 | |
|---|---|
| start | 開始 |
| end | 結束 |
| operation | 操作 |
| subroutine | 子程式 |
| condition | 條件 |
| inputoutput | 輸入輸出 |
-
用Markdown 製作線上ppt remark.js
<!DOCTYPE html> <html> <head> <title>Title</title> <meta charset="utf-8"> <style> @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); body { font-family: 'Droid Serif'; } h1, h2, h3 { font-family: 'Yanone Kaffeesatz'; font-weight: normal; } .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; } </style> </head> <body> <textarea id="source"> class: center, middle # Title --- # Agenda 1. Introduction 2. Deep-dive 3. ... --- # Introduction </textarea> <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script> <script> var slideshow = remark.create(); </script> </body> </html>