Cheng-Han, Wu 5c861fd51e Update docs and textcomplete rules for image syntax with size specified

2016-05-27 13:39:54 +08:00

12 KiB

Raw Blame History

Features

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. If you need instant help, please use Facebook Message. 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, nothing to worry 🎉

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 😃

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

<iframe width="100%" height="500" src="http://hackmd.io/features" frameborder="0"></iframe>

Slide Mode

You can use some syntax to divide your note into slides. Then use Slide Mode to made a presentation. Visit above link for detail.

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.

Permalink

Every header will automatically add a permalink on the right side. You can hover and click to anchor on it.

Edit

Shortcut keys

Just like sublime text, which is pretty quick and convinent.

For more infomations, see here.

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.

YAML metadata

Provide advanced note information to set the browse behavior, visit above link for detail

robots: set web robots meta
lang: set browse language
dir: set text direction
breaks: set to use line breaks or not
mathjax: set to parse mathjax or not

Emoji

You can type any emoji like this 😄 😃 😢 😉

See full emoji list here

Todo List

Todos
- Buy some salad
- Brush teeth
- Drink some water

Code block

We support many code languages, use the auto complete to see the list.

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;
  }
}

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:

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;
  }
}

Or you might want to continue the previous code block line number, use =+

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]

Externals

Youtube

{%youtube 1G4isv_Fylg %}

Vimeo

{%vimeo 124148255 %}

Gist

{%gist schacon/4277%}

SlideShare

{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}

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:

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.

UML diagrams

Sequence diagrams

You can render sequence diagrams like this:

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:

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

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
}

Mermaid

gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d

More information about Sequence diagrams syntax here. More information about Flow charts syntax here. More information about Graphviz syntax here More information about Mermaid syntax here

Alert area

:::success Yes 🎉 :::

:::info This is a message 📣 :::

:::warning Watch out ⚡ :::

:::danger Oh No 🔥 :::

Typography

Headers

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

Horizontal rules

Typographic replacements

Enable typographer option to see result.

test.. test... test..... test?..... test!....

!!!!!! ???? ,,

Remarkable -- awesome

"Smartypants, double quotes"

'Smartypants, single quotes'

Emphasis

This is bold text

This is italic text

~~Deleted text~~

lu~~lala~~

Superscript: 19^th^

Subscript: H2O

++Inserted text++

==Marked text==

Blockquotes

Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

Lists

Unordered

Create a list by starting a line with +, -, or *
Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
  - Ac tristique libero volutpat at
  - Facilisis in pretium nisl aliquet
  - Nulla volutpat aliquam velit
Very easy!

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
You can use sequential numbers...
...or keep all the numbers as 1.
feafw
332
242
2552
e2

Start numbering with offset:

Code

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block code "fences"

Sample text here...

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Tables

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.

Right 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.

Left 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.

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 link with title Autoconverted link https://github.com/nodeca/pica

Images

Like links, Images also have a footnote style syntax With a reference later in the document defining the URL location:

![Minion](https://octodex.github.com/images/minion.png =200x200) Show the image With given size

Footnotes

Footnote 1 link¹. Footnote 2 link². Inline footnote^[Text of inline footnote] definition. Duplicated footnote reference².

Definition lists

Term 1: Definition 1

with lazy continuation.

Term 2 with inline markup

Definition 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Abbreviations

This is HTML abbreviation example. It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

Footnote can have markup and multiple paragraphs. ↩︎
Footnote text. ↩︎

12 KiB Raw Blame History