<style> .class_name{ text-align:center; color:red; font-size:60px; } .right_text{ text-align:right; font-size:18px; margin-top:30px; margin-bottom:50px; padding:30px; width:230px; margin-left:auto; border:0px solid black; border-radius: 30px; background-color:rgba(0,100,150,0.5); animation:rainbow-bg 10s linear; animation-iteration-count: infinite; animation-play-state: running; } @keyframes rainbow-bg{ 100%,0%{ background-color: rgba(255,0,0,0.2); } 8%{ background-color: rgba(255,127,0,0.2); } 16%{ background-color: rgba(255,255,0,0.2); } 25%{ background-color: rgba(127,255,0,0.2); } 33%{ background-color: rgba(0,255,0,0.2); } 41%{ background-color: rgba(0,255,127,0.2); } 50%{ background-color: rgba(0,255,255,0.2); } 58%{ background-color: rgba(0,127,255,0.2); } 66%{ background-color: rgba(0,0,255,0.2); } 75%{ background-color: rgba(127,0,255,0.2); } 83%{ background-color: rgba(255,0,255,0.2); } 91%{ background-color: rgba(255,0,127,0.2); } </style> # Hackmd使用 <div class="right_text"> </div> 首先創一個帳號，如果沒在打程式的話建議使用Google來創建帳號，有在打程式的就用github來創。 創建好之後你應該會進到這樣的頁面 ![](https://hackmd.io/_uploads/r1i0IhEvn.png) 阿當然不會有筆記就是了，總之點個New note就可以開始打筆記了。 因為我自己是較常用`Hackmd`來紀錄數學和程式學習紀錄，所以比較不著重於`Markdown`語法教學。 以下整理我使用上的心得與Tips and Tricks 想要完整的教學可以到官方版教學，可以調成中文 [Welcome - HackMD](https://hackmd.io/c/tutorials/%2Fs%2Ftutorials) ![](https://hackmd.io/_uploads/Sk1dD3Nw2.png =70%x) 在這個介面中，先看到最左上角有一支筆和眼睛的那三格，筆代表純編輯模式，中間的代表編輯和預覽同時顯示(如果電腦不好可能會卡)，眼睛代表預覽模式。 中間分隔線底下有個三條線的小按鈕，點開他之後會看到 ![](https://hackmd.io/_uploads/HkdTw3Vvn.png) ![](https://hackmd.io/_uploads/BJLJ_2Vw2.png =50%x) 當你創建很多標題之後，他們就會分別被排成這樣，只有標題3以上的才會被分類。 > 貼心小提醒：在開始打筆記之前建議多練練打字速度 > 本人中打如下，錯字是因為自動選自 > ![](https://hackmd.io/_uploads/Bywut2Ev3.png =50%x) > 英打 > ![](https://hackmd.io/_uploads/BkjTq3VDn.png =70%x) > 雖然不必要，但是這會很節省時間。 ## Markdown基本使用 Markdown是利用程式語言的方式來為筆記排版，就不需要使用word之類的軟體。 要先為筆記弄個Title，像這篇的標題是Hackmd使用，那就先打井字號，空一格，打上你要的標題。 ![](https://hackmd.io/_uploads/Bkmmw2EP3.png) 打多個井字號就是標題1，標題2...。 介面左上角有很多按鈕，雖然我很少用，因為我個人都是直接背語法，懶得動滑鼠做多餘的事情。 字型調整按鈕： ![](https://hackmd.io/_uploads/HkIDin4Ph.png) 由左至右為：粗體、斜體、刪除線、設定為標題。 先反白字元之後再按這些按鈕就會生效，它也會為你的字元前後加上本來Markdown要產生這樣的效果所對應的指令。 由左至右為：標示為Code、Quote、Unordered list、Ordered list、Check list ![](https://hackmd.io/_uploads/SySasnNvh.png) 由左至右為：設為超連結、插入圖片、插入表格、分隔線 ![](https://hackmd.io/_uploads/HJyrnhEvn.png) > 最右邊的是註解，大概是用在多人共編的筆記裡面吧？個人是沒用過。 > [name=SingleDog] > [time=Mon, Jun 12, 2023 11:40 PM] > [color=#a418f4] ![](https://hackmd.io/_uploads/Hkm1T2EDh.png) ## MathJax(LaTeX) 在Hackmd中，要使用Latex語法，需使用"$"字號來將語法包圍住。 如果你發現沒有正常顯示的話，第一種就是語法錯誤，第二種就是沒包好。 簡單來說就是背背樂，多打就會了。 我一開始是看這個 [常用 LaTeX 數學符號指令 - HackMD](https://hackmd.io/@CynthiaChuang/Basic-LaTeX-Commands) 後來找到這位大佬 [$\\LaTeX$ 語法筆記 - HackMD](https://hackmd.io/@RintarouTW/LaTeX_%E8%AA%9E%E6%B3%95%E7%AD%86%E8%A8%98) 阿他也有很多其他很有意思的筆記，可以去看看 這是用書本模式弄的，書本模式在官方版教學有，可以去看看。 LaTeX有幾個需要注意的小地方 1. 若想在Latex中顯示空格，則需多打一反斜線(其實就是跳脫字元)來顯示 2. 有些符號(如：`{`,`}`,`%`是Latex會自動忽略的(因為它是其中一個語法))，所以一樣若要在Latex指令中顯示這些符號，就必須加上跳脫字元才能顯示(反正如果你遇到沒辦法顯示的就多打個反斜線在前面就好)。 3. 承第一點，Latex中每個空格都很小，所以可以利用\quad或\qquad來一次空更多格。 4. 函數(如：$\sin$,$\cos$,$\ln$,$\tanh$,$\arctan$,$\arg({z})$)是`$\函數名稱$`，才會顯示正體。`$\sin$,$\cos$,$\ln$,$\tanh$,$\arctan$,$\arg({z})$` 5. 雙反斜線是換行字元，如果單純按enter會編譯錯誤。 集合的範例 $\mathbb{N}\subset\mathbb{R}\land\mathbb{N}\subset\mathbb{C}$ $1\in\mathbb{N}\land 1\in\mathbb{R}$ $x\in\mathbb{Q}\implies x=0\lor x=\dfrac{p}{q},p,q\in\mathbb{Z}-\{0\}$(我只是想演示一下「或」的符號) $\mathbb{N}\cup\mathbb{R}=\mathbb{R},\mathbb{N}\cap\mathbb{R}=\mathbb{N}$ $\mathbb{Q^c}=\{x\mid\exists<a_k>,\forall a_k\in\mathbb{Q},s.t.\displaystyle\lim_{n\to\infty}a_n=x\}$ $\mathbb{Q}\cap\mathbb{Q^c}=\varnothing$ ```latex $\mathbb{N}\subset\mathbb{R}\land\mathbb{N}\subset\mathbb{C}$ $1\in\mathbb{N}\land 1\in\mathbb{R}$ $x\in\mathbb{Q}\implies x=0\lor x=\dfrac{p}{q},p,q\in\mathbb{Z}-\{0\}$ $\mathbb{N}\cup\mathbb{R}=\mathbb{R},\mathbb{N}\cap\mathbb{R}=\mathbb{N}$ $\mathbb{Q}\cap\mathbb{Q^c}=\varnothing$ $\mathbb{Q^c}=\{x\mid\exists<a_k>,\forall k\in\mathbb{N}\implies a_k\in\mathbb{Q},s.t.\displaystyle\lim_{n\to\infty}a_n=x\}$ ``` 希臘字母就是`\讀音` 如$\alpha\beta\gamma\delta\pi\eta\mu\nu\zeta\epsilon$ `$\alpha\beta\gamma\delta\pi\eta\mu\nu\zeta\epsilon$` 建議用$\varepsilon$因為好看多了 `$\varepsilon$` 要大寫就是指令第一個字母大寫，不過有些沒有 $\Gamma\Delta\Sigma\Pi$ `$\Gamma\Delta\Sigma\Pi$` 線段，射線，直線，向量 $\overline{PQ},\overrightarrow{OP},\overleftrightarrow{AP},\vec{a}$ `$\overline{PQ},\overrightarrow{OP},\overleftrightarrow{AP},\vec{a}$` 建議射線就直接用\vec指令，因為比較省時間 cases,matrix,determinant $\begin{cases}3x+4y=5\\5x+2y=8\end{cases}$ $\begin{bmatrix}\cos{\alpha}&0&-\sin{\alpha}\\0&1&0\\\sin{\alpha}&0&\cos{\alpha}\end{bmatrix}$ $\begin{vmatrix}1&1&1\\a&b&c\\a^2&b^2&c^2\end{vmatrix}$ ```latex $\begin{cases}3x+4y=5\\5x+2y=8\end{cases}$ $\begin{bmatrix}\cos{\alpha}&0&-\sin{\alpha}\\0&1&0\\\sin{\alpha}&0&\cos{\alpha}\end{bmatrix}$ $\begin{vmatrix}1&1&1\\a&b&c\\a^2&b^2&c^2\end{vmatrix}$ ``` 以下是綜合範例 ```latex $dm=\rho dA=\dfrac{M}{4\pi R^2}2\pi R^2\sin\theta d\theta=\dfrac{M}{2}\sin{\theta}d\theta$ $r=R\sin{\theta}$ $I=\displaystyle\int_{0}^{\pi}R^2\sin^{2}\theta\dfrac{M}{2}\sin{\theta}d\theta=\dfrac{MR^2}{2}\displaystyle\int_{0}^{\pi}\sin^{3}\theta d\theta \\=\dfrac{MR^2}{2}\displaystyle\int_{0}^{\pi}(\cos^{2}\theta-1)d\cos{\theta}=\dfrac{MR^2}{2}(\dfrac{1}{3}\cos^3\theta-\cos{\theta}\Bigg|_{0}^{\pi})=\dfrac{2}{3}MR^2$ ``` 會變成 $dm=\rho dA=\dfrac{M}{4\pi R^2}2\pi R^2\sin\theta d\theta=\dfrac{M}{2}\sin{\theta}d\theta$ $r=R\sin{\theta}$ $I=\displaystyle\int_{0}^{\pi}R^2\sin^{2}\theta\dfrac{M}{2}\sin{\theta}d\theta=\dfrac{MR^2}{2}\displaystyle\int_{0}^{\pi}\sin^{3}\theta d\theta \\=\dfrac{MR^2}{2}\displaystyle\int_{0}^{\pi}(\cos^{2}\theta-1)d\cos{\theta}=\dfrac{MR^2}{2}(\dfrac{1}{3}\cos^3\theta-\cos{\theta}\Bigg|_{0}^{\pi})=\dfrac{2}{3}MR^2$ > 雖然在Hackmd中，`$你好$`能夠被正常顯示出來($你好$)： > ![](https://hackmd.io/_uploads/SysPUj4Ph.png) > 但是記得，真正的Latex是看不懂中文的(中文對於Latex來說只是一堆unicode編碼)，只是因為Hackmd有幫我們做改善才有辦法顯示的 > 所以建議在學習的時候不要把中文字打進Latex中。 ### displaystyle說明 上面的範例中有`$\displaystyle$`這個關鍵字，基本上這是用來讓數學式變得更好看的。 有幾個指令建議使用這個關鍵字：`$\lim$,$\int$,$\sum$,$\prod$,$\frac$` `$\frac$`指令可直接使用`$\dfrac$`即可。 * 沒使用：$\lim_{n\to\infty}\dfrac{3n^2-29301n}{5n^2+200}$ * 有使用：$\displaystyle\lim_{n\to\infty}\dfrac{3n^2-29301n}{5n^2+200}$ 原始碼 ```latex 沒使用：$\lim_{n\to\infty}\dfrac{3n^2-29301n}{5n^2+200}$ 有使用：$\displaystyle\lim_{n\to\infty}\dfrac{3n^2-29301n}{5n^2+200}$ ``` ### 大括弧 如你所見，以上的範例中有很多大括弧，這是表示把整坨大括弧內的字與指令視為一體來操作，所以如果你覺得不放心，就儘管使用大括弧吧。 ## 各種貼上功能 ### Code Hackmd可以貼上Code。用法如下 ```python= import random print("hello world") print(random.randint(0,334)) ``` ![](https://hackmd.io/_uploads/HyFyFiNvn.png =50%x) > 在網頁下方有個扳手的圖示，可以點開他，找到Enable smart paste，把你在其他編輯器寫好的Code貼上，Hackmd將會自動偵測程式語言並做出相對應的動作(如spaceing之類的) > ![](https://hackmd.io/_uploads/BJbvtiNv3.png =30%x) ### 圖片 這邊先教電腦截圖方法，就是按下`windows+shift+s`或是`windows+prntscreen`就可以截圖了。前者是選取部分截圖，後者是整個螢幕截圖。 截圖完後圖片會馬上存到你的剪貼簿(就是複製貼上有個歷史，他會排在第一個，開啟這個歷史可以用`windows+v`開啟)，然後直接在Hackmd的編輯區按下`ctrl+v`，Hackmd就會自己上傳圖片到雲端，你也可以利用這個圖片網址來分享給其他人。 這是剛剛python語法截圖的截圖，後面=50%x是調整大小，語法就是 (記得空一格)` ={number}%x`number不用大括弧，就填1~100的數字就好。 ![](https://hackmd.io/_uploads/HJJ_5jNw2.png) 也可以從本機拉圖片上來，就只要像是在上傳雲端硬碟的時候那樣拉上編輯區他就會自己貼上了。 ### 超連結 簡單來說你只要在隨便一個地方複製他的網址，再貼上，Hackmd就會自己把網址的網站名稱和網址弄成超連結(要開啟以上講的smart paste) 比如：[(2168) Why Minecraft isn't Fun Anymore - YouTube](https://www.youtube.com/watch?v=5mZs01p7pVk) 不過如果要貼上youtube影片還有另一種作法 只要輸入大括弧就會跳出可以選的，youtubeid就是指網址後面的像是亂碼的東西，把youtubeid改成這東西就好。 ![](https://hackmd.io/_uploads/rkErooEv3.png) {%youtube 5mZs01p7pVk %} 你也有看到，可以直接引用其他的note，或是插入pdf，可以自己去試試看。 其他的我只有用過`gist`，所以我也不知道其他的是啥。 ## HTML與CSS支援 Hackmd能夠直接顯示`HTML`語法，也可以用`CSS`來style`HTML` 這邊給幾個`HTML`與`CSS`的小範例，基本上會這些就還滿夠用在Hackmd美編上面了 ### 基本文字元素 <span style="color:red;font-size:50px;">hi你好</span> ``` <span style="color:red;font-size:50px;">hi</span> ``` font-size就是文字大小 也可以改成`<p style="color:red;font-size:50px;">hi</p>`，效果一樣(只有效果一樣，其實本質差很多，但這邊不多做解釋，有興趣可以自己上網學CSS)。 這個color可以換成HEX表示法或是rgba表示法 [色碼表 \- Wibibi](https://www.wibibi.com/info.php?tid=372) `rgba(r,g,b,a)`，rgb是介於0\~255的整數值，a介於0\~1的小數(下兩位才有效，再多沒效。) 所以語法可以變成 `<p style="color:rgba(32,35,150,0.5);font-size:50px;">hi</p>` <p style="color:rgba(32,35,150,0.5);font-size:30px;">hi</p> <a href="https://youtu.be/PiQG15rir3w">Click me</a> ``` <a href="https://youtu.be/PiQG15rir3w">Click me</a> ``` 這個一樣也可以加上style，只是有些屬性他不會變動，變成 `<a href="https://youtu.be/PiQG15rir3w" style="font-size:50px;">Click me</a>` <a href="https://youtu.be/PiQG15rir3w" style="font-size:50px;">Click me</a> 文字置左置中置右 <p style = "text-align:left;">left</p> <p style = "text-align:center;">center</p> <p style = "text-align:right;">right</p> ``` <p style = "text-align:left;">left</p> <p style = "text-align:center;">center</p> <p style = "text-align:right;">right</p> ``` ## 簡易`div`教學 這東西能夠做到很多美編的效果，通常搭配`class`來使用 首先得先定義甚麼是`class`，通常我們會把`class`的定義放在文件最上方(就是這個編輯區的最上方)，用法如下 ``` <style> .class_name{ text-align:right; color:red; font-size:60px; } </style> 正文開始 ``` 那`div`就是搭配定義好的`class`使用，`class`裡面調了甚麼屬性，就會在被`div`包覆住的元素中呈現出來(如果可以)。 `div`本身可以想成是一個文字方塊，就是把某些東西一起做操作而已。 ``` <div class="class_name"> <p>hi</p> <span>hello world</span><br> <a href="https://youtu.be/PiQG15rir3w">don't click me</a> </div> ``` > `<br>`是換行，可以試試如果沒有會怎樣。 <div class="class_name"> <p>hi</p> <span>hello world</span><br> <a href="https://youtu.be/PiQG15rir3w">don't click me</a> </div> `div`也可以弄框線，也可以做背景圖片，背景顏色，甚至可以有動畫。 但那個有點太多了可以自己去學，這邊只教簡易版本。