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

Removed unused note and set empty on default note, updated features note

Browse source
This commit is contained in:
Wu Cheng-Han 2016-01-17 09:57:25 -06:00
parent eddff9e863
commit 762bf63581
3 changed files with 251 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
public/GFM.md
View file

@ -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/.

5
public/default.md
View file

@ -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!

367
public/features.md
View file

@ -1,54 +1,117 @@
Features Features
=== ===
### Embed HackMD
```html Introduction
<iframe width="100%" height="500" src="http://hackmd.herokuapp.com/features" frameborder="0"> ===
</iframe> <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:
![](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 <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 View
:smile: :smiley: :cry: ===
## 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**.
### Todo List ## Permalink
- [ ] Not Every header will automatically add a permalink on the right side.
- [ ] No yet You can hover and click <i class="fa fa-chain"></i> to anchor on it.
- asd
- [ ] right away
- [x] Done
- Test
- [x] yes
- asd
- [x] cool
- Test
- asd
- qwe
- vgfhddfgh
- jhlkj
- jkhkjh
- kjhgkh
- gkjhgkj
### Code Highlighting Edit
```javascript ===
var s = "JavaScript syntax highlighting"; ## Shortcut keys
alert(s); Just like sublime text, which is pretty quick and convinent.
function $initHighlight(block, cls) { > For more infomations, see [here](https://codemirror.net/demo/sublime.html).
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
## 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= ```javascript=
var s = "JavaScript syntax highlighting"; var s = "JavaScript syntax highlighting";
alert(s); 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 > Or you might want to continue the previous code block line number, use `=+`
---
#### cool
* XD ```javascript=+
* QQ 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 ## Externals
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
### Youtube
{%youtube 1G4isv_Fylg %} {%youtube 1G4isv_Fylg %}
#### Vimeo ### Vimeo
{%vimeo 124148255 %} {%vimeo 124148255 %}
Gist ### Gist
--- {%gist schacon/4277%}
{%gist schacon/4277 %}
tags ### SlideShare
--- {%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}
> using like below
###### 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 # h1 Heading
## h2 Heading ## h2 Heading
### h3 Heading ### h3 Heading
#### h4 Heading #### h4 Heading
##### h5 Heading ##### h5 Heading
###### h6 Heading ###### h6 Heading
```
### Horizontal rules
## Horizontal Rules
___ ___
@ -139,7 +267,7 @@ ___
*** ***
## Typographic replacements ### Typographic replacements
Enable typographer option to see result. Enable typographer option to see result.
@ -155,8 +283,7 @@ Remarkable -- awesome
'Smartypants, single quotes' 'Smartypants, single quotes'
### Emphasis
## Emphasis
**This is bold text** **This is bold text**
@ -168,6 +295,8 @@ _This is italic text_
~~Deleted text~~ ~~Deleted text~~
lu~lala~
Superscript: 19^th^ Superscript: 19^th^
Subscript: H~2~O Subscript: H~2~O
@ -177,17 +306,17 @@ Subscript: H~2~O
==Marked text== ==Marked text==
## Blockquotes ### Blockquotes
> Blockquotes can also be nested... > Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other... >> ...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 `*` + Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces: + Sub-lists are made by indenting 2 spaces:
@ -197,7 +326,7 @@ Unordered
- Nulla volutpat aliquam velit - Nulla volutpat aliquam velit
+ Very easy! + Very easy!
Ordered #### Ordered
1. Lorem ipsum dolor sit amet 1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit 2. Consectetur adipiscing elit
@ -206,14 +335,18 @@ Ordered
1. You can use sequential numbers... 1. You can use sequential numbers...
1. ...or keep all the numbers as `1.` 1. ...or keep all the numbers as `1.`
1. feafw
2. 332
3. 242
4. 2552
1. e2
Start numbering with offset: Start numbering with offset:
57. foo 57. foo
1. bar 1. bar
### Code
## Code
Inline `code` Inline `code`
@ -241,7 +374,7 @@ var foo = function (bar) {
console.log(foo(5)); console.log(foo(5));
``` ```
## Tables ### Tables
| Option | Description | | Option | Description |
| ------ | ----------- | | ------ | ----------- |
@ -257,52 +390,56 @@ Right aligned columns
| engine | engine to be used for processing templates. Handlebars is the default. | | engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. | | 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 text](http://dev.nodeca.com)
[link with title](http://nodeca.github.io/pica/demo/ "title text!") [link with title](http://nodeca.github.io/pica/demo/ "title text!")
Autoconverted link https://github.com/nodeca/pica Autoconverted link https://github.com/nodeca/pica
## Images ### Images
![Minion](https://octodex.github.com/images/minion.png) ![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
Like links, Images also have a footnote style syntax Like links, Images also have a footnote style syntax
![Alt text][id] ![Alt text][id]
With a reference later in the document defining the URL location: With a reference later in the document defining the URL location:
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" [id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
## Footnotes ### Footnotes
Footnote 1 link[^first]. Footnote 1 link[^first].
Footnote 2 link[^second]. Footnote 2 link[^second].
Inline footnote^[Text of inline footnote] definition. Inline footnote^[Text of inline footnote] definition.
Duplicated footnote reference[^second]. Duplicated footnote reference[^second].
[^first]: Footnote **can have markup** [^first]: Footnote **can have markup**
and multiple paragraphs. and multiple paragraphs.
[^second]: Footnote text. [^second]: Footnote text.
### Definition lists
## Definition lists
Term 1 Term 1
: Definition 1 : Definition 1
with lazy continuation. with lazy continuation.
Term 2 with *inline markup* Term 2 with *inline markup*
@ -322,11 +459,9 @@ Term 2
~ Definition 2a ~ Definition 2a
~ Definition 2b ~ Definition 2b
### Abbreviations
## Abbreviations
This is HTML abbreviation example. This is HTML abbreviation example.
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
*[HTML]: Hyper Text Markup Language *[HTML]: Hyper Text Markup Language