開啟 Visual Studio Code 後點擊紅框中的 Add workspace folder… 將專案資料夾載入:
載入專案資料夾後快速連點你的網頁(index.html 檔案):
接著點擊擴充套件的圖示:
在搜尋框中搜尋 Live Server:
點擊搜尋到的第一個套件 Live Server 右下的 install 按鈕:
安裝完後在右下角點擊 Go Live:
點擊 Go Live 後, 會自動幫你在瀏覽器中開啟你的網頁:
回到 Visual Studio Code 中修改 HTML 內容,修改完後記得存檔:
存檔後網頁內容就會自動即時更新了:
如果想要修改樣式也是同樣道理,修改完目標元素的樣式後記得要存檔:
存檔後修改的樣式就會自動即時更新了:
每次修改網頁內容後記得要存檔才會自動即時更新,
每次修改網頁內容後記得要存檔才會自動即時更新,
每次修改網頁內容後記得要存檔才會自動即時更新,
很重要必須說三次!
or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing