---
# System prepended metadata

title: DevTools 1 - HackMD

---

# DevTools 1 - HackMD

==(The slides should be written in Chinese)==

:::success
For the basic part, we have to show the syntax and the result. However, those topic in the second part don't have to show the syntax just the result. (Because those syntax vary from one and other and are quite complicated)
:::

:::warning
[Click here to the slides](https://docs.google.com/presentation/d/1enTwudEyoooZ5woQjHDeFqfVPhLCgEG2-Z1bbeo2FMQ/edit#slide=id.g9f8f0a01cd_0_0) :smile:

[Code highlighter website](https://romannurik.github.io/SlidesCodeHighlighter/)


Code font: **Arial**
Code size: **13.5**
Code background color: 
![](https://i.imgur.com/u3P4MCi.png)

<br>

Header font: **Open Sans**
Header size: **28**

Content font: **Roboto**
Content size: **14**
:::

> If you have no idea toward some function, please visit [this](https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw) website
## Markdown basic

### Header

### ordered and unordered list

### Block quote
>[name=Alex]

### Font style - Bold, italic and strikethrough
>[name=Alex]

### Link
>[name=Alex]
>
### Image
>[name=Kattie]

### Code
>[name=Kattie]

### TodoList
>[name=Kattie]

### Table
>[name=Allen]

## Special things in HackMD

### Marked text
>[name=Allen]

==This is marked text==

### Externals
>[name=Allen]
>
### emoji
>[name=Joyce]
>

### Note area
>[name=Joyce]
>
### Book mode
>[name=Joyce]
>
### Slide mode
>[name=Justin]
### LaTeX
>[name=Justin]

### graphviz
>[name=Justin]


哈囉大家！ 因為現在網路工具愈來愈多，因此我們決定製作 DevTools introduction! 我們會跟大家介紹我們覺得非常好用的工具並透過照片呈現。

今天是我們的 EP1 - HackMD。HackMD 是非常好用的多人線上 Markdown 編輯器，支援非常多的功能，我們將會跟大家介紹 HackMD 具有哪些特別的地方！

這邊是我們照片裡提到的額外連結，如果對這些主題更有興趣，可以點下連結！
1. HackMD 官方文檔: https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw
2. Emoji 完整表: https://github.com/ikatyang/emoji-cheat-sheet
3. LaTeX in HackMD: https://hackmd.io/c/tutorials-tw/%2Fs%2Ffeatures-tw#MathJax
4. LaTeX cheat sheet: http://tug.ctan.org/info/latex-refsheet/LaTeX_RefSheet.pdf
5. Graphiz tutorials: https://graphs.grevian.org

Hi there! Due to the spring up of online tools, we have decided to make the the DevTools introduction. We'll introduce some convinient and useful platform and use images to illustrate the function.

Today we're going to introduce HackMD. HackMD is the online collaborate markdown editor. It provide lots of powerful functionalites. We're going to introduce some fancy things in HackMD!

Below is the external link to more resources we mentioned in the images. You can access more information from the links!

1. Official HackMD documentation: https://hackmd.io/c/tutorials/%2Fs%2Ftutorials
2. Emoji table: https://github.com/ikatyang/emoji-cheat-sheet
3. LaTeX in HackMD: https://hackmd.io/c/tutorials-tw/%2Fs%2Ffeatures-tw#MathJax
4. LaTeX cheat sheet: http://tug.ctan.org/info/latex-refsheet/LaTeX_RefSheet.pdf
5. Graphiz tutorials: https://graphs.grevian.org