depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #170 from pabloguerrero/feature/feature-doc-fix

Browse source 
Documentation improvements
This commit is contained in:
Max Wu 2016-09-13 10:33:35 +08:00 committed by GitHub
commit 32073b55e4
1 changed files with 83 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

163
public/docs/features.md
View file

@ -3,13 +3,13 @@ Features
Introduction Introduction
=== ===
<i class="fa fa-file-text"></i> **HackMD** is a realtime collaborate markdown note in all platforms. <i class="fa fa-file-text"></i> **HackMD** is a realtime, multiplatform collaborative markdown note editor.
This mean you can do some notes with any other in **Desktop, Tablet or even Phone**. This means that you can write notes with other people on your **desktop**, **tablet** or even on the **phone**.
You can Sign in via **Facebook, Twitter, GitHub, Dropbox** in the **[homepage](/)**. You can sign-in via **Facebook**, **Twitter**, **GitHub**, or **Dropbox** in the [_homepage_](/).
This service still in early stage, might be buggy or crash. Note that this service is still in an early stage, and thus still has some [_issues_](https://github.com/hackmdio/hackmd/issues?q=is%3Aopen+is%3Aissue+label%3Abug).
Please report issue in [GitHub](https://github.com/hackmdio/hackmd). Please report new issues in [GitHub](https://github.com/hackmdio/hackmd/issues/new).
If you need instant help, please use [Facebook Message](https://www.facebook.com/messages/866415986748945). If you need instant help, please send us a [Facebook message](https://www.facebook.com/messages/866415986748945).
**Thank you very much!** **Thank you very much!**
Workspace Workspace
@ -26,105 +26,106 @@ Workspace
<i class="fa fa-toggle-on fa-fw"></i> View: See only the result. <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. <i class="fa fa-toggle-off fa-fw"></i> Edit: See only the editor.
## Upload image ## Image Upload:
You can simply press the camera button <i class="fa fa-camera"></i>. You can upload an image simply by clicking on the camera button <i class="fa fa-camera"></i>.
Or **drag-n-drop** image in editor, even **paste** image works! Alternatively, you can **drag-n-drop** an image into the editor. Even **pasting** images is possible!
It will automatically upload to **[imgur](http://imgur.com)**, nothing to worry :tada: This will automatically upload the image to **[imgur](http://imgur.com)**, nothing to worry. :tada:
![](https://i.imgur.com/9cgQVqD.png) ![](https://i.imgur.com/9cgQVqD.png)
## Share note ## Share Notes:
If you want to share a **editable** note, just copy the url. If you want to share an **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. 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 ## Save a Note:
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. Currently, you can save to **Dropbox** <i class="fa fa-dropbox"></i> or save an `.md` file <i class="fa fa-file-text"></i> locally.
## Import ## Import Notes:
Like save feature, you can also import **.md** from **Dropbox** <i class="fa fa-dropbox"></i>. Similarly to the _save_ feature, you can also import an `.md` file 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: or import content from your **clipboard** <i class="fa fa-clipboard"></i>, and that can parse some **html** which might be useful :smiley:
## Permission ## Permissions:
There is a little button on the top right of the view. It is possible to change the access permission to a note through the little button on the top right of the view.
You can change the permission via theres options. There are four possible 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-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-pencil fa-fw"></i> **Editable**: A signed-in user can edit this note.
<i class="fa fa-lock fa-fw"></i> Locked: Only owner can edit this note. <i class="fa fa-lock fa-fw"></i> **Locked**: Only the owner can edit this note.
<i class="fa fa-hand-stop-o fa-fw"></i> Private: Only owner can view and edit this note. <i class="fa fa-hand-stop-o fa-fw"></i> **Private**: Only the owner can view and edit this note.
**Only the owner of the note can change the permission** **Only the owner of the note can change the note's permissions.**
## Embed a Note:
Notes can be embedded as follows:
## Embed
```xml ```xml
<iframe width="100%" height="500" src="https://hackmd.io/features" frameborder="0"></iframe> <iframe width="100%" height="500" src="https://hackmd.io/features" frameborder="0"></iframe>
``` ```
## [Slide Mode](./slide-example) ## [Slide Mode](./slide-example):
You can use some syntax to divide your note into slides. You can use a special syntax to organize your note into slides.
Then use **Slide Mode** <i class="fa fa-tv"></i> to made a presentation. After that, you can use the **Slide Mode** <i class="fa fa-tv"></i> to make a presentation.
Visit above link for detail. Visit the above link for details.
View View
=== ===
## Table of content ## Table of Contents:
You can look at bottom right place of the view area, there is a TOC button <i class="fa fa-bars"></i>. You can look at the bottom right section 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. Pressing that button will show you a current _Table of Contents_, and will highlight which section you're at.
Support up to **three header levels**. ToCs support up to **three header levels**.
## Permalink ## Permalink
Every header will automatically add a permalink on the right side. 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. You can hover and click <i class="fa fa-chain"></i> to anchor on it.
Edit Edit:
=== ===
## Shortcut keys ## Shortcut Keys:
Just like sublime text, which is pretty quick and convinent. Just like Sublime text, which is pretty quick and convenient.
> For more infomations, see [here](https://codemirror.net/demo/sublime.html). > For more infomation, see [here](https://codemirror.net/demo/sublime.html).
## Auto complete ## Auto-Complete:
This editor provide full auto complete hint of markdown. This editor provides full auto-complete hints in markdown.
- Emojis: type `:` to show hint. - Emojis: type `:` to show hints.
- Code blocks: type ` ``` ` and plus a character to show hint. <i hidden>```</i> - Code blocks: type ` ``` ` and plus a character to show hint. <i hidden>```</i>
- Headers: type `#` to show hint. - Headers: type `#` to show hint.
- Referrals: type `[]` to show hint. - Referrals: type `[]` to show hint.
- Externals: type `{}` to show hint. - Externals: type `{}` to show hint.
- Images: type `!` to show hint. - Images: type `!` to show hint.
## Title ## Title:
This will take the first **level 1 header** as the note title. This will take the first **level 1 header** as the note title.
## Tags ## Tags:
Using tags like below, these will show in your **history**. Using tags as follows, the specified tags will show in your **history**.
###### tags: `features` `cool` `updated` ###### tags: `features` `cool` `updated`
## [YAML metadata](./yaml-metadata) ## [YAML Metadata](./yaml-metadata)
Provide advanced note information to set the browse behavior, visit above link for detail You can provide advanced note information to set the browser behavior (visit above link for details):
- robots: set web robots meta - robots: set web robots meta
- lang: set browse language - lang: set browser language
- dir: set text direction - dir: set text direction
- breaks: set to use line breaks or not - breaks: set to use line breaks
- GA: set to use Google Analytics - GA: set to use Google Analytics
- disqus: set to use Disqus - disqus: set to use Disqus
- slideOptions: set to setup slide mode options - slideOptions: setup slide mode options
## TOC ## ToC:
Use the syntax `[TOC]` to embed table of content into your note. Use the syntax `[TOC]` to embed table of content into your note.
[TOC] [TOC]
## Emoji ## Emoji
You can type any emoji like this :smile: :smiley: :cry: :wink: You can type any emoji like this :smile: :smiley: :cry: :wink:
> See full emoji list [here](http://www.emoji-cheat-sheet.com/) > See full emoji list [here](http://www.emoji-cheat-sheet.com/).
## Todo List ## ToDo List:
- [ ] Todos - [ ] ToDos
- [x] Buy some salad - [x] Buy some salad
- [ ] Brush teeth - [ ] Brush teeth
- [x] Drink some water - [x] Drink some water
## Code block ## Code Block:
We support many code languages, use the auto complete to see the list. We support many programming languages, use the auto complete function to see the entire list.
```javascript= ```javascript=
var s = "JavaScript syntax highlighting"; var s = "JavaScript syntax highlighting";
alert(s); alert(s);
@ -142,7 +143,7 @@ function $initHighlight(block, cls) {
} }
} }
``` ```
> If you want **line numbers**, type `=` after specify the code block languagues. > If you want **line numbers**, type `=` after specifying the code block languagues.
> Also, you can specify the start line number. > Also, you can specify the start line number.
> Like below, the line number starts from 101: > Like below, the line number starts from 101:
```javascript=101 ```javascript=101
@ -163,22 +164,22 @@ function $initHighlight(block, cls) {
} }
``` ```
> Or you might want to continue the previous code block line number, use `=+` > Or you might want to continue the previous code block's line number, use `=+`
```javascript=+ ```javascript=+
var s = "JavaScript syntax highlighting"; var s = "JavaScript syntax highlighting";
alert(s); alert(s);
``` ```
### Blockquotes tags ### Blockquote Tags:
> Using like below to specifiy your **name, time and color** to differ the blockquotes. > Using the syntax below to specifiy your **name, time and color** to vary the blockquotes.
> [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7] > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7]
> > Even support the nest blockquotes! > > Even support the nest blockquotes!
> > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red] > > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red]
## Externals ## Externals
### Youtube ### YouTube
{%youtube 1G4isv_Fylg %} {%youtube 1G4isv_Fylg %}
### Vimeo ### Vimeo
@ -194,7 +195,7 @@ alert(s);
{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %} {%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %}
### PDF ### PDF
**Caution: this might be blocked by your browser if not using https url.** **Caution: this might be blocked by your browser if not using an `https` URL.**
{%pdf https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf %} {%pdf https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf %}
## MathJax ## MathJax
@ -213,9 +214,9 @@ $$
> More information about **LaTeX** mathematical expressions [here](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference). > More information about **LaTeX** mathematical expressions [here](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference).
## UML diagrams ## UML Diagrams
### Sequence diagrams ### Sequence Diagrams
You can render sequence diagrams like this: You can render sequence diagrams like this:
@ -227,9 +228,9 @@ Note left of Alice: Alice responds
Alice->Bob: Where have you been? Alice->Bob: Where have you been?
``` ```
### Flow charts ### Flow Charts
And flow charts like this: Flow charts can be specified like this:
```flow ```flow
st=>start: Start st=>start: Start
e=>end: End e=>end: End
@ -271,12 +272,12 @@ gantt
anther task : 24d anther task : 24d
``` ```
> More information about **Sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/). > 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 **flow charts** syntax [here](http://adrai.github.io/flowchart.js/).
> More information about **Graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html) > More information about **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
> More information about **Mermaid** syntax [here](http://knsv.github.io/mermaid) > More information about **mermaid** syntax [here](http://knsv.github.io/mermaid)
Alert area Alert Area
--- ---
:::success :::success
Yes :tada: Yes :tada:
@ -291,7 +292,7 @@ Watch out :zap:
::: :::
:::danger :::danger
Oh No :fire: Oh No! :fire:
::: :::
## Typography ## Typography
@ -307,7 +308,7 @@ Oh No :fire:
###### h6 Heading ###### h6 Heading
``` ```
### Horizontal rules ### Horizontal Rules
___ ___
@ -316,7 +317,7 @@ ___
*** ***
### Typographic replacements ### Typographic Replacements
Enable typographer option to see result. Enable typographer option to see result.
@ -485,7 +486,7 @@ Duplicated footnote reference[^second].
and multiple paragraphs. and multiple paragraphs.
[^second]: Footnote text. [^second]: Footnote text.
### Definition lists ### Definition Lists
Term 1 Term 1
@ -511,7 +512,7 @@ Term 2
### Abbreviations ### Abbreviations
This is HTML abbreviation example. This is an HTML abbreviation example.
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. It converts "HTML", but keeps intact partial entries like "xxxHTMLyyy" and so on.
*[HTML]: Hyper Text Markup Language *[HTML]: Hyper Text Markup Language