<style> hr{display:none} section h1 span{font-size:40%} section h1,section h2,section h3,section h4,section h5,section h6,section p,section blockquote {color:#656c73!important}section a{color:#337ab7!important}section img{border:0!important} section br{display:inline!important} br#title{display:none} section h2.toc{display:none!important} h2.toc{display:inline;border:0} </style> #### [md.nchuit.cc/html/](https://md.nchuit.cc/html/edit?view) # <i class="fa fa-markdown"></i>MarkDown簡介與<br id='title'>基礎語法 > [<small><i class="fa fa-fw fa-github"></i>VJ</small>](https://github.com/twjmy) :::spoiler <h2 class='toc'>目錄</h2> {state=open} + 參考: [HackMD](https://hackmd.io/features-tw?both), [Github](https://gist.github.com/billy3321/1001749662c370887c63bb30f26c9e6e) [ToC] ::: --- ## 背景 [Markdown](https://zh.wikipedia.org/wiki/Markdown)是一種**輕量級**標記式語言，最重要的設計是**可讀性**，也就是說這個語言應該要能**直接在字面上的被閱讀**，而不需要用被一些**格式化指令**來標記（像是RTF與HTML）。它允許人們使用易讀易寫的純文字格式編寫文件，然後轉換成有效的XHTML（或者HTML）文件。 * 初始版本： 2004年3月19日 （18年前） * 最新版本： 1.0.1 2004年12月17日 （17年前） ---- 由於Markdown的輕量化、易讀易寫特性，並且對於圖片，圖表、數學式都有支援，目前許多網站都廣泛使用Markdown來撰寫說明文件或是用於論壇上發表訊息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、簡書等，甚至還能被用來撰寫電子書。 --- ## 環境 ### <i class="fa fa-fw fa-github"></i>GitHub: github.com `readme.md` `*.md` 等下會講 * [GitHub Markdown 爆改詳情](https://github.github.com/gfm/) ### <i class="fa fa-fw fa-file-text"></i>HackMD: hackmd.io 註冊 * [HackMD 使用教學](https://hackmd.io/c/tutorials-tw) ---- :::spoiler HackMD 註冊流程  ----  ----  ----  ----  ----  ----  ::: --- ## MarkDown主要用途 簡化HTML: 標題 ```html <h1>標題一</h1> <h6>標題六</h6> ``` MarkDown ```markdown # 標題一 ###### 標題六 ``` --- ### <i class="fa fa-fw fa-bold"></i>粗體 <i class="fa fa-fw fa-italic"></i>斜體 <i class="fa fa-fw fa-underline"></i>底線 <i class="fa fa-fw fa-strikethrough"></i>刪除線 <i class="fa fa-highlighter"></i>==標記文字== ```markdown **粗體** *斜體* ++底線++ ~~刪除線~~ ==標記文字== ``` :::spoiler 練習: ***~~我沒辦法全都要?~~*** ```markdown ***~~我沒辦法全都要~~*** ``` ::: ---- ### <i class="fa fa-fw fa-list-ul"></i>無序清單 <i class="fa fa-fw fa-list-ol"></i>有序清單 <i class="fa fa-list-check"></i>待辦事項(?) ```markdown - 無序清單項1 - 無序清單項2 1. 有序清單項1 2. 有序清單項2 - [x] 待辦事項1 - [ ] 待辦事項2 ``` - 無序清單項甲 - 無序清單項乙 1. 有序清單項甲 2. 有序清單項乙 - [x] 待辦事項甲 - [ ] 待辦事項乙 ---- ### 分隔線 `<hr>` ```markdown <hr> --- ---- ``` CSS ```markdown <style> hr{display:none} </style> ``` ---- https://hackmd.io/yaml-metadata ```markdown --- tags: 從HTML到MarkDown title: MarkDown 簡介與基礎語法 description: 從HTML到MarkDown1-講義簡報-資訊社主題社課 image: 'https://i.imgur.com/1Q6Rm96.png' slideOptions: loop: true theme: Black (default) - White - League - Sky - Beige - Simple Serif - Blood - Night - Moon - Solarized --- ``` ---- ### <i class="fa fa-fw fa-link"></i>超連結 ```markdown [超連結](https://www.google.com "標題文字！") ``` [超連結](https://www.google.com "標題文字！") ---- ### <i class="fa fa-fw fa-image"></i>插入圖片 ```markdown ![](https://網址 "標題文字" =寬x高) ``` [![](https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png "HTML5 JS CSS3" =500x)](https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png "標題文字！") :::spoiler 練習: 圖片超連結 ```markdown [![](https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png "HTML5 JS CSS3" =500x)](https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png) ``` ::: ---- ### <i class="fa fa-fw fa-table"></i>表格 ```markdown | 欄位標題A | 欄位標題B | 欄位標題C | | ---------:|:---------:| --------- | | 欄位A1 | 欄位B1 | 欄位C1 | | 欄位A2 | 欄位B2 | 欄位C2 | ``` | 欄位標題A | 欄位標題B | 欄位標題C | | ---------:|:---------:| --------- | | 欄位A1 | 欄位B1 | 欄位C1 | | 欄位A2 | 欄位B2 | 欄位C2 | ---- ### <i class="fa fa-fw fa-code"></i>程式碼 ```markdown 行內 `程式碼` 現在我有`冰淇淋` ``` 行內 `程式碼` 現在我有`冰淇淋` 程式碼區塊 ````markdown ```python while True: print("hello world") ``` ```` ```python while True: print("hello world") ``` ---- ### <i class="fa fa-fw fa-code"></i>嵌入   ---- ### <i class="fa fa-fw fa-youtube"></i>Youtube(HackMD 獨家) ```markdown {%youtube dQw4w9WgXcQ %} ``` {%youtube dQw4w9WgXcQ %} ---- ### <i class="fa fa-fw fa-quote-left"></i>引用區塊 ```markdown > 引用區塊也可以是巢狀的喔... >> ...可以多層次的使用... > > > ...或是用空白隔開 ``` > 引用區塊也可以是巢狀的喔... >> ...可以多層次的使用... > > > ...或是用空白隔開 ---- #### <i class="fa fa-fw fa-file-text"></i>HackMD 獨家 ``` > 您可以使用以下語法，表明自己的 **姓名、時間與顏色** 並與其他的引用區塊做區別 > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7] > > 也支援巢狀引用區塊喔！ > > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red] ``` > 您可以使用以下語法，表明自己的 **姓名、時間與顏色** 並與其他的引用區塊做區別 > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7] > > 也支援巢狀引用區塊喔！ > > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red] ---- 警告區塊(<i class="fa fa-fw fa-file-text"></i>HackMD 獨家) --- :::success 耶 :tada: ::: :::info 這是訊息 :mega: ::: :::warning 注意 :zap: ::: :::danger 喔不 :fire: ::: ---- :::spoiler 點選顯示更多內容 找到我了！ :stuck_out_tongue_winking_eye: ::: :::spoiler {state=open} 預設展開摺疊內容 找到我了！ :stuck_out_tongue_winking_eye: ::: ---- ## [And more...](https://hackmd.io/c/tutorials-tw) ---- ## [HackMD 簡報?](https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-create-slide-deck-tw) [](https://hackmd.io/slide-example?both) --- ## 將HTML/MarkDown放上網 ---- ### HackMD 檔案下載  ---- ### MD-HackMD ###### 書本/簡報 都需要透過「**分享的連結**」或按下「**預覽**」才有效果 + [本頁簡報](/@NCHUIT/mdhtml3)([簡報詳解](/how-to-create-slide-deck-tw?both)) + [書本模式](/@NCHUIT/mdhtml/edit?both)(按預覽才有側邊欄)   --- ### HTML/MD-[GitHub](https://github.com/) https://github.com/twjmy/twjmy.github.io --- ### 註冊 GitHub(電腦) github.com 1. 點擊註冊按鈕「Sign up」  ---- 2. 輸入帳號「Continue」  ---- 3. 輸入密碼後點「Continue」  ---- 4. 輸入ID(username)後點「Continue」，注意只能是字母和半形「-」號  ---- +  ---- 5. 訂閱電郵，看你要輸入「y」或「n」都可以，然後點「Continue」  ---- 6. 機器人驗證後點「Create account」  ---- 7. 收郵件驗證信箱，打完數字會自動繼續  ---- 8. 資料填寫(剩下自己填完，也可以滑到下面跳過)  ---- +  ---- +  ---- +  ---- +  ---- +  ---- ### 上傳 1. 點「Create repository」新建存放庫  ---- 2. 輸入存放庫名稱 ==⚠️請填寫成 `[自己的ID].github.io`⚠️==  ---- + ==⚠️一定設成要公開(Public)，不然等下網頁出不來⚠️==  ---- + ==⚠️剩下都不用勾⚠️==，點「Create repository」建立存放庫  ---- 3. 丟完檔案之後，等待上傳完成滑到最下面點「Commit changes」  ---- +  ---- + 檔案可以在 HackMD 下載 +  :::info ⚠️注意檔名⚠️ 1. `*.html`檔存成`index.html` 2. `*.md`檔存成`readmd.md` ::: ---- 4. 上傳完成後的頁面會是這樣子。上傳完之後不會立刻有網頁， 我們點「Actions」看看網頁的建立過程，看看建得怎麼樣  ---- +  ---- + 等個不到一分鐘的時間，看到綠色勾勾就代表網頁就出爐啦~  ---- + 點進去你可以看到`[自己的ID].github.io`的網址  ---- + 你的網站就架好啦~