sashimi-webapp/static/data/features.txt
# Sashimi Note Features
Introduction
===
**Sashimi Note** is a realtime, multiplatform collaborative markdown note editor.
Note that this service is still in an early stage, and thus still has some [_issues_](https://github.com/nus-mtp/sashimi-note/issues?q=is%3Aopen+is%3Aissue+label%3Abug).
Please report new issues on our [GitHub](https://github.com/nus-mtp/sashimi-note/issues/new) page.
**Thank you very much!**
Workspace
===
## Modes
Edit: See only the editor. (Click on the pencil icon)
View: See only the result. (Click on the eye icon)
Both: See both in split view. (Click on the split window icon)
## Save a Note:
Currently, your files are automatically saved as an `.md` file locally.
## Import Notes:
Similarly to the _save_ feature, you can also import an `.md` file from your computer.
## Embed a Note:
Notes can be embedded as follows:
```xml
<iframe width="100%" height="500" src="https://google.com" frameborder="0"></iframe>
```
## Slides and Pages Mode:
You can view your documents in **Slides or Pages Mode**! To do so just select **`Slides or Pages`** under the **Manage** dropdown bar!
Getting Started
===
Let's get started by learning some basic **Markdown**!
## Typography
### Headers
```
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
```
### Horizontal Rules
___
---
***
### Typographic Replacements
Enable typographer option to see result.
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
test.. test... test..... test?..... test!....
!!!!!! ???? ,,
Remarkable -- awesome
"Smartypants, double quotes"
'Smartypants, single quotes'
### Emphasis
**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
~~Deleted text~~
lu~lala~
### 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
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
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
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
``` js
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](http://dev.nodeca.com)
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
Autoconverted link https://github.com/nodeca/pica
### Images
Like links, Images also have a footnote style syntax
![Alt text][id]
With a reference later in the document defining the URL location:
```
Like this,
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
```
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
## Conditional Hiding
You can even choose what content to hide from View! To do so simply, Go to **Manage** and under **File Format** type in the condition, then use the following syntax:
```
For inline hiding from ALL conditions use:
=>hide Text here <=
For block hiding from *condition* use:
==>hide:*condition*
Content here
<==
Note: Only condition specified by fileName above will hide the contents
e.g. if under File Format, "Students" is written,
This hides
==>hide:Students
*Content*
<==
But, this doesn't
==>hide:Student
*Content*
<==
```
Go ahead and try it here:
<iframe width="100%" height="500" src="https://sashimi-note-dev.herokuapp.com/content" frameborder="0"></iframe>
Extra Features:
===
## Shortcut Keys:
Just like Sublime text, which is pretty quick and convenient.
> For more infomation, see [here](https://codemirror.net/demo/sublime.html).
## ToC:
Use the syntax `[[TOC]]` to embed table of content into your note.
[[TOC]]
## Code Block Highlighting:
We support many programming languages, click [here](http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases) to see the entire list.
```javascript
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;
}
}
```
## Katex & ASCIIMath
You can render *LaTeX* mathematical expressions using [**KaTeX**](https://khan.github.io/KaTeX/), 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).
Even better, you can use ASCIIMath to write mathematical expressions too! Much simpler and intuitive, like how you would use it in chats, MS Word etc! Check this out!
For Inline, `math sum_(i=1)^n i^3=((n(n+1))/2)^2`
For Block,
```math
1+1=2
a^2 + b^2 = c^2
P(A | B) = (P(B | A)P(A)) / P(B)
varphi = int_0^10 x^2 dx
```
> Note: There are some mathematical expressions that KaTeX has yet to support. See [here](http://www.intmath.com/cg5/katex-mathjax-comparison.php)
## 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?
```
> More information about **sequence diagrams** syntax [here](http://bramp.github.io/js-sequence-diagrams/).
### Flow Charts
Flow charts can be specified 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
```
> More information about **flow charts** syntax [here](http://adrai.github.io/flowchart.js/).
### 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
HeadStudents->{Deputy1 Deputy2 BusinessManager}
Deputy1->{Teacher1 Teacher2}
BusinessManager->ITManager
{rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
}
```
> More information about **graphviz** syntax [here](http://www.tonyballantyne.com/graphs.html)
### Mermaid
```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 **mermaid** syntax [here](http://knsv.github.io/mermaid)