diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/GFM.md | 45 | ||||
| -rw-r--r-- | public/default.md | 5 | ||||
| -rw-r--r-- | public/features.md | 335 |
3 files changed, 235 insertions, 150 deletions
diff --git a/public/GFM.md b/public/GFM.md deleted file mode 100644 index 895bb1c1..00000000 --- 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 995fefc3..e69de29b 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 d041c335..dde852f0 100644 --- a/public/features.md +++ b/public/features.md @@ -1,35 +1,118 @@ Features === -### Embed HackMD -```html -<iframe width="100%" height="500" src="http://hackmd.herokuapp.com/features" frameborder="0"> -</iframe> + +Introduction +=== +<i class="fa fa-file-text"></i> 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** + +<i class="fa fa-edit fa-fw"></i> Edit: See only the editor. +<i class="fa fa-eye fa-fw"></i> View: See only the result. +<i class="fa fa-columns fa-fw"></i> Both: See both in split view. + +**Mobile** + +<i class="fa fa-toggle-on fa-fw"></i> View: See only the result. +<i class="fa fa-toggle-off fa-fw"></i> Edit: See only the editor. + +## Upload image +You can simply press the camera button <i class="fa fa-camera"></i>. +Or **drag-n-drop** image in editor, even **paste** image works! +It will automatically upload to **[imgur](http://imgur.com)**, nothing to worry :tada: + + +## 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 <i class="fa fa-share-alt"></i> and copy the url. + +## Save +Currently, you can save to **dropbox** <i class="fa fa-dropbox"></i> or save as **.md** <i class="fa fa-file-text"></i> to local. + +## Import +Like save feature, you can also import **.md** from **dropbox** <i class="fa fa-dropbox"></i>. +Or import from your **clipboard** <i class="fa fa-clipboard"></i>, 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: + +<i class="fa fa-leaf fa-fw"></i> Freely: Anyone can edit this note. +<i class="fa fa-pencil fa-fw"></i> Editable: Signed user can edit this note. +<i class="fa fa-lock fa-fw"></i> Locked: Only owner can edit this note. +<i class="fa fa-hand-stop-o fa-fw"></i> Private: Only owner can view and edit this note. + +**Only the owner of the note can change the permission** + +## Embed +```xml +<iframe width="100%" height="500" src="http://hackmd.io/features" frameborder="0"></iframe> ``` -### Emoji -:smile: :smiley: :cry: - -### Todo List -- [ ] Not - - [ ] No yet - - asd - - [ ] right away -- [x] Done -- Test - - [x] yes - - asd - - [x] cool -- Test - - asd - - qwe - - vgfhddfgh -- jhlkj - - jkhkjh - - kjhgkh - - gkjhgkj - -### Code Highlighting -```javascript +View +=== +## Table of content +You can look at bottom right place of the view area, there is a TOC button <i class="fa fa-bars"></i>. +Press that will show current table of content and will emphasis which your section on. +Support up to **three header levels**. + +## Permalink +Every header will automatically add a permalink on the right side. +You can hover and click <i class="fa fa-chain"></i> to anchor on it. + +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. <i hidden>```</i> +- 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); function $initHighlight(block, cls) { @@ -46,10 +129,10 @@ function $initHighlight(block, cls) { } } ``` -#### with line number -> add '=' after the code block lang - -```javascript= +> 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) { @@ -67,70 +150,115 @@ function $initHighlight(block, cls) { } ``` -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 +## Externals -smartypants ---- -- "asd" -- --asd -- asd--- +### Youtube +{%youtube 1G4isv_Fylg %} -Table ---- -First Header | Second Header -------------- | ------------- -Content Cell | Content Cell -Content Cell | Content Cell +### Vimeo +{%vimeo 124148255 %} -First Header | Second Header -------------- | ------------- +### Gist +{%gist schacon/4277%} -Image ---- - +### SlideShare +{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} -Video ---- -#### Youtube +### Speakerdeck +{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %} -{%youtube 1G4isv_Fylg %} +## MathJax -#### Vimeo +You can render *LaTeX* mathematical expressions using **MathJax**, as on [math.stackexchange.com](http://math.stackexchange.com/): -{%vimeo 124148255 %} +The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral -Gist ---- -{%gist schacon/4277 %} +$$ +x = {-b \pm \sqrt{b^2-4ac} \over 2a}. +$$ -tags ---- -> using like below +$$ +\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: -###### tags: `features` `cool` +```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. | -[link text](http://dev.nodeca.com) +Center aligned columns -[link with title](http://nodeca.github.io/pica/demo/ "title text!") +| 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. | -Autoconverted link https://github.com/nodeca/pica +### 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   - 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 |