共筆投影片 - HackMD

<style> .code { font-size: 28px; } </style> # 共筆工具 Note: 大家上大學之後，有很多機會跟同學一起做分組作業，也可以找同學一起共同寫筆記，這時候共筆工具就派上用場了！今天會介紹兩種好用的共筆工具，還不會的趕快抓緊機會學起來吧！ ---- - HackMD & Markdown - Overleaf & $\LaTeX$ Note: 我們今天會介紹兩種共筆工具，HackMD 跟 Overleaf，我們先從HackMD開始 --- ## HackMD & Markdown Note:HackMD 是個可以線上多人編輯的共筆平台 ---- 搜尋 HackMD <img src="https://i.imgur.com/cmejB46.png" style="height:60vh; object-fit:contain;"> ---- Sign up！ <img src="https://i.imgur.com/NdimDfp.png" style="height:60vh; object-fit:contain;"> Note:HackMD 可以與其他多種平台的帳號整合，像你們剛剛學到的 GitHub 或 Google 等等 ---- - HackMD - 使用 Markdown 語法 - 排版自由 - 上傳圖檔、插入數學式、程式碼、etc. - 轉換成 HTML Note: 使用 Markdown 語法作為編輯文件的工具，可以自由的排版，例如在筆記中加入圖表、上傳圖檔、插入數學式，而且也可以輸入程式碼。HackMD 也能夠將筆記轉換成 HTML 文件（Markdown：是一種輕量級標記語言，具有純文本格式語法 by wiki，這代表在文件中使用一些特定的符號，Markdown可以幫你建立有特定結構和格式的文件，像粗體、標題、鏈結等、副檔名 `.md`） --- ### HackMD 模式 HackMD 的三種模式：編輯、同時、檢視 Note: 首先先來介紹 HackMD 的三種模式，有編輯、同時、檢視三種。建立一個新文件後可以在畫面的左上方找到編輯圖示 ---- 可以在螢幕上方看到目前模式 ![](https://i.imgur.com/CSEd2ZO.png) ---- - 編輯：修改筆記的內容 - 檢視：瀏覽筆記呈現畫面，不能編輯 - 我全都要：     左半邊是編輯模式，右半邊是檢視模式，很方便！ Note: - 編輯模式：只會顯示編輯區塊的模式，可以在這個模式下修改筆記的內容。 - 檢視模式：可以看到筆記內容，不能編輯。 - 我全都要模式：只能在筆電或平板上使用這個模式，螢幕左半邊是編輯模式，右半邊是檢視模式，很方便！ ---- ![](https://i.imgur.com/PJm3Su9.png) Note: 這個左半邊就是編輯區、右邊為筆記的檢視區塊，可以一邊打筆記一邊看筆記呈現的畫面 --- ### 語法 I <ul style="font-weight:bold; float:left; margin-left:20%;"> <li>標題</li> <li>清單</li> <li>字型</li> <li>插入圖片</li> <li>嵌入影片</li> </ul> Note: 我們先來介紹 HackMD 裡面一些基本的語法 ---- - **標題**：在行首加上1~6個`#`，輸入的文字就會有標題的效果 ```= # 一個 # 字體最大 ## 再來逐漸縮小 ### # 愈多，層級越低 ``` Note: 在行首輸入的井字號越多，呈現出來的標題就越小 ---- 實際效果如下： # 一個 `#` 字體最大 ## 再來逐漸縮小 ### `#` 愈多，層級越低 Note: 呈現出來的效果像這樣！ --- - **有序清單**：在行首加上`1.`，或是其他的數字 ```= 1. 有序清單的第一項 2. 換行會自動出現數字 ``` Note: 再來介紹 HackMD 中的清單，分為有序清單跟無序清單。我們先來介紹有序清單，他的語法是：在行首輸入數字，加一個點和空格，就可以輸入有序清單，換行會自動出現下一項的數字 ---- ```= 1. 有序清單的第一項 2. 換行會自動出現數字 ``` 1. 有序清單的第一項 2. 換行會自動出現數字 Note: 這是實際呈現的效果 ---- - **無序清單**：   在行首加上 `-`，將項目縮排可以變成子清單 ```= - 將內容條列式呈現 - 整理不同重點 - 縮排是子清單 - 再縮一次是子子清單 ``` Note: 無序清單語法跟有序清單很像，不同的是行首可以輸入 dash 符號，加號，或星字號，我自己習慣是使用 dash。另外，如果輸入 tab 可以把清單變成子清單 ---- ```= - 將內容條列式呈現 - 整理不同重點 - 縮排是子清單 - 再縮一次是子子清單 ``` - 將內容條列式呈現 - 整理不同重點 - 縮排是子清單 - 再縮一次是子子清單 Note: 呈現出來的效果長這樣 --- - **字形**：可以直接輸入想要呈現的字型 ```= **這個是粗體** *這樣是斜體* 這樣可以^上標^ 這樣用來~下標~ ~~中間被劃過去~~ ==螢光筆劃記== ``` Note: 想要不同字型時，輸入特定的符號，就可以直接轉換成不同的字形效果，星號、次方符號，波浪符號：字中間會被劃過去、等號 ---- 實際效果如下： <img src="https://i.imgur.com/pZjM5jK.png" style="height:60vh;"> --- - **插入圖片**： - `![]()`，`()`中間輸入圖片的網址 - 將圖片直接拖曳到編輯器 - 複製圖片後直接在編輯器貼上 ```= ![](https://i.imgur.com/5t2rme2.jpg) ``` Note: 在想要插入圖片的地方輸入`![]()`，`()`中間輸入圖片的網址，就可以插入圖片了。另外，也可以將圖片直接拖曳到編輯器、或是複製圖片後直接在編輯器貼上，這兩種方法會將圖片上傳到 imgur(/ˈɪmədʒər/) 後自動插入圖片語法 ---- ```= ![](https://i.imgur.com/5t2rme2.jpg) ``` <img src="https://i.imgur.com/5t2rme2.jpg" style="height:70vh;"> Note: 這是呈現出來的效果 ---- - **嵌入影片**：   HackMD 也可以在筆記中插入影片！ ---- 1. 輸入 `{%youtube youtubeid %}` 2. 假設影片連結是：`https://www.youtube.com/watch?v=sowESlcktC8` 3. 將 `youtubeid` 替換成影片連結的 id ```= {%youtube sowESlcktC8 %} ``` Note: 輸入大括號，百分比符號、youtube，後面加上youtubeid ---- ```= {%youtube sowESlcktC8 %} ``` {%youtube sowESlcktC8 %} Note: 我們來看一下嵌入影片的效果 --- ### 語法 II <ul style="font-weight:bold; float:left; margin-left:20%;"> <li>程式碼</li> <li>數學式</li> </ul> Note: 接下來我們來介紹在 HackMD 插入程式碼跟數學式 ---- - **程式碼**：用 ` ``` ` （三個 backtick）包起來，表明程式語言並加上 `=`，換行後就可以輸入程式碼！ ```= ```c= #include <stdio.h> int main() { printf("以後就可以用 HackMD 輸入程式碼ㄌ\n"); for(int i=0; i<3; i++) { printf("很重要所以說三遍\n"); } } ``` ``` ---- 實際效果如下： ```c= #include <stdio.h> int main() { printf("以後就可以用 HackMD 輸入程式碼ㄌ\n"); for(int i=0; i<3; i++) { printf("很重要所以說三遍\n"); } } ``` --- - **數學式**：用 Word 檔打不出數學符號覺得很困擾嗎？ Note: 使用 MathJax 語法來產生 LaTeX 數學表達式 ---- - **行內數學式**：   在要輸入的數學式前後打上 `$` - **區塊數學式**：   用 `$$` 把想輸入數學式的段落包起來 Note: HackMD 數學式分兩種表達方式，一種是行內數學式，一種是區塊數學式，開始的 dollar符號後面以及結尾的 dollar符號前面不能有空白 ---- **行內數學式**： ```= 用單個 $ 可以把 $\sum_{n=1}^{\infty} 2^{-n}=1$ 包起來 ``` 用單個 `$` 可以把 $\sum_{n=1}^{\infty} 2^{-n}=1$ 包起來 Note: 行內數學式可以在文字中間輸入數學式，如果在段落中要寫到某個數學式時就很方便 ---- **區塊數學式**： ```latex= $$ \begin{align*} \int (10x^4-2\sec^2 x)dx &= 10\int x^4 dx-2\int \sec^2 x\ dx\\ &= 10\frac{x^5}{5}-2\tan x+C\\ &= 2x^5-2\tan x+C\\ \end{align*} $$ ``` Note: 區塊數學式產生的區塊會變成一個新的段落，並且呈現在畫面中間 ---- 實際效果如下： ![](https://i.imgur.com/QnoyfJ1.png) 要用 `\newline` 或 `\\` 才可以換行 Note: 要特別注意的是，在區塊數學式中要用指令才可以換行 ---- 數學式語法： <img src="https://i.imgur.com/j3CF43G.png" style="height:60vh; object-fit:contain;"> Note: 這邊我就不特別介紹數學式的語法，大家可以找撰寫數學式的教學文章來看 --- 可以上網找 HackMD 教學文章打開他們的編輯區看看到底是怎麼打的喔！ Note: HackMD 的介紹就到這邊，大家之後也可以去找更多 HackMD 的教學來看，如果好奇哪些語法該怎麼打，可以打開 HackMD 文章的編輯區看看怎麼打的 --- ## Overleaf & $\LaTeX$ <img src="https://i.imgur.com/oeJx2tg.png" style="height:60vh; object-fit:contain;"> Note: Latex => leh-teh-ks 接下來要介紹 Overleaf 跟 Latex，LaTeX 是一種排版系統，可以生成複雜表格和數學公式，也適用於生成簡單的信件、完整書籍的多種文件，因此滿多學術論文都是使用 LaTeX 進行排版。 Overleaf 則是一款線上的 LaTeX 編輯器，可以多人一起編輯 LaTeX 文件 --- ### 語法 ---- - `\documentclass{}`：決定文件的格式 - article：Overleaf 預設的格式 - book：書籍文檔類 - letter：英文信件格式 Note: 出現在文件的第一行，決定文件的格式，不同格式的文件會有不同外觀。一般用 article 來寫作業就很足夠了書籍包含章節、前言、證文和後記等結構用 backslash 輸入指令 ---- - `\begin{}`、`\end{}`：在 $\LaTeX$ 中設定需要的環境 ```latex= \begin{document} 中間的部分為文章主體 \end{document} ``` Note: begin end 在 LaTeX 中設定需要的環境，可以在局部產生指定效果，或是生成特定的文檔元素。我們打的內文都會被包在 `\begin{document}` 跟 `\end{document}` 裡面 ---- - Package：在文檔前面輸入`\usepackage{}` 使用需要的套件 ```latex= \usepackage[utf8]{inputenc} \usepackage{CJKutf8} ``` Note: 在 LaTeX 中有很多 packages 可以使用，在文檔前面輸入`\usepackage{}` 使用需要的套件 \usepackage[utf8]{inputenc} 說明文件是 UTF-8 編碼 \usepackage{CJKutf8} 是輸入中文的套件 --- - 段落標題：可以用 `\section{}`，在大括號中輸入標題 ```latex= \section{這是標題} ``` Note: 開啟新的段落時，可以用 `\section{}`，在大括號中輸入你的標題，backslash section 大括號 ---- - 字體：粗體是 `\textbf{}`，斜體是 `\textit{}`，產生底線為 ```latex= \textbf{這是粗體字} \textit{This is italic} \underline{這裡的字會畫底線} ``` Note: 這邊介紹粗體、斜體、跟底線的語法 ---- ```latex= \textbf{這是粗體字} \textit{This is italic} \underline{這裡的字會畫底線} ``` <img src="https://i.imgur.com/9YScvej.png" style="width:70vw;"> Note: 產生出來的字形就是這樣的效果 ---- - 換行：使用 `\\` 或 `\newline` ```latex= 輸入文字時就算按 enter 換行也沒有用 \\要用指令換行 ``` Note: 在 LaTeX 中，系統會自動判斷文字的編排來換行，如果想要強制換行，可以使用兩個 backslash `\\` 或 `\newline` 來換行 ---- ```latex= 輸入文字時就算按 enter 換行也沒有用 \\要用指令換行 ``` <img src="https://i.imgur.com/7FXnQeq.png" style="width:70vw;"> Note: 在輸入文字時按 enter 換行，呈現出來的檔案不會真的換行，要用指令才可以換行 --- - 數學式： $\LaTeX$ 中也有分行內數學式跟展示數學式 Note: 剛剛在 HackMD 就有稍微講過數學式的用法，兩者的數學語法滿相近的，在 LaTeX 中一樣也有分行內數學式跟展示數學式 ---- - 行內數學式： `$...$` `$...$` `\begin{math}...\end{math}` - 展示數學式： `\[...\]` `\begin{equation}...\end{equation}` Note: 這邊介紹幾種使用數學式的語法 ---- 行內數學式： ```latex= 在文字段落間隨意打需要的數學式，如 $x^2+y^2=z^2$ \\ 或者是 $x^n+y^n=z^n$ \\ 還有第三種可以用 \begin{math}\alpha x+\beta y =\gamma z\end{math} ``` <img src="https://i.imgur.com/yuZ5PNR.png" style="width:60vw;"> Note: 行內數學式同樣可以在文字中呈現數學式，數學式會跟前後文字在同一行中 ---- 展示數學式會獨立一行並且置中： ```latex= \[ \sum_{i=1}^{\infty} \frac{1}{n^s} = \prod_p \frac{1}{1 - p^{-s}} \] \begin{equation} \lim_{h \to 0 } \frac{f(x+h)-f(x)}{h} \end{equation} ``` <img src="https://i.imgur.com/q9qFjie.png" style="width:60vw;"> Note: 展示數學式則會在新的一行呈現，並且呈現在畫面中間，如果要打一整段數學式的話，用展示數學式就會比較方便。用 `\begin{equation}`、`\end{equation}` 會為數學式編號 ---- - 清單：$\LaTeX$ 有三種清單 - 無序清單 - 有序清單 - 自訂項目 Note: $\LaTeX$ 有三種清單，分別為無序清單、有序清單、還有自訂項目的清單 ---- 三種清單都用 `\item` 來表示各個項目 ```latex= \begin{itemize} \item 無序清單 \item 這也是無序清單 \end{itemize} \begin{enumerate} \item 有序清單1 \item 有序清單2 \end{enumerate} \begin{description} \item[自訂項目] 內容 \item[自訂項目2] 也是內容 \end{description} ``` Note: 用 itemize 可以產生無序清單，用 item 表示每個項目另外 enumerate 可以產生有序清單 description 可以產生自訂項目符號的清單，在 item 後面加上中括號，輸入自己想要設定的項目符號 ---- 實際效果如下： <img src="https://i.imgur.com/LeapM4e.png" style="height:60vh;"> Note: 這個是項目符號呈現出來的效果 ---- 在編輯 Overleaf 編輯 $\LaTeX$ 的畫面 <img src="https://i.imgur.com/HRDN0wC.png" style="height:60vh; object-fit:contain;"> Note: documentclass、usepackage、等指令會輸入在文件的開頭之後在 begin document 跟 end document 中間輸入想要的內容，在右邊可以預覽文件呈現的畫面 --- ### 模板線上有很多 $\LaTeX$ 的模板可以參考跟套用 <img src="https://i.imgur.com/uIm2VNJ.png" style="height:60vh; object-fit:contain;"> Note: 如果一開始對 LaTeX 的語法還沒那麼熟，線上有很多模板可以參考跟套用，大家可以邊看模板邊學習，也可以使用模板做作業 --- ### HackMD v.s. Overleaf - 跟別人一起做共筆的時候 - 寫作業，像微積分、普物、DSA 等等 --- ### 小結今天對於共筆工具的介紹就到這邊希望大家都有好好的學起來，平常可以多多靈活使用 HackMD 跟 $\LaTeX$