# Noter

### a delicate Markdown editor

Loading...

# Welcome to Writer **Writer** is a delicate Markdown editor. It offers great writing experience with reliable local storage. - **Versatile** - supporting code highlight, *LaTeX* & flow charts, inserting images & attachments by all means. - **Exquisite** - neat but powerful editor, featuring offline docs and live preview. - **Local First** - all your notes are stored locally in your browser. ---------- [TOC] ## Introducing Markdown > Markdown is a plain text formatting syntax designed to be converted to HTML. Markdown is popularly used as format for readme files, ... or in text editors for the quick creation of rich text documents. - [Wikipedia](http://en.wikipedia.org/wiki/Markdown) As showed in this manual, it uses hash(#) to identify headings, emphasizes some text to be **bold** or *italic*. You can insert a [link](http://www.example.com) , or a footnote[^demo]. Serveral advanced syntax are listed below, please press `Ctrl + /` to view Markdown cheatsheet. ### Code block ``` python @requires_authorization def somefunc(param1='', param2=0): '''A docstring''' if param1 > param2: # interesting print 'Greater' return (param2 - param1 + 1) or None class SomeClass: pass >>> message = '''interpreter ... prompt''' ``` ### LaTeX expression $$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$ ### Table | Item | Value | Qty | | :-------- | --------:| :--: | | Computer | 1600 USD | 5 | | Phone | 12 USD | 12 | | Pipe | 1 USD | 234 | ### Diagrams #### Flow charts ```flow st=>start: Start e=>end op=>operation: My Operation cond=>condition: Yes or No? st->op->cond cond(yes)->e cond(no)->op ``` #### Sequence diagrams ```sequence Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! ``` > **Note:** You can find more information: > - about **Sequence diagrams** syntax [here][3], > - about **Flow charts** syntax [here][4]. ### Checkbox You can use `- [ ]` and `- [x]` to create checkboxes, for example: - [x] Item1 - [ ] Item2 - [ ] Item3 ## Shortcuts Help `Ctrl + /` Sync Doc `Ctrl + S` Create Doc `Ctrl + Alt + N` Maximize Editor `Ctrl + Enter` Preview Doc `Ctrl + Alt + Enter` Doc Management `Ctrl + O` Menu `Ctrl + M` Bold `Ctrl + B` Insert Image `Ctrl + G` Insert Link `Ctrl + L` Convert Heading `Ctrl + H` ## Credits **Noter** was first built upon [Dillinger][5], and the newest version is almost based on the awesome [StackEdit][6]. Acknowledgments to them and other incredible open source projects! ## Feedback & Bug Report - Twitter: [@gock2][7] - Email: <hustgock@gmail.com> ---------- Thank you for reading this manual. Enjoy your **Noter** journey! [^demo]: This is a demo footnote. Read the [MultiMarkdown Syntax Guide](https://github.com/fletcher/MultiMarkdown/wiki/MultiMarkdown-Syntax-Guide#footnotes) to learn more. [3]: http://bramp.github.io/js-sequence-diagrams/ [4]: http://adrai.github.io/flowchart.js/ [5]: http://dillinger.io [6]: http://stackedit.io [7]: https://twitter.com/gock2

## Ooops...

StackEdit has stopped because another instance was running in the same browser.

> If you want to reopen StackEdit, click on "Reload".

### Hyperlink

Please provide the link URL and an optional title:

### Image

Please provide the image URL:

NOTE: Noter supports copying image from clipboard. Try to capture a screenshot and paste.

### Delete

Are you sure to delete ``?

> ##### NOTE:

> `Delete` removes the file from local storage.

Bold | `Cmd` `B`
Italic | `Cmd` `I`
Link | `Cmd` `L`
Image | `Cmd` `G`
Heading | `Cmd` `H`
Code | `Cmd` `K`
Table | `Cmd` `Alt` `T`
Horizontal rule | `Cmd` `R`
Undo | `Cmd` `Z`
Redo | `Cmd` `Y` / `Cmd` `Shift` `Z`

Save | `Cmd` `S`
New document | `Cmd` `Alt` `N`
Open document | `Cmd` `O`
Toggle editor / preview | `Cmd` `Enter`
Full preview | `Cmd` `Alt` `Enter`
Quick help | `Cmd``/`

Emphasis

    *Italic*   **Bold**

`Ctrl` `I/B`

Link

    [Alt](http://example.com)

`Ctrl` `L`

Image

    ![Alt](example.jpg)

`Ctrl` `G`

Heading

    Heading1        Heading2
    ========        --------

    ## Heading2     ###### Heading6

`Ctrl` `1~5`

List

    1. Numbered list    - Bulleted list
    2. Numbered list    - Bulleted list

Blockquote

    > This is quote content
    > it can embed heading or list

Code

    Inline code `var a=1`,  code block:：
    ```ruby
    print 'Hello world'
    ```

`Ctrl` `K`

LaTex

    Inline $ y = x $ , block:：
    $$ a^2 + b^2 = c^2 $$

Table

    | Item      |    Value | Qty  |
    | :-------- | --------:| :--: |
    | Computer  | 1600 USD |  5   |

`Ctrl` `Alt` `T`

Doc Management | `Ctrl` `O`
Help | `Ctrl``/`
Maximize Editor | `Ctrl` `Enter`
Preview Doc | `Ctrl` `Alt` `Enter`
Sync Doc | `Ctrl` `S`
Create Doc | `Ctrl` `Alt` `N`
Menu | `Ctrl` `M`

Image directives

    ![@desc | left | 300x0](a.jpg)

@desc | @ will show description below
left | Align to left
right | Align to right
center | Align in center
300x200 | WxH, zero means auto fit.

### Settings

Editor
Lite is recommended generally, however may feels sluggish under certain circumstances. The Traditional is more responsive, and supports Vim key bindings and line numbers.
Key bindings
Normal
Vim
Show line number
Code highlight
Show line number for code block
LaTex output(?)
Font size
Preview font
Example: "Helvetica Neue", Arial
Editor font
Only monospaced fonts are supported. Otherwise it may cause cursor dislocation.
Example: Menlo, Consolas, "Courier New"
Custom render CSS
/** Write your own CSS. For example: h1 { border-bottom: 1px solid #ccc; line-height:1.6; } body { background:#FDFFD0 } **/
Create your own extension...

Chrome provides `Save as PDF` in `Print` function. Steps:

1. Click `Export to PDF` at the bottom of the page.
2. Configure the settings as showed below in `Print` dialog.
3. Click `Save`.

hustgock and john123 are editing this note