Giter VIP home page Giter VIP logo

noteappjs's Introduction

NoteApp

NoteApp is a server-less, lightweight and easy-to-use note-taking web app that uses GitHub flavoured Markdown syntax for styling all forms of writing. NoteApp uses an in-browser database called IndexedDB to store data.

Features

  • Add / Edit / Delete Notes.
  • Copied HTML content automatically converted to Markdown on paste event.
  • Syntax highliting for code blocks.
  • Download Notes as Markdown files.
  • Markdown editing tools.
  • Filter/Search notes.
  • Auto close brackets and quotes.
  • Split screen for Markdown Live Preview
  • Emojis!! ๐Ÿ”ฅ ๐Ÿ˜ ๐ŸŒŸ ๐Ÿ˜Ž โœจ

Syntax guide

Hereโ€™s an overview of Markdown syntax that you can use on NoteApp.

Headers

To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level. For example, to create a heading level three (

), use three number signs (e.g., ### My Header).

# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag

Emphasis

You can add emphasis by making text bold or italic.

*This text will be italic*
_This will also be italic_
A*cat*meow

**This text will be bold**
I just love __bold text__.
Love**is**bold

Lists

You can organize items into ordered and unordered lists.

Unordered Lists

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items.

 - Item 1
 - Item 2
    * Item 2a
    * Item 2b
    + Item 3a
    + Item 3b
    - Item 4a
    - Item 4b

Ordered Lists

To create an ordered list, add line items with numbers followed by periods. The numbers donโ€™t have to be in numerical order, but the list should start with the number one.

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

The rendered output will look like this:

  1. Item 1
  2. Item 2
  3. Item 3
    1. Item 3a
    2. Item 3b

Images

Format: ![Alt Text](url)

![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)

Links

Format: [Link name](url)

http://github.com - automatic!
[GitHub](http://github.com)

To quickly turn a URL or email address into a link, enclose it in angle brackets.

<https://www.example.org>

<[email protected]>

The rendered output looks like this:

https://www.example.org

[email protected]

Blockquotes

To create a blockquote, add a > in front of a paragraph.

As Kanye West said:

> We're living the future so
> the present is our past.

The rendered output looks like this:

As Kanye West said:

We're living the future so the present is our past.

Blockquotes can contain other Markdown formatted elements:

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

The rendered output looks like this:

The quarterly results look great!

  • Revenue was off the chart.
  • Profits were higher than ever.

Everything is going according to plan.

Task Lists

- [x] a single item in the list
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

Would become:

  • a single item in the list
  • list syntax required (any unordered or ordered list supported)
  • this is a complete item
  • this is an incomplete item

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column

Would become:

First Header Second Header
Content from cell 1 Content from cell 2
Content in the first column Content in the second column

Creating tables with hyphens and pipes can be tedious. To speed up the process, try using the Markdown Tables Generator. Build a table using the graphical interface, and then copy the generated Markdown-formatted text into your notes.

Automatic linking for URLs

Any URL (like http://www.github.com/) will be automatically converted into a clickable link - http://www.github.com/

Strikethrough

Any word wrapped with two tildes (like ~~this~~) will appear crossed out - (like this).

Horizontal Rules

To create a horizontal rule, use three or more asterisks (***), dashes (---), or underscores (___) on a line by themselves.

***

---

_________________

Inline code

To denote a word or phrase as code, enclose it in backticks (`).

I think you should use an `<pre><code>` element here instead.

Code Blocks

To create code blocks, indent every line of the block by at least four spaces or one tab.

    {
    "firstName": "John",
    "lastName": "Smith",
    "age": 25
    }

If you find that inconvenient, try using fenced code blocks. Depending on your Markdown processor or editor, youโ€™ll use three backticks (```) or three tildes (~~~) on the lines before and after the code block.

```
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
```

Syntax Highlighting

NoteApp uses a Markdown processors that support syntax highlighting for fenced code blocks. This feature attempts to detects the language automatically and adds color highlighting for whatever language your code was written in.

#!/bin/bash

###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

if [ "$UID" -ne 0 ]
then
 echo "Superuser rights required"
 exit 2
fi

genApacheConf(){
 echo -e "# Host ${HOME_DIR}$1/$2 :"
}

echo '"quoted"' | tr -d \" > text.txt

Markdown Live Preview

Live markdown previews for your favorite editor on a split screen.

Emoji

NoteApp supports emojis! There are two ways to add emoji to Markdown files: copy and paste the emoji into your Markdown-formatted text, or type emoji shortcodes.

Emoji shortcuts begin and end with a colon and include the name of an emoji.

Gone camping! :tent: Be back soon.

That is so funny! :joy:

This will be rendered as:

Gone camping! โ›บ Be back soon.

That is so funny! ๐Ÿ˜‚

You can use this list of emoji shortcodes

noteappjs's People

Contributors

peterjuma avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.