# You can create this
## Images, code, math, markdown, diagrams
### flashcards, todo/shopping/wish/check list, expenses record, address book
#### Usage
You must be logged in to create or update or delete your existing posts. You can read public posts without logging in.

<!--
#### Tag expansion
Text between space(or begin of line) and cursor is converted to xml tag on pressing tab.
#### Indention
Preceding spaces and tabs of current line are inserted to next line as well.
#### Shortcuts
1. Ctrl + 1 = h1 tag
1. ...
1. Ctrl + 6 = h6 tag

1. B: Bold
1. I: Italic
1. U: Underline
1. S: Strikethrough
1. G: Superscript
1. K: Subscript
1. E: Break-->

### Flashcards
Intervals: time durations seperated by space
When a flashcard is right, it increases one level and will be ready to be practiced on date-time corresponding with time/interval associated with that level and current date-time.

Steps to decrease on wrong: max, 1, 2, ...

#### Mathematics
<!--LaTeX between `$$` and `$$` <!--or <code>\[</code> and <code>\]</code>--> <!--is rendered as display math. E.g: $$A = \pi r^2$$-->
<!--LaTeX between <code>\(</code> and <code>\)</code> is rendered as inline math. E.g: \( A = \pi r^2 \) is displayed within this line.-->
<!--<h4>Wiki</h4>
Text between [ and ] is displayed as internal link. Eg: \[School\] gives [School]. </br>-->
Works in react
````html
```math
A = \pi r^2
```
````

```math
A = \pi r^2
```
Works in angular
```latex
$$A = \pi r^2$$
```
$$A = \pi r^2$$

#### Syntax highlighting
Code in code block is syntax highlighted.
<!-- Prism is used to highlight code between `<pre>` and/or `code` tags. Eg:  -->
~~~
```java
public class Program {
	public void greet() {
		System.out.println("Hello world!");
	}
}
```
~~~

```java
public class Program {
	public void greet() {
		System.out.println("Hello world!");
	}
}
```

#### Images
Image can be inserted and displayed in the document. <!-- using Upload file button. -->
<img style='width: 100%;' src='https://subedis.com/uploads/2019/3/0.jpg'></img>

#### Snippets
Snippets can be used to create text block that is hidden or displayed by default. It can be toggled. Text is hidden by default. Add class displayed to display text by default.
<div class="snippet">Spoiler<div>Spoiled</div></div>
<div class="snippet displayed">Long text<div>bla bla</div></div>

<!--<h4>Table of contents</h4>
TOC is created using html headers (h1 - h6) and is displayed while reading (not while editing/creating).-->

#### Markdown
Markdown is rendered as html when placed in a container (div) with class markdown.


**Bold**

```markdown
**Bold**
```

You can also mark a post as markdown. This is preferred to embedding markdown in html as not everything can be embedded in html as markdown.

<h4>Mermaid diagrams</h4>
Mermaid diagrams are supported when placed in div with class mermaid.

```mermaid
graph TD
    Start --> Stop
```

```html
<div class="mermaid">
graph TD
    Start --> Stop
</div>
```

<h4>Referencing one post/list in another post</h4>
There are buttons on create listitem/post page to insert post and lists in another post/list.
You can include posts and lists manually with following code:<br/><br/>

<post id="c6881d61-8918-4705-aec2-1b804bc73390"></post>

```html
<post id="c6881d61-8918-4705-aec2-1b804bc73390"></post>
```

<list id="0cf18276-4e7f-453f-ac63-41c1f8e994dc"></list>

````html
<list id="0cf18276-4e7f-453f-ac63-41c1f8e994dc"></list>
````

In the following snippet post named demo.js is being referenced. This way, it can be reused in multiple places.

```javascript
const ids = ['demo.js'];
for(const id in ids) {
    const script = document.createElement('script');
    script.src = '/Post/File?title=' + ids[id];
    document.body.appendChild(script); //or something of the likes
}
```

<h4>Other</h4>

You can also create (shopping/wish/check/to-do) lists, address book, record expenses, create flashcards using this website. Let us know what else we can provide. Given enough interest, we will implement your wishes.

### Spreadsheet
```json
{["column1", "column2"],
[["r1c1", "r1c2"],["r2c1", "r2c2"]]}
```
Columns can be dragged to rearrange them.

### Accounting
You can use accounting module to monitor your income and expenses.
Accounts are for example paypal, checking account in bank, cash etc. These are asset accounts.
Non-asset accounts are things on which you expend money. For example amazon, netflix, spotify, lidl (grocery store) etc.
At the bottom of transactions page, you will see expenses per account type/category: transportation, accommodation, food, entertainment.

### Lists
You can order list items to change their priority.
Lists can contain projects and contexts. It is inspired by todo.txt and getting things done.
Contexts are situations and places where you might want to buy or do things. For example you might want to buy eggs and milk in supermarket and meat at the butcher. Here butcher and supermarket are contexts.
Projects are group of tasks towards a goal. For example, you might want to cook everyday and sleep 8 hours/day to be healthy. Here, cooking everyday and sleeping 8 hours/day are tasks related to project of being healthy.