diff --git a/public/GFM.md b/public/GFM.md deleted file mode 100644 index 895bb1c1e..000000000 --- a/public/GFM.md +++ /dev/null @@ -1,45 +0,0 @@ -GitHub Flavored Markdown -======================== - -Everything from markdown plus GFM features: - -## URL autolinking - -Underscores_are_allowed_between_words. -asdasdasd - -## Strikethrough text - -GFM adds syntax to strikethrough text, which is missing from standard Markdown. - -~~Mistaken text.~~ -~~**works with other fomatting**~~ - -~~spans across -lines~~ - -## Fenced code blocks (and syntax highlighting) - -```javascript -for (var i = 0; i < items.length; i++) { - console.log(items[i], i); // log them -} -``` - -## Task Lists - -- [ ] Incomplete task list item -- [x] **Completed** task list item - -## A bit of GitHub spice - -* SHA: be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2 -* User@SHA ref: mojombo@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2 -* User/Project@SHA: mojombo/god@be6a8cc1c1ecfe9489fb51e4869af15a13fc2cd2 -* \#Num: #1 -* User/#Num: mojombo#1 -* User/Project#Num: mojombo/god#1 - -See http://github.github.com/github-flavored-markdown/. - - diff --git a/public/default.md b/public/default.md index 995fefc3b..e69de29bb 100644 --- a/public/default.md +++ b/public/default.md @@ -1,5 +0,0 @@ -Untitled -=== -Don't know what to do? [See here](/features) -Invite your friends to this note via the url. -Collaborate notes in realtime with no harms! \ No newline at end of file diff --git a/public/features.md b/public/features.md index d041c3357..dde852f05 100644 --- a/public/features.md +++ b/public/features.md @@ -1,54 +1,117 @@ Features === -### Embed HackMD -```html - + +Introduction +=== + HackMD is a realtime collaborate markdown note in all platforms. +This mean you can do some notes with any other in **Desktop, Tablet or even Phone**. +You can Sign in via **Facebook, Twitter, GitHub, Dropbox** in the **[homepage](/)**. + +This service still in early stage, might be buggy or crash. +Please report issue in [GitHub](https://github.com/hackmdio/hackmd). +If you need instant help, please use [Facebook Message](https://www.facebook.com/messages/866415986748945). +**Thank you very much!** + +Workspace +=== +## Modes +**Desktop & Tablet** + + Edit: See only the editor. + View: See only the result. + Both: See both in split view. + +**Mobile** + + View: See only the result. + Edit: See only the editor. + +## Upload image +You can simply press the camera button . +Or **drag-n-drop** image in editor, even **paste** image works! +It will automatically upload to **[imgur](http://imgur.com)**, nothing to worry :tada: +![](http://i.imgur.com/9cgQVqD.png) + +## Share note +If you want to share a **editable** note, just copy the url. +If you want to share a **read-only** note, simply press share button and copy the url. + +## Save +Currently, you can save to **dropbox** or save as **.md** to local. + +## Import +Like save feature, you can also import **.md** from **dropbox** . +Or import from your **clipboard** , and that can parse some **html** which might be useful :smiley: + +## Permission +There is a little button on the top right of the view. +You can change the permission via theres options. +It might be one of below: + + Freely: Anyone can edit this note. + Editable: Signed user can edit this note. + Locked: Only owner can edit this note. + Private: Only owner can view and edit this note. + +**Only the owner of the note can change the permission** + +## Embed +```xml + ``` -### Emoji -:smile: :smiley: :cry: +View +=== +## Table of content +You can look at bottom right place of the view area, there is a TOC button . +Press that will show current table of content and will emphasis which your section on. +Support up to **three header levels**. -### Todo List -- [ ] Not - - [ ] No yet - - asd - - [ ] right away -- [x] Done -- Test - - [x] yes - - asd - - [x] cool -- Test - - asd - - qwe - - vgfhddfgh -- jhlkj - - jkhkjh - - kjhgkh - - gkjhgkj +## Permalink +Every header will automatically add a permalink on the right side. +You can hover and click to anchor on it. -### Code Highlighting -```javascript -var s = "JavaScript syntax highlighting"; -alert(s); -function $initHighlight(block, cls) { - try { - if (cls.search(/\bno\-highlight\b/) != -1) - return process(block, true, 0x0F) + - ' class=""'; - } catch (e) { - /* handle exception */ - } - for (var i = 0 / 2; i < classes.length; i++) { - if (checkCondition(classes[i]) === undefined) - return /\d+[\s/]/g; - } -} -``` -#### with line number -> add '=' after the code block lang +Edit +=== +## Shortcut keys +Just like sublime text, which is pretty quick and convinent. +> For more infomations, see [here](https://codemirror.net/demo/sublime.html). +## Auto complete +This editor provide full auto complete hint of markdown. +- Emojis: type `:` to show hint. +- Code blocks: type ` ``` ` and plus a character to show hint. +- Headers: type `#` to show hint. +- Referrals: type `[]` to show hint. +- Externals: type `{}` to show hint. +- Images: type `!` to show hint. + +## Title +This will take the first **level 1 header** as the note title. + +## Tags +Using tags like below, these will show in your **history**. +###### tags: `features` `cool` `updated` + +## [YAML metadata](https://hackmd.io/IwFgZgxiBsBGCsBaAnPYAORJm07gDMImGAKYnrwDsUI8QA==) +Provide advanced note information to set the browse behavior, visit above link for detail +- robots: set search engine to index or not +- lang: set browse language +- dir: set text direction +- breaks: set to use line breaks + +## Emoji +You can type any emoji like this :smile: :smiley: :cry: :wink: +> See full emoji list [here](http://www.emoji-cheat-sheet.com/) + +## Todo List +- [ ] Todos + - [x] Buy some salad + - [ ] Brush teeth + - [x] Drink some water + +## Code block +We support many code languages, use the auto complete to see the list. ```javascript= var s = "JavaScript syntax highlighting"; alert(s); @@ -66,71 +129,136 @@ function $initHighlight(block, cls) { } } ``` +> If you want **line numbers**, type `=` after specify the code block languagues. +> Also, you can specify the start line number. +> Like below, the line number starts from 101: +```javascript=101 +var s = "JavaScript syntax highlighting"; +alert(s); +function $initHighlight(block, cls) { + try { + if (cls.search(/\bno\-highlight\b/) != -1) + return process(block, true, 0x0F) + + ' class=""'; + } catch (e) { + /* handle exception */ + } + for (var i = 0 / 2; i < classes.length; i++) { + if (checkCondition(classes[i]) === undefined) + return /\d+[\s/]/g; + } +} +``` -smartList ---- -#### cool +> Or you might want to continue the previous code block line number, use `=+` -* XD -* QQ +```javascript=+ +var s = "JavaScript syntax highlighting"; +alert(s); +``` +### Blockquotes tags +> Using like below to specifiy your **name, time and color** to differ the blockquotes. +> [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7] +> > Even support the nest blockquotes! +> > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red] -1. yes -2. no - -smartypants ---- -- "asd" -- --asd -- asd--- - -Table ---- -First Header | Second Header -------------- | ------------- -Content Cell | Content Cell -Content Cell | Content Cell - -First Header | Second Header -------------- | ------------- - -Image ---- -![](http://cached.imagescaler.hbpl.co.uk/resize/scaleWidth/620/offlinehbpl.hbpl.co.uk/news/OKM/bubblescropped-20141024090315599.png) - -Video ---- -#### Youtube +## Externals +### Youtube {%youtube 1G4isv_Fylg %} -#### Vimeo - +### Vimeo {%vimeo 124148255 %} -Gist ---- -{%gist schacon/4277 %} +### Gist +{%gist schacon/4277%} -tags ---- -> using like below +### SlideShare +{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} -###### tags: `features` `cool` +### Speakerdeck +{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %} +## MathJax +You can render *LaTeX* mathematical expressions using **MathJax**, as on [math.stackexchange.com](http://math.stackexchange.com/): +The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral +$$ +x = {-b \pm \sqrt{b^2-4ac} \over 2a}. +$$ +$$ +\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. +$$ + +> More information about **LaTeX** mathematical expressions [here](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference). + +## UML diagrams + +### Sequence diagrams + +You can render sequence diagrams like this: + +```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? +``` + +### Flow charts + +And flow charts like this: +```flow +st=>start: Start +e=>end: End +op=>operation: My Operation +op2=>operation: lalala +cond=>condition: Yes or No? + +st->op->op2->cond +cond(yes)->e +cond(no)->op2 +``` + +### Graphviz +```graphviz +digraph hierarchy { + + nodesep=1.0 // increases the separation between nodes + + node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour + edge [color=Blue, style=dashed] //All the lines look like this + + Headteacher->{Deputy1 Deputy2 BusinessManager} + Deputy1->{Teacher1 Teacher2} + BusinessManager->ITManager + {rank=same;ITManager Teacher1 Teacher2} // Put them on the same level +} +``` + +> More information about **Sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/). +> More information about **Flow charts** syntax [here](http://adrai.github.io/flowchart.js/). +> More information about **Graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html) + +## Typography + +### Headers + +``` # h1 Heading ## h2 Heading ### h3 Heading #### h4 Heading ##### h5 Heading ###### h6 Heading +``` - -## Horizontal Rules +### Horizontal rules ___ @@ -139,7 +267,7 @@ ___ *** -## Typographic replacements +### Typographic replacements Enable typographer option to see result. @@ -155,8 +283,7 @@ Remarkable -- awesome 'Smartypants, single quotes' - -## Emphasis +### Emphasis **This is bold text** @@ -168,6 +295,8 @@ _This is italic text_ ~~Deleted text~~ +lu~lala~ + Superscript: 19^th^ Subscript: H~2~O @@ -177,17 +306,17 @@ Subscript: H~2~O ==Marked text== -## Blockquotes +### Blockquotes > Blockquotes can also be nested... >> ...by using additional greater-than signs right next to each other... -> > > ...or with spaces between arrows. +> > > ...or with spaces between arrows. -## Lists +### Lists -Unordered +#### Unordered + Create a list by starting a line with `+`, `-`, or `*` + Sub-lists are made by indenting 2 spaces: @@ -197,7 +326,7 @@ Unordered - Nulla volutpat aliquam velit + Very easy! -Ordered +#### Ordered 1. Lorem ipsum dolor sit amet 2. Consectetur adipiscing elit @@ -206,14 +335,18 @@ Ordered 1. You can use sequential numbers... 1. ...or keep all the numbers as `1.` +1. feafw +2. 332 +3. 242 +4. 2552 +1. e2 Start numbering with offset: 57. foo 1. bar - -## Code +### Code Inline `code` @@ -241,7 +374,7 @@ var foo = function (bar) { console.log(foo(5)); ``` -## Tables +### Tables | Option | Description | | ------ | ----------- | @@ -257,52 +390,56 @@ Right aligned columns | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | +Left aligned columns -## Links +| Option | Description | +|:------ |:----------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | +Center aligned columns + +| Option | Description | +|:------:|:-----------:| +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + + +### Links [link text](http://dev.nodeca.com) - [link with title](http://nodeca.github.io/pica/demo/ "title text!") - Autoconverted link https://github.com/nodeca/pica -## Images - +### Images ![Minion](https://octodex.github.com/images/minion.png) ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") - Like links, Images also have a footnote style syntax - ![Alt text][id] - With a reference later in the document defining the URL location: [id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" -## Footnotes +### Footnotes Footnote 1 link[^first]. - Footnote 2 link[^second]. - Inline footnote^[Text of inline footnote] definition. - Duplicated footnote reference[^second]. [^first]: Footnote **can have markup** - and multiple paragraphs. - [^second]: Footnote text. - -## Definition lists +### Definition lists Term 1 : Definition 1 + with lazy continuation. Term 2 with *inline markup* @@ -322,11 +459,9 @@ Term 2 ~ Definition 2a ~ Definition 2b - -## Abbreviations +### Abbreviations This is HTML abbreviation example. - It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. *[HTML]: Hyper Text Markup Language \ No newline at end of file