md.nchuit.cc/html/

MarkDown簡介與
基礎語法

VJ

背景

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、簡書等，甚至還能被用來撰寫電子書。

環境

GitHub: github.com `readme.md` `*.md` 等下會講

GitHub Markdown 爆改詳情

HackMD: hackmd.io 註冊

HackMD 使用教學

HackMD 註冊流程

MarkDown主要用途

簡化HTML: 標題

<h1>標題一</h1>
<h6>標題六</h6>

MarkDown

# 標題一
###### 標題六

粗體斜體底線刪除線標記文字

**粗體** *斜體* ++底線++ ~~刪除線~~ ==標記文字==

練習: ~~我沒辦法全都要?~~

***~~我沒辦法全都要~~***

無序清單有序清單待辦事項(?)

- 無序清單項1
- 無序清單項2
1. 有序清單項1
2. 有序清單項2
- [x] 待辦事項1
- [ ] 待辦事項2

無序清單項甲
無序清單項乙

有序清單項甲
有序清單項乙

待辦事項甲
待辦事項乙

分隔線 `<hr>`

<hr>
---
----

CSS

<style>
hr{display:none}
</style>

https://hackmd.io/yaml-metadata

---
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
---

超連結

[超連結](https://www.google.com "標題文字！")

超連結

插入圖片

![](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)

表格

| 欄位標題A | 欄位標題B | 欄位標題C |
| ---------:|:---------:| --------- |
|    欄位A1 |  欄位B1   | 欄位C1    |
|    欄位A2 |  欄位B2   | 欄位C2    |

欄位標題A	欄位標題B	欄位標題C
欄位A1	欄位B1	欄位C1
欄位A2	欄位B2	欄位C2

程式碼

行內 `程式碼` 現在我有`冰淇淋`

行內 程式碼 現在我有冰淇淋

程式碼區塊

```python
while True:
    print("hello world")
```

while True:
    print("hello world")

嵌入

Youtube(HackMD 獨家)

{%youtube dQw4w9WgXcQ %}

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

引用區塊

> 引用區塊也可以是巢狀的喔...
>> ...可以多層次的使用...
> > > ...或是用空白隔開

引用區塊也可以是巢狀的喔…

…可以多層次的使用…

…或是用空白隔開

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]

您可以使用以下語法，表明自己的 姓名、時間與顏色 並與其他的引用區塊做區別
ChengHan WuSun, Jun 28, 2015 9:59 PM

也支援巢狀引用區塊喔！
ChengHan WuSun, Jun 28, 2015 10:00 PM

警告區塊(HackMD 獨家)

耶

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

這是訊息

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

注意

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

喔不

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

點選顯示更多內容

找到我了！

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

預設展開摺疊內容

找到我了！

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

And more…

HackMD 簡報?

將HTML/MarkDown放上網

HackMD 檔案下載

MD-HackMD

書本/簡報都需要透過「分享的連結」或按下「預覽」才有效果

本頁簡報(簡報詳解)
書本模式(按預覽才有側邊欄)

HTML/MD-GitHub

https://github.com/twjmy/twjmy.github.io

註冊 GitHub(電腦) github.com

點擊註冊按鈕「Sign up」

輸入帳號「Continue」

輸入密碼後點「Continue」

輸入ID(username)後點「Continue」，注意只能是字母和半形「-」號

訂閱電郵，看你要輸入「y」或「n」都可以，然後點「Continue」

機器人驗證後點「Create account」

收郵件驗證信箱，打完數字會自動繼續

資料填寫(剩下自己填完，也可以滑到下面跳過)

上傳

點「Create repository」新建存放庫

輸入存放庫名稱 ⚠️請填寫成 [自己的ID].github.io⚠️

⚠️一定設成要公開(Public)，不然等下網頁出不來⚠️

⚠️剩下都不用勾⚠️，點「Create repository」建立存放庫

丟完檔案之後，等待上傳完成滑到最下面點「Commit changes」

檔案可以在 HackMD 下載

⚠️注意檔名⚠️

*.html檔存成index.html
*.md檔存成readmd.md

上傳完成後的頁面會是這樣子。上傳完之後不會立刻有網頁，
我們點「Actions」看看網頁的建立過程，看看建得怎麼樣

等個不到一分鐘的時間，看到綠色勾勾就代表網頁就出爐啦~

點進去你可以看到[自己的ID].github.io的網址

你的網站就架好啦~

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

md.nchuit.cc/html/

MarkDown簡介與基礎語法

目錄

背景

環境

GitHub: github.com readme.md *.md 等下會講

HackMD: hackmd.io 註冊

MarkDown主要用途

粗體 斜體 底線 刪除線 標記文字

無序清單 有序清單 待辦事項(?)

分隔線 <hr>

超連結

插入圖片

表格

程式碼

嵌入

Youtube(HackMD 獨家)

引用區塊

HackMD 獨家

警告區塊(HackMD 獨家)

And more…

HackMD 簡報?

將HTML/MarkDown放上網

HackMD 檔案下載

MD-HackMD

書本/簡報 都需要透過「分享的連結」或按下「預覽」才有效果

HTML/MD-GitHub

註冊 GitHub(電腦) github.com

上傳

MarkDown簡介與
基礎語法

GitHub: github.com `readme.md` `*.md` 等下會講

粗體斜體底線刪除線標記文字

無序清單有序清單待辦事項(?)

分隔線 `<hr>`

書本/簡報都需要透過「分享的連結」或按下「預覽」才有效果