Transcription
Markdown 是一種輕量級標記式語言,使用易讀易寫的純文字格式編寫,並且對於圖片、圖表、數學式都有支援。
在學習程式設計、軟體開發,以及紀錄我人生的大小事務上,我認為 Markdown + iCloud + Git 的組合是目前最佳的數位筆記方案,因為它簡單、純粹,而且跨平台、可版控。但最重要的是,單純的文字符號使用是完全免費的。也許它本身並不提供酷炫的樣式,但它可以成為任何樣式,也可以轉換任何格式,它的未來擁有無限的可能。
歡迎來到 Gamma Ray 軟體工作室,你好,我是 Richard。工作室的名稱取自「Gamma Ray Burst」,起源於我在軟體工程師的職務上,對於各種不嚴謹工序的不滿,導致我憤怒的想要爆炸。因此,在這裡提供軟體開發的各種知識、技術、工具,協助程式設計師從無到有實作功能,並且以嚴謹的編程思維,提升軟體工程師的核心競爭力。如果在過程中有說錯任何東西,歡迎批評與指教,也可以將你想法與建議在下方留言。
說起我與 Markdown 的相遇,是在第一份工作後開始學習 git,發現 GitHub 上會預設一個 README.md 的文件,但我不以為意。當時,正在學習 Android 的開發,筆記仍然使用 txt 的記事本紀錄,因此表達的樣式不怎麼多。後續,我換成了 A5 的筆記本,雖然堅持了一年多,但紙筆的記錄還是有一些累人。直到我擁有了 Macbook 與 iPhone,使用內建的備忘錄,才又換回數位的方式。筆記的連動讓我很開心,但有一點困擾,我的筆記的數量在當時已經大幅的成長。使用 Windows 的電腦訪問 iCloud 線上服務時,很常轉了很久才出現,或者是直接發生異常。因此,我開始尋覓下一個筆記的方法。
他必須要滿足最基本的記錄功能,可以表達多種格式,但又不能太複雜。最好是能夠跨平台支援,不僅是 MacBook 筆電、iPhone 手機,還希望可以到 Windows 桌機、Android 平板。我發現 Markdown 就是最佳解:輕量級標記式語言、表達多種格式、易讀易寫純文字。編輯起來就是單純。使用 iCloud 或 Google Drive 輕鬆實現跨平台文檔交流。更加超乎我預期的,還可以使用 git 來版本控制筆記。
這次我會在這邊介紹 Markdown 的快速入門方法,以及一些我在使用的 Markdown 語法。後續還會有 Markdown 相關軟體、Markdown 文檔用途、Markdown 繪圖處理等... 敬請期待。
近期 Gamma Ray 軟體工作室的部落格已經建立,可以在上面查看這次教程的文章。Markdown 文件的部分,同樣放置在 GitLab 網站。相關連結都有在影片的下方。現在可以先暫停一下影片,訪問下面的連結,打開部落格的文章,或者在 GitLab 上取得 Markdown 的文件。GitLab 的文件如何取得?可以參考我之前的 Git 教程。打開部落格文章或者 Markdown 文件之後,再繼續觀看教程。
這次的教程,在專案的 Markdown/ 目錄底下,有兩個文件:001.markdown-template.md、002.markdown-tutor.md。001 是 Markdown 的語法範例,只有在有需要時才會拿出來的參考資料。002 則是基本語法的教程,也是這次的主要內容。由於 Markdown 格式在同一種標籤下可以有多種符號表示,這裡不會介紹每一種標籤符號的全部用法,僅會整合平時撰寫文檔、筆記、教程時固定使用的格式,並且提供語法範例。
首先,要準備軟體。文本編輯器的部分,比較自由,沒有任何限制。你可以想一下,你平常在編輯純文字檔案,也就是記事本 txt 格式的時候,是用什麼軟體。Notepad++, Sublime, VSCode 皆可。我這邊個人的習慣,Mac 是使用 Vim 編輯器,Windows 是使用 Adobe Brackets。這些相關的編輯器,下一部影片會再介紹。想好你平常在使用的編輯器後,幫我做個測試,用該軟體打開這份教程文件,看一下是不是有看到畫面上的內容。Markdown 純文字的部分,大致上就是長這個樣子。
再來要準備的軟體是 Markdown 的檢視器。我平時在使用的是 Chrome 的插件。跟文本編輯器一樣,也是很自由。你可以選擇其它種的檢視器,例如 VSCode, Typora 等。但目前我認為 Chrome 的插件是最簡單,而且基本上每台電腦都應該會有這個瀏覽器。打開 Chrome 應用程式,Chrome 線上應用程式商店,搜尋 markdown viewer。找到這個應用程式,加到 Chrome。可以看見多一個字母 m 的圖示。
再來設定擴充功能。右鍵,管理擴充功能。把「允許存取檔案網址」打開。因為我們的 Markdown 文件是在本地端使用,Chrome 存取的時候,需要權限才能訪問。再來,如果你已經安裝好了 Markdown Viewer 插件,幫我在做個測試。把教程文件拖進 Chrome 瀏覽器中,看一下是不是有看到畫面上的網頁內容。Markdown 標籤渲染的部分,就是長這個樣子。點擊插件的圖示,還可以改變主題樣式,或者是將檔案的目錄顯示在側邊欄。
進入到 Markdown 語法的部分。此部分為 001.markdown-template 語法範例的精簡內容,但我平時撰寫文檔時使用的標籤符號,大多已經包含在此部分。
H1 大標題的部分,可以用一個 #,或者是文字下方加上 = 的符號來代表。這邊,我固定都是使用 = 符號,常駐數量 6 個,而且通常會與檔名相同,或者是使用檔名的完整名稱。這邊可以來跟我一起測試這個語法。先建立一個副檔名為 .md 的檔案,用編輯器開啟,輸入語法 H1 大標題,六個等於,存檔。然後在 Chrome 中瀏覽,剛剛輸入的文字已經變成 H1 的大標題。
H2 標題的部分,可以用兩個 #,或者是文字下方加上 - 的符號來代表。這邊,我固定都是使用 - 符號,常駐數量 6 個。通常我撰寫的文檔,會常駐開頭「目錄」與結尾「參考資料」兩個 H2 標題。兩者之間會放置其他的 H2 標題,依據目錄列表順序撰寫文件內容。這邊可以來跟我一起測試這個語法。存檔,然後在 Chrome 中瀏覽。
H3 子標題的部分,只能使用三個 #。通常用在 H2 標題的下一階層中,不會單獨存在於其他的階層。例如,不會單獨的撰寫在 H1 標題之下。
H4 以後的標題,我撰寫的文檔內不會使用到,因為呈現的文字大小已經與內文差不多以外,H4, H5, H6 的標題井字符號超過三個以上出現得太頻繁,也會使得純文本的情況下不好辨認。
內文的部分,一般文字相連的兩行在渲染時並不會換行,必須要再多空一行,渲染才會生效。所以通常只會注意換行的段落是否恰當。但若文字太多的情況下,則是會使用區塊或程式碼符號標示,這部分後續會提到。
粗體樣式的文字,曾經在標題部分提過 H4 小標題以下不使用。但若仍有下一階層分段的需求,通常會使用粗體文字取代。因此,一份文檔中,通常除了 H1 大標題以外,只會有三個階層:H2 標題、H3 子標題、粗體 (小標題)。若超出此階層內容,我通常會再重新安排文檔格式,使之不超出三個階層。而內文中的文字樣式,在撰寫文檔內文時,會視情況使用粗體、斜體、刪除線。原則上會盡量不使用到 HTML 語法,例如底線,或者是更改文字的樣式,以避免造成純文字格式閱讀時的困難。
清單的部分有三種型態:項目列表、任務列表、數字列表。
項目列表的符號,共有三種可以使用:加號 (+)、減號 (-)、米號 (*)。我固定使用 + 的符號,並且前方可以加空格縮排階層。我的習慣是,項目列表的階層最多三層。而最基本的應用,就是每個文檔的目錄。
任務列表的符號與項目列表一樣有三種符號可以使用。不同的地方在於,符號後方會加上兩個中括號。有 X 的代表任務清單打勾,沒有 X 的代表任務清單未打勾。我同樣固定使用 + 的符號,而任務列表縮排的階層,我最多只會使用到兩層。這個的用途,就是應用在待辦清單上。
數字列表的符號,就是直接使用阿拉伯數字加上點,空一格。使用的機率不高。清單列表,我通常優先以 + 符號項目列表為主,有特殊情況需表明順序時才會使用。我使用時,縮排最多一層。而數字列表有一個特性,文本的數字不影響最終渲染的樣式,但在純文本的情況下,仍維持順序排列,避免閱讀純文本時有落差。有時會與項目列表符號 + 在不同階層混合使用。
標註的部分,使用反引號 (`) 左右包覆文字,樣式是文字有背景顏色,外層有線框。可以很快速地清楚知道此段文字是重點部分。我通常會使用在三個地方:標題補充、清單補充、內文標註。
標題補充,就是在 H1 大標題、H2 標題、H3 子標題下方補充說明,可以是簡介、大綱、副標題。目的是用於幫助閱讀文件的人,可以更快瞭解章節內容。
清單補充,就是使用在清單列表的後方,補充說明該項目其他的資訊內容。例如範例的項目列表後方標注日期,或者是完成日期。
內文標註,就跟內文部分提到的粗體、斜體、刪除線一樣,視內容的用途使用。有時候一些符號項目在內文中比較不明顯,或者是會跟 Markdown 語法搞混,會特別使用反引號標註。
區塊的部分,使用四個空格,後方接續文字。樣式跟反引號標註相似,不同的地方在於,跨佔整行。通常會用於標示較短的文字描述。因為純文字顯示下,四個空格其實不太容易辨認。因此若文字內容較長,我會使用三個反引號程式碼區塊來撰寫。程式碼區塊,下一部分就會說明。
程式碼的部分,使用三個反引號 (```) 上下包覆整段文字。通常用於撰寫特定的程式語言。檢視器瀏覽時,程式的語法會像 IDE 編輯時一樣,呈現多種的文字色彩。用於判別程式語言的文字在於,上方的三個反引號後方,加上程式語言名稱,例如 java, python, 或者是 markdown。也可以在撰寫技術教程時,另外一個很常用的名稱是叫 diff,類似於版本控制的差異比對功能。+ 代表新增的文字,樣式會以綠色代表;- 代表刪除的文字,樣式會以紅色代表。而若皆不使用,就是剛才區塊中提到的,文字內容較長,可以使用。替代方案,用這個方案也可以避免一般文字的換行問題。
分隔線的部分,可以使用 - 的符號,數量至少要三個以上。我通常在使用分隔線時,數量也剛好三個。目的是僅滿足最小渲染觸發條件,也可以避免多餘的文字符號佔用電腦空間。
超連結的部分,寫法有三種。第一種,大於小於符號左右包覆網址。第二種,中括號左右包覆標題,後方接續小括號左右包覆網址。第三種則與第二種相似,中括號一樣左右包覆標題,但網址的部分會寫在其它地方:中括號標題,冒號 (:),網址。這個方法可以統一管理標題的連結網址。在撰寫文章時,前兩個通常會使用在兩個地方:參考資料與文檔索引。第三個,則是會使用在文章內文中,避免純文字下超連結打亂排版。
文檔通常會常駐「目錄」與「參考資料」。目錄內容使用清單列表呈現。「參考資料」則使用 H3 子標題。紀錄網站的 H1 大標題下方,使用大於小於符號左右包覆網址,紀錄撰寫文檔時參考的資料來源。文檔索引是我在程式專案中的特殊用法。我通常會建立一個連接所有文檔的索引目錄,使用第二種中括號左右包覆標題,後方接續小括號左右包覆文件相對位置的超連結方法。目的是在開發時,查閱文件,從索引就可以快速的找到目標文件。我的範例是一個 iOS App 開發的專案文件索引。每個文件前方都會一個三位數的編號。這部分後續的文件教程會再詳細說明。
圖片的部分,類似於超連結的第二種方法,只是中括號的標題前方要再加一個驚嘆號 (!)。後方小括號的路徑,則是要顯示圖片位置。使用相對路徑。我通常會在文檔的同級目錄底下,新增一個 assets/ 資料夾,並且在資料夾內創建一個跟文件一樣編號的資料夾,作為圖片來源的目錄位置。圖片的部分除常見的 png, jpg 外,還會使用 svg 格式。在加入版本控制時,檔案會比較小,也易於版控比對。這部分後續會有詳細教程介紹。
表格的部分,使用垂直線 (|)、減號 (-)、冒號 (:) 組成。在純文字的情況下,排版成一個類似於表格的樣式。第二行的部分可以設定表格內的文字對齊方法。我通常只會使用最簡單的 Markdown 表格置左對齊,因為表格若要呈現較複雜的格式,例如合併儲存格,都必須要使用到 Html 的標籤,為了呈現樣式效果而導致原始的文檔變得不易閱讀,違背了原本 Markdown 易讀易寫的原則。若仍有複雜表格格式的需求,折衷的方案是使用超連結的方式,連接其他格式檔案,以外部擴展方式涵蓋表格功能。
以上,就是如何快速開始使用 Markdown,以及 Markdown 基本的語法使用。剛開始時曾提到,我認為目前最佳的數位筆記方案是 Markdown + iCloud + Git 的組合。讓我以我 iCloud 雲端硬碟上的筆記為例,稍微看一下我是如何去應用的。
iCloud 中我創建一個資料夾,名稱叫做 iStudioX,代表的是「雲端的工作室空間」。編號 01 到 03 代表的是三個不同型態的待辦清單。編號 04 是一般日常資訊紀錄。編號 05 則是一些日常任務規劃。
這邊在看 DevStudio,代表的是軟體開發的筆記。目錄裡面一樣有編號 01 到 05。01 是軟體開發的待辦清單。02 是軟體開發的參考資訊。03 是軟體開發的數位筆記。04 是軟體開發的參考資料。05 是軟體開發的專案規劃。進入到編號 03 軟體開發的數位筆記,可以看到我換成三位數的編號。這邊收錄了我過往接觸過的程式技術:Java, Android, iOS, Web, Python 等。而 Markdown 則是編號 007 開發工具中的第一項。
這邊可以了解到,我數位筆記的分類階層是非常的深,甚至可以說是有些複雜的。我相信應該還沒有筆記軟體可以做到階層如此深、分類如此細的結構目錄。要配置如此的檔案目錄結構,唯有跳脫筆記軟體的束縛,以獨立的文字檔案為基礎,然後搭配其他軟體組合運用,才能客製化一個最符合你需求的筆記方案。
而你可以發現,除了最核心的 Markdown 文檔,其他東西都是可以被替換的。就像 Chrome 的擴充插件一樣,可以在擴充的部分。除了上述提到過的軟體服務外,我有一些比較重要的文件會使用 git 版控,這也是我另外一種檔案備援的方案。而 Markdown 文檔本身,也可以使用 Pandoc 相關的轉檔軟體,進行 PDF, Word 或其他格式的轉換。這種擁有大量擴展性的屬性,其實是一種很重要的軟體設計概念。軟體之所以是軟體,是因為除了提供服務,也能輕易地改變服務。軟體設計的最高境界,就是期望產品能夠擁有無限的可能性。
如果這次的教程對你有幫助,除了訂閱、按讚,以及分享給平常不寫文件的人以外,也立馬開始使用 Markdown,開始撰寫專屬於你的人生筆記。謝謝。