---
disqus: chiaoshin369
---
# 如何使用 hackmd 進階功能
###### tags: `工作用` `工具`
## 前言
> **一開始練習使用 hackmd 3個月製作，學會了基本功能，後來透過學生時間的暑期時間，參加了筆記製作活動，發現有很多延伸的功能，是官方沒有撰寫與分享，所以才有此文章的誕生。**[color=#85d635]
> **由於這是看很多人撰寫hackmd方式，學習怎麼去運用，所以基本上很多參考來源也都附上，也希望各位使用時，能夠正向回饋，告訴我需要改進，以及可以學習的地方，希望可以多多交流~**:smile: [color=#85d635]
## 插入Youtube影片
### hackmd 官方嵌入
```java
{%youtube youtubeid %} //複製這段
```
>將 **youtubeid** 改為 **你要放的影片id**
>例如:
>https://www.youtube.com/watch?v=ka3JdmQ5_9g&ab_channel=%E5%B7%A7%E8%96%B0
>我們只取 `ka3JdmQ5_9g` 的部分 (&之後都不要)
>將 **youtubeid** 改為 **ka3JdmQ5_9g**
>就會呈現這樣
{%youtube ka3JdmQ5_9g %}
### Youtube官方 提供嵌入方式
<iframe width="420" height="315"
src="https://www.youtube.com/embed/JEUnVW028ys?autoplay=1&mute=1">
</iframe>
```htmlembedded
<iframe width="420" height="315"
src="https://www.youtube.com/embed/JEUnVW028ys?autoplay=1&mute=1">
</iframe>
```
```htmlembedded
<!-- 更改下方影片id -->
JEUnVW028ys
```
---
## 留言板
### :pushpin: 來源
>此為2016作者開發之功能
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fhackmdio%2Fphotos%2Fa.1004391802951362%2F1150324908358050%2F&show_text=true&width=500" width="500" height="436" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
### 自行研究文章 示範
:::success
![](https://i.imgur.com/6FyXN7n.png"title" =1000x450)
1. 先去 [disqus](https://disqus.com/) 註冊帳號
2. 再來參考這篇[**文章**](https://hackmd.io/@MaxWu/HkBOhM7t?type=view)
:::
### [文章](https://hackmd.io/@MaxWu/HkBOhM7t?type=view)教學 (中文翻譯):
1. **到** [**建立留言板 網站管理**](https://disqus.com/admin/create/)
2. **註冊一個 shortname** Ex: hackmd
![image alt](https://i.imgur.com/0ju0EU7.png"title" =500x500)
3. **在文章最頂部放上程式碼**
```
//複製下面程式碼
---
disqus: your-shortname
---
//your-shortname是剛剛設定的名稱，將他改為範例的hackmd
```
>:warning: 將 **your-shortname** 改為 **你要的留言板id**，而非 **官方示範的hackmd**。[color=#EA0000]
>
就會像下方留言一樣的效果
:paperclip:名稱**只要設定一次**即可，**每篇文章都會產生新的留言板**。
![image alt](https://i.imgur.com/AoYzsLd.png"title" =900x400)
:warning: <font color=#EA0000>**要將筆記設為 公開瀏覽 才能使用**</font>
### 額外文章參考:
[中文disqus教學](https://ithelp.ithome.com.tw/articles/10242269)
[客製化按讚教學](https://help.disqus.com/en/articles/2199501-reactions)
[中文文章](https://www.gss.com.tw/blog/disqus-blog%E7%95%99%E8%A8%80%E6%9D%BF%E5%8A%9F%E8%83%BD)
---
## PDF
>大部分上傳自己個人的google雲端無法使用
>基本上只能上傳github或額外空間，才能將PDF嵌入
==找到解決方法==
[HackMD 研討會常用功能 - HackMD](https://hackmd.io/@docs/conference?fbclid=IwAR0PxR6MWi562JL_1TCqhBHVKBZXhbAVe6ZnDXUbpl7LdhDG3KVBPXRwrrI)
### github上傳
>還不會用，麻煩看到的大神們幫忙
### slideShare上傳
1. [註冊slideShare](https://www.slideshare.net/)
2. [按此上傳PDF](https://www.slideshare.net/upload)
### Speakerdeck上傳
>還沒研究
[Upload a new deck - Speaker Deck](https://speakerdeck.com/new)
[參考官方文章](https://hackmd.io/zMEeqwHxSo6UYpASzcFIFQ?view)
---
## css客製化
### 看coscup開源人年會 研究到的
剛好最近這場活動結束了，參考裡面[共筆](https://hackmd.io/@coscup/2021/%2F%40coscup%2FSyWNk6wRd)方式，發現了一個有趣的東西，綠色的room-tags，
一整個學以致用，可惜自己的客製化能力還不夠，等之後研究，再將這篇文章教學做起來。
>想像**hackmd編輯畫面**就是一整個**html**
>在文章最前面放上，就能自訂義css格式
```htmlembedded
<style>
.room-tag {
background-color: #28a745;
color: #fff;
display: inline-block;
padding: 1px 5px;
border-radius: 8px;
}
</style>
```
>對文章標題 引用
```htmlembedded
<span class="room-tag">RB105 - Main Track</span>
```
#### 自己修改成:
>在文章最前面放上，就能自訂義css格式
```htmlembedded
<style>
.activity-tag {
background-color: #28a745;
color: #fff;
display: inline-block;
padding: 1px 5px;
border-radius: 8px;
}
.activityEnd-tag {
background-color: #6C6C6C;
color: #fff;
display: inline-block;
padding: 1px 5px;
border-radius: 8px;
}
.activityHot-tag {
background-color: #EA0000;
color: #fff;
display: inline-block;
padding: 1px 5px;
border-radius: 8px;
}
.activityWait-tag {
background-color: #0080FF;
color: #fff;
display: inline-block;
padding: 1px 5px;
border-radius: 8px;
}
</style>
```
>對文章標題 引用
```htmlembedded=1
<span class="activity-tag">活動進行中 - 2021/7/26</span>
<span class="activityEnd-tag">活動結束</span>
<span class="activityHot-tag">火熱製作中</span>
<span class="activityWait-tag">活動等待 - 2021/8/17~9/7</span>
```
### [查找文章意外翻到](https://hackmd.io/@32nhrQQ9Qx6gTHIvEbOngQ/ByjIJvLfz/https%3A%2F%2Fhackmd.io%2FEYFgHArCIGwMYFobhAkBDATAEwcAzGGAgIz4DsYmwAnJuQGYjlA%3D?type=book)
>直接使用標籤
```htmlembedded=1
<span style="color:#FFF; background:#D95C5C; border-radius:8px; padding:3px 9px;">填自介，認識其他人！</span>
<span style="color:#FFF;background:#66AC3D; border-radius:8px; padding: 3px 9px;">進度70%</span>
<span style="color:#FFF;background:#FAAC3D; border-radius:8px; padding: 3px 9px;">進度60%</span>
<span style="color:#FFF;background:#8CD762; border-radius:8px; padding: 3px 9px;"> 提案逛這邊！ </span>
```
### 看[SITCON 2021 第八次會議記錄](https://hackmd.io/@SITCON/SITCON2021/%2FAvbRAhz8T7-R9cCYh4GdXA) 研究到的
<style>@keyframes rainbow { from { color: darkred; letter-spacing: 0; } to { color: navy; letter-spacing: 0.3em; } }
</style>
<b style="display: block; text-align: center; animation: 3s ease alternate rainbow infinite;">\稿 件 審 完 啦/</b>
```htmlembedded=1
<style>@keyframes rainbow { from { color: darkred; letter-spacing: 0; } to { color: navy; letter-spacing: 0.3em; } }</style>
<b style="display: block; text-align: center; animation: 3s ease alternate rainbow infinite;">\稿 件 審 完 啦/</b>
```
### 背景主題
[參考文章-毛毛前端筆記](https://hackmd.io/@JohnsonMao/Front-end/%2FFH3vO0x-TVSeMsFvdf23Nw)
>毛毛利用官方給的**暗主題**，去客製化自己的筆記主題色
```htmlembedded
/* 修改整個頁面的 背景 與 字體 顏色 */
<style>
html, body, .ui-content {
background-color: #333;
color: #ddd;
}
</style>
```
### 螢光筆效果mark
>官方文件
>https://hackmd.io/s/tutorials-tw
#### 原先正常使用
==**螢光筆效果**==
```htmlembedded
==螢光筆效果== //在文字旁邊加上兩個==
```
#### css客製化
##### ==毛毛== 的 mark客製化
```htmlembedded
/* 設定 mark */
<style>
.markdown-body mark {
color: #fff;
background: linear-gradient(180deg, #ca2521 0%, #eca442 100%);
border-radius: 4px;
margin: 2px;
}
</style>
```
>感謝毛毛提供，各位可以參考[**毛毛的文章**](https://hackmd.io/@JohnsonMao/Front-end/%2FFH3vO0x-TVSeMsFvdf23Nw)去客製化
##### ==辛西亞== 的 mark客製化
>感謝辛西亞提供，各位可以參考[**【技能樹栽種】 HTML Mark Tag 實作 Highlighting**](https://hackmd.io/@CynthiaChuang/Mark-Element-is-Used-to-Highlight-Content)
[【技能樹栽種】實作 CSS 凸顯文字內容： Alert 與 Highlighting - HackMD](https://hackmd.io/@CynthiaChuang/Accent-the-Text-by-CSS-Alert-and-Highlighting)
[About | 辛西亞的技能樹](https://cynthiachuang.github.io/about/)
#### 組件化
>可以將上述所有客製化的css功能
>先放到另一份筆記中
>然後用 `{%hackmd @帳號/客製化css的名字 %}` 去引入
---
## google日曆插入
>到google日曆，按照圖片設定即可。
>若圖片不清，可以按右鍵，在新分頁中開啟圖片
---
## 音樂嵌入
### Spotify
#### 長版
<iframe src="https://open.spotify.com/embed/track/7hWkpX57FVw6VfpWG6VucC" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
```htmlembedded=1
<iframe src="https://open.spotify.com/embed/track/7hWkpX57FVw6VfpWG6VucC" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
```
#### 短版
<iframe src="https://open.spotify.com/embed/track/7hWkpX57FVw6VfpWG6VucC" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
```htmlembedded=1
<iframe src="https://open.spotify.com/embed/track/7hWkpX57FVw6VfpWG6VucC" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
```
### StreetVoice街聲
#### 長版
<iframe src="https://streetvoice.com/music/embed/?id=347526&s=l" width="500" height="500" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>
```htmlembedded=1
<iframe src="https://streetvoice.com/music/embed/?id=347526&s=l" width="500" height="500" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" autoplay></iframe>
```
#### 短版
<iframe src="https://streetvoice.com/music/embed/?id=347526" width="330" height="100" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>
```htmlembedded=1
<iframe src="https://streetvoice.com/music/embed/?id=347526" width="330" height="100" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>
```
#### 清單功能
<iframe src="https://streetvoice.com/music/embed/?id=670790&t=p" width="400" height="350" scrolling="no" frameborder="no" marginwidth="0" marginheight="0"></iframe>
### SoundCloud
#### 無自動播放
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/312978766&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/goodband2015" title="好樂團goodband" target="_blank" style="color: #cccccc; text-decoration: none;">好樂團goodband</a> · <a href="https://soundcloud.com/goodband2015/cover-by-goodband" title="擁抱─五月天 Cover By 好樂團GoodBand" target="_blank" style="color: #cccccc; text-decoration: none;">擁抱─五月天 Cover By 好樂團GoodBand</a></div>
[Embeds on SoundCloud](https://soundcloud.com/pages/embed)
#### 有自動撥放 ==(不知為何無效)==
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/308710773&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/goodband2015" title="好樂團goodband" target="_blank" style="color: #cccccc; text-decoration: none;">好樂團goodband</a> · <a href="https://soundcloud.com/goodband2015/0220a" title="我們一樣可惜Demo" target="_blank" style="color: #cccccc; text-decoration: none;">我們一樣可惜Demo</a></div>
### 其他播放器
#### 無自動播放
<audio src="https://s3-ap-northeast-1.amazonaws.com/dazedbear-assets/Bluebird.mp3" controls>
遇到不支援的瀏覽器會出現這行字
</audio>
#### 有自動播放
<audio src="https://s3-ap-northeast-1.amazonaws.com/dazedbear-assets/Bluebird.mp3" controls autoplay audio muted>
遇到不支援的瀏覽器會出現這行字
</audio>
```htmlembedded
<!-- 有點吵XD，就變成程式碼，需要可以複製 -->
<audio src="https://s3-ap-northeast-1.amazonaws.com/dazedbear-assets/Bluebird.mp3" controls audio autoplay>
遇到不支援的瀏覽器會出現這行字
</audio>
```
[Day02 - 使用 HTML 播放音檔 - 內建播放器 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10199609)
[cchound 收錄 100% 免費、高品質音樂素材，以 CC 授權方式釋出](https://free.com.tw/cchound/)
---
## 倒數計時器
### 簡報
[參考g0v台中黑客松](https://beta.hackfoldr.org/g0v-hackath45n/https%253A%252F%252Fg0v.hackmd.io%252F%2540jothon%252FS1yuTM6Ru)
[黑客松網頁](https://jothon.g0v.tw/)
<iframe width="700" height="450" src="http://zbryikt.github.io/quick-timer/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### 簡易的hackmd嵌入
> **來源** [**g0v 零時小學校**](https://g0v.hackmd.io/@jothon/Sch001SSR2022/https%3A%2F%2Fg0v.hackmd.io%2F%40jothon%2FSch001SSR2022)
<font size= 4><center> **7/24 週六上午 09:30 開幕式倒數** </center></font>
<iframe id="oak-embed" width="480" height="80" style="display: block; margin: 0px auto; border: 0px;" src="https://embed-countdown.onlinealarmkur.com/zh-tw/#2022-08-21T00:00:00@Asia%2FTaipei"></iframe>
#### 標題
```htmlembedded
<font size= 4><center> **7/24 週六上午 09:30 開幕式倒數** </center></font>
```
#### 倒計時嵌入網頁
[**工具 | Online Countdown - Countdown Timer to Any Date**](https://countdown.onlinealarmkur.com/zh-tw/)
```htmlembedded
<iframe id="oak-embed" width="480" height="80" style="display: block; margin: 0px auto; border: 0px;" src="https://embed-countdown.onlinealarmkur.com/zh-tw/#2022-08-21T00:00:00@Asia%2FTaipei"></iframe>
```
---
## 當天代辦
[Matter 完成要事，簡單就好：儲存在單機瀏覽器的專注待辦清單](https://www.playpcesor.com/2021/08/matter.html)
<iframe width="900" height="700" src="https://hihayk.github.io/matter/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
---
## HackMD-it 插件 (Chrome、firefox插件)
---
## toc文章目錄生產
### 一般使用方法
```
[TOC] //複製就能直接使用
```
### 延伸使用方法 ==(小訣竅)==
因為 TOC 隨著文章使用，目錄會太長
所以有個小訣竅可以收藏起來
利用
```=1
:::spoiler 文章目錄
[toc]
:::
```
就會像這樣呈現
:::spoiler 文章目錄
[toc]
:::
---
## 書本模式
===跟---的差別
###的運用
---
## tags差異
### 顯示版
###### tags: `工作用`
```
###### tags: `工作用` // ``這個為程式碼標記
```
#### 無顯示版
>在開頭放上
---
## hackmd變blog
[](https://hackmd.io/@hackmd/hackmd-new-blog)
---
## UML 圖表
循序圖
流程圖
graphviz
mermaid
abc
---
## 看板模組
[文章](https://home.gamer.com.tw/artwork.php?sn=5216659)
[範本](/_xRLl8HQTmSfG_XVafVF7g)
---
## Chrome插件
[Markdown Link - Chrome](https://chrome.google.com/webstore/detail/markdown-link/ecbklhnbeilcdabliikhpdanaljlpkhe/related?fbclid=IwAR3NFUxNQMGE8nIBjPHfBVQEytrDjRrhtcWm283vRhQoblFaazNSRvLaMcA)
[MarkDownload - Markdown Web Clipper - Chrome](https://chrome.google.com/webstore/detail/markdownload-markdown-web/pcmpcfapbekmbjjkdalcgopdkipoggdi/related?fbclid=IwAR3NFUxNQMGE8nIBjPHfBVQEytrDjRrhtcWm283vRhQoblFaazNSRvLaMcA)
[作者](https://github.com/wdhongtw/markdown-link?fbclid=IwAR3jlYGKrRgoag75B8AL_U7gRtezuZ9SUdc__ZnyC2sRZ0SqM0H_sZ2Ggv4)
### other
[TabAttack](https://chrome.google.com/webstore/detail/tabattack/ginflokhdahakklidfjlogllkkhokidj?fbclid=IwAR338HMl3l0ngIPWDkLHnRAY6Pnb4xi4c_YryAFAi3-OHBcD1FfWbgW7kI4)
---
## markdown-it plugins
{javaScaript|程式語言}
>{javaScaript|程式語言}
<span class="fa fa-github"></span>
[開發者的三項之力 - 小聚簡報 - HackMD](https://hackmd.io/@yukai/developer-meetup-2019-09-04?fbclid=IwAR3D426-duRE79RIOwpcqeU85J3TROH7LycEC07SYNbGWNOAfZUwa8jpbt8#/41)
[hackmdio/vscode-hackmd：官方 HackMD VScode 擴展！](https://github.com/hackmdio/vscode-hackmd)
---
## markdium
[markdium](https://markdium.dev/?fbclid=IwAR1xqVnQ3kNIR29Ap_93aQjTs1K2aX5qqcdoC8Tf9_WZRvIE3KaGgICmdG0)
---
## 還沒研究的功能
[更多進階功能學習1](https://hackmd.io/c/MW18/https%3A%2F%2Fhackmd.io%2Fs%2FBJHWlNQMX)
[更多進階功能學習2](https://hackmd.io/@ayugioh2003/S1ej7rUA4?type=view)
[HackMd官方部落格](https://hackmd.io/@hackmd/blog-tw/https%3A%2F%2Fhackmd.io%2F%40hackmd%2Fblog-home)
[kun.yin的筆記](/@herbalice/B1IV0BEkK/%2FScnKRUYiRlOJ5xUtY8lC5w)
{%youtube PJuNmlE74BQ %}
[other js](https://hackmd.io/@Not/HymX0MXVS)
[研究](https://pjchender.blogspot.com/2018/04/app-typora.html)
[Email](https://hackmd.io/@hackmd/blog-tw/https%3A%2F%2Fhackmd.io%2F%40hackmd%2Fhackmd-new-blog)
[自訂顏色](https://hackmd.io/c/tutorials-tw/%2F%40docs%2Fcustomize-font-color-zh)
[YAML metadata - HackMD](https://hackmd.io/c/tutorials-tw/%2Fs%2Fyaml-metadata-tw?fbclid=IwAR2DhQNp9i4-al-DoFFjhxvOyhGmKY0E2T51QNr7GVZR5tLwm_DKYkyrOkc)
[HackMD 共用自定義 style - HackMD](https://hackmd.io/@naclyen/SJi_B-B_v)
```
//特殊主題
{%hackmd @yukai/hackfoldr-book-mode-theme %}
```
[選舉印章](https://hackmd.io/J0YP6hp2SL-2v1rZsHG70w?view)
[開源活動](https://hackmd.io/@SITCON/floss-community-list?fbclid=IwAR3iQtM5Px5S5kC7MXaj5RtzNCjNWnw4I7FnvCsJ8SV9Qez9BQF8VaHPRAk#%E9%96%8B%E6%BA%90%E7%A4%BE%E7%BE%A4%E6%8E%A8%E5%BB%A3%E7%9B%AE%E9%8C%84)
[hackmd作者](https://hackmd.io/@MaxWu)
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fhackmdio%2Fphotos%2Fa.1004391802951362%2F1098614316862443%2F&show_text=true&width=500" width="500" height="344" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
https://hackmd.io/@emisjerry/ByMQ0rWIB?type=slide#/14
https://hackmd.io/c/tutorials-tw/%2Fs%2FMathJax-and-UML-tw
[【技能樹栽種】顯示文章最後修改時間 - HackMD](https://hackmd.io/@CynthiaChuang/Show-the-Last-Modified-Time-in-Jekyll-NextT-Theme)
[功能介紹 - HackMD](https://hackmd.io/features-tw?view)
[Hackmd常用語法整理 新手必看！ - HackMD](https://hackmd.io/@VsQ_Erf8QDS3ndjx9qWsYQ/ByDMsuhM-/https%3A%2F%2Fhackmd.io%2FCYQw7AjAzALAxlAtMOBTAnImUQ0QIwCYBWYREADikIDZiAGGEdCVIA%3D%3D%3Fboth?type=book)
[常用Markdown語法與HackMD的擴充 - HackMD](https://hackmd.io/@emisjerry/ByMQ0rWIB?type=slide#/14)
[《防疫伴學活動》 - HackMD](https://hackmd.io/v1jFG5KhTnKX5gGKjtf8lg?view)
[你知道嗎？畫圖好簡單 - 流程圖 - HackMD](https://hackmd.io/@docs/mermaid_graphTD?fbclid=IwAR0uPVf9PWl83lwhOgPCxo9s3qW-S6v2GiEXFP4j1ATZzI6c_dSYLgHdLzg)
[如何上傳圖片到團隊筆記？ - HackMD](https://hackmd.io/c/tutorials-tw/%2F%40docs%2Fhow-to-upload-images-in-team-tw)
[Markdown in HackMD - HackMD](https://hackmd.io/@PenutChen/B1ypo8GTN?type=view#fnref3)
[開發者的三項之力 - 小聚簡報 - HackMD](https://hackmd.io/@yukai/developer-meetup-2019-09-04?print-pdf#/)
[hackmd作者:開源之旅：HackMD 的發展與挑戰 - HackMD](https://hackmd.io/@MaxWu/OpenSource-and-HackMD?print-pdf#/)
[Max Wu](https://hackmd.io/@MaxWu)
[【HackMD是座大寶山】打心掛書籤 - HackMD](https://hackmd.io/@docs/like-bookmark-profile)
abc.js運用
[paulrosen/abcjs: javascript for rendering abc music notation](https://github.com/paulrosen/abcjs)
[abcjs: What?](https://www.abcjs.net/#what)
[sound - HackMD](https://hackmd.io/M3Q8u14fTFug633-YU78AA?view)
網頁自動音樂播放
[9m88：不需要隨別人的意見去改變自己 - 新活水](https://www.fountain.org.tw/subject/music/9m88)
[[教學] 如何把 YouTube 變成音樂播放器放入網站裡？ - 免費資源網路社群](https://free.com.tw/how-to-embed-youtube-as-an-audio-player/)
如何製作同步編輯器軟體
[HackMD github](https://github.com/hackmdio)
[如何制作一个简单不容易的 Markdown 编辑器？ - 少数派](https://sspai.com/post/59718)
[談談 Markdown 編輯器 - Just lepture](https://lepture.com/zh/2017/about-markdown-editor)
[lepture/editor: A markdown editor. http://lab.lepture.com/editor/](https://github.com/lepture/editor)
[講者 - 行動科技年會 | MOPCON 2016 | Mobile / Open / Platform Conference](https://mopcon.org/2016/speaker.php?id=max_wu)
[hackmdio/codimd: CodiMD - Realtime collaborative markdown notes on all platforms.](https://github.com/hackmdio/codimd)
[HackMD - Markdown 協作筆記 @ 2016 MOPCON - HackMD](https://hackmd.io/@MaxWu/HackMD-MOPCON2016?type=view)
hackmd書本模式變部落格
[HackMD 新部落格開幕 - HackMD](https://hackmd.io/@hackmd/blog-tw/https%3A%2F%2Fhackmd.io%2F%40hackmd%2Fhackmd-new-blog?fbclid=IwAR3BxRjvygRzuD2N6-KTgShbPDB_PZa8AzSoXmMhrchFgkBvD354segbBh0)
```
{%hackmd @hackmd/blog-tw %}
```
[【技能樹栽種】在時間軸上顯示完整日期 - HackMD](https://hackmd.io/@CynthiaChuang/Show-Full-Timestamp-on-Timeline)
簡報模式學習
[使用簡報模式 - HackMD](https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-create-slide-deck-tw)
>測試看看時間[time=Sun, Jun 28, 2015 9:59 PM]
>**[time=2021 8 29 (sun) , 3:38 AM]**[color=#85d635]
可能用於最後筆記紀錄時間
:::spoiler 最後更新日期
>第一次編輯[time=2021 8 29 , 3:43 AM]
>最後一次編輯[time=2021 8 29 , 3:45 AM][color=#786ff7]
:::
[Facebook 留言外掛程式 | Facebook for Developers](https://developers.facebook.com/products/social-plugins/comments/?utm_campaign=social_plugins&utm_medium=offsite_pages&utm_source=comments_plugin)
[YAML metadata 說明 - HackMD](https://hackmd.io/s/yaml-metadata-tw)
Github的東東 <img alt="GitHub repo file count (file extension)" src="https://img.shields.io/github/directory-file-count/chiaoshin369/sjo/kod">
> 把下方連結網址改為 自訂格式
> 如 https://img.shields.io/badge/%F0%9F%94%A5-%E7%81%AB%E7%86%B1%E8%A3%BD%E4%BD%9C%E4%B8%AD-red
> 就會產生 <img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/%F0%9F%94%A5-%E7%81%AB%E7%86%B1%E8%A3%BD%E4%BD%9C%E4%B8%AD-red">
```htmlembedded=1
<img alt="GitHub repo file count (file extension)" src="https://img.shields.io/github/directory-file-count/chiaoshin369/sjo/kod">
```
>在這當中自己修改了幾個常用的標籤
```htmlembedded
<img alt="GitHub repo file count (file extension)" src="">
```
<img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/%F0%9F%94%A5-%E7%81%AB%E7%86%B1%E8%A3%BD%E4%BD%9C%E4%B8%AD-red"> <img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/-%F0%9F%9A%A9%20%E6%B4%BB%E5%8B%95%E9%80%B2%E8%A1%8C%E4%B8%AD-brightgreen"> <img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/-%F0%9F%A7%8A%20%E6%B4%BB%E5%8B%95%E5%86%B7%E5%87%8D%20--%20%E5%88%B0if%E6%B5%81%E7%A8%8B%E5%9C%96%20-blue"> <img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/-%E2%9D%84%20%E6%B4%BB%E5%8B%95%E5%86%B7%E5%87%8D-blue"> <img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/%E6%B4%BB%E5%8B%95%E7%B5%90%E6%9D%9F%20--%202022%2F9%2F10-%20-lightgrey"> <img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/-%F0%9F%8F%B4%E2%80%8D%E2%98%A0%EF%B8%8F%20%E6%B4%BB%E5%8B%95%E6%94%BE%E6%A3%84-lightgrey">
```htmlembedded=
<img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/%F0%9F%94%A5-%E7%81%AB%E7%86%B1%E8%A3%BD%E4%BD%9C%E4%B8%AD-red">
<img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/-%F0%9F%9A%A9%20%E6%B4%BB%E5%8B%95%E9%80%B2%E8%A1%8C%E4%B8%AD-brightgreen">
<img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/-%F0%9F%A7%8A%20%E6%B4%BB%E5%8B%95%E5%86%B7%E5%87%8D%20--%20%E5%88%B0if%E6%B5%81%E7%A8%8B%E5%9C%96%20-blue">
<img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/-%E2%9D%84%20%E6%B4%BB%E5%8B%95%E5%86%B7%E5%87%8D-blue">
<img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/%E6%B4%BB%E5%8B%95%E7%B5%90%E6%9D%9F%20--%202022%2F9%2F10-%20-lightgrey">
<img alt="GitHub repo file count (file extension)" src="https://img.shields.io/badge/-%F0%9F%8F%B4%E2%80%8D%E2%98%A0%EF%B8%8F%20%E6%B4%BB%E5%8B%95%E6%94%BE%E6%A3%84-lightgrey">
```
[Shields.io: Quality metadata badges for open source projects](https://shields.io/)
[profile readme generator - Google 搜尋](https://www.google.com/search?q=profile+readme+generator&oq=profile+readme+generator&aqs=chrome..69i57.271j0j7&sourceid=chrome&ie=UTF-8)
[【Linux】架設 HackMD (CodiMD)，並使用 LDAP - SpicyBoyd 部落格](https://spicyboyd.blogspot.com/2019/03/linux-hackmd-codimd.html)
**按鈕**
參考官方資料，下方按鈕
[關於團隊空間中的圖片插入功能 - HackMD](https://hackmd.io/@docs/how-to-upload-images-in-team-tw)
用[bootstrap button範例](https://getbootstrap.com/docs/5.1/components/buttons/)參考
>
將以上的程式碼複製到hackmd，結果只有第一個成功。
能修成這樣的結果，可以在另外改顏色或其他客製化。
<a class="btn btn-primary" href="https://hackmd.io/@chiaoshin369/nkust_learn_javaoop1" role="button">**<** 下一個</a> <a class="btn btn-primary" href="#" role="button"> 下一個 **>**</a>
```htmlembedded
<a class="btn btn-primary" href="#" role="button">**<** 下一個</a> <a class="btn btn-primary" href="#" role="button"> 下一個 **>**</a>
```
[定價 | zh - HackMD](https://man.twcc.ai/@twccdocs/SJWlN3YDr?type=view)
[於 HackMD 使用 Google 雲端硬碟中的圖片 - HackMD](https://hackmd.io/@cnsrl/H1gHwCyGw)
[如何從雲端轉貼圖片到 DocuSky ? - HackMD](https://hackmd.io/@DocuSky/B1yVEUiXP)
**codepen放到hackmd上**
https://hackmd.io/@DCT/html_css
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS-Button樣式" src="https://codepen.io/mrwang01/embed/preview/jObLLvR?height=265&theme-id=light&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/mrwang01/pen/jObLLvR'>CSS-Button樣式</a> by mrwang01
(<a href='https://codepen.io/mrwang01'>@mrwang01</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
**pdf github**
> 可以進入檔案自動下載pdf
`{%pdf https://raw.githubusercontent.com/chiaoshin/NKUST_php_hw/main/%E5%B0%88%E9%A1%8C%E6%9B%B8%E9%9D%A2%E5%A0%B1%E5%91%8A_rpt_C109193110.pdf %}`
[HackMD 嵌入 PDF 做預覽 - HackMD](https://hackmd.io/@Ljames/hackmdforpdf)
==找不到github用pdf方法==
{% pdf http://github.com/chiaoshin/NKUST_php_hw/blob/main/%E5%B0%88%E9%A1%8C%E6%9B%B8%E9%9D%A2%E5%A0%B1%E5%91%8A_rpt_C109193110.pdf %}
**漂亮的卡片**
[終端機指令 (Mac) - HackMD](https://hackmd.io/@unayojanni/HyzWz9R0u/%2F%40unayojanni%2FHkVEJAyeF)
> 表格mardown自動生成
[Table Convert Online - Make it easier to work with tables](https://tableconvert.com/)
## hackmd筆記教學 ==回饋==
>**disqus 留言板 設定問題**[color=#85d635]
Sign in with Wallet
Connect another wallet