# HackMD tutorial ### Step 1: # and titles #number indicates title hierarchy until 6#s represents tags ### Step 2: layout stying ``` three seperators "```" blocks out a section for code ``` * star sign "*" is bullet point - [ ] dash bracket "-[]" is checklist 1. numbers+dot initiates a numeric list > greater sign ">" preps a quote in grey three colons ":::"blocks out a colored comment section when paired with a code :::success success is green ::: :::info info is blue ::: :::warning warning is yellow ::: :::danger danger is red ::: :::spoiler spoiler holds collapsible details ::: ### Step 3: text styling - [ ] **Bold**: wrapped by two ** / cmd+ B - [ ] *Italic*: wraped by one * / cmd + I - [ ] Super^script^: wrapped by one ^ - [ ] Sub~script~: wraped by one ~ - [ ] ~~Crossed~~: wraped by two ~~ - [ ] ==Highlight==: wraped by two == - [ ] color-coded code blocks: add ```code language=start line number``` ```javascript=10 const list = [10, 20]; console.log(list.map(x => (x * x))) ``` - [ ] soft wrap / code line auto-formating: add ```!``` after code language specification ```! const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US') ``` :::info :bulb: **Hint:** You can also apply styling from the toolbar at the top :arrow_upper_left: of the editing area. ::: > Drag-n-drop image from your file system to the editor to paste it! ### Step 4: collaboration Click on the <i class="fa fa-share-alt"></i> **Sharing** menu :arrow_upper_right: to collaborate ![permalink setting demo](https://i.imgur.com/PjUhQBB.gif) **how to link content:** ``` [link title](https://) ``` [link title](https://) a bracket and a colon defines a link ``` [link title]: https:// ``` --- 1. Register and sign-in to HackMD 2. Set Permalink for this note 3. Copy and share the link with your team --- :::info :pushpin: [HackMD Tutorials](https://hackmd.io/c/tutorials) ::: | Features | Tutorials | | ----------------- |:----------------------- | | GitHub Sync | [:link:][GitHub-Sync] | | Browser Extension | [:link:][HackMD-it] | | Book Mode | [:link:][Book-mode] | | Slide Mode | [:link:][Slide-mode] | | Share & Publish | [:link:][Share-Publish] | [GitHub-Sync]: https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github [HackMD-it]: https://hackmd.io/c/tutorials/%2Fs%2Fhackmd-it [Book-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-book [Slide-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-slide-deck [Share-Publish]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-publish-note - LaTeX for formulas $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ - UML diagrams ```sequence Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! Note left of Alice: Alice responds Alice->Bob: Where have you been? ``` - Auto-generated Table of Content:`[ToC]` - Embed YouTube Videos:`{%youtube PJuNmlE74BQ %}`