Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/inns/mak

A universal notepad. (WIP)
https://github.com/inns/mak

editor gist latex markdown plaintext

Last synced: 1 day ago
JSON representation

A universal notepad. (WIP)

Awesome Lists containing this project

README 

        


  




Mak: a universal notepad





  mak.ink   

  Desktop App   

  Documentation   

  @shuding_

  


  







  

    

  

  

    

  







> All you do is sit down at a typewriter and bleed.  

> — Ernest Hemingway



**Please visit https://inns.studio/mak for more information and live demos.** 



Join [Mak User Group](https://t.me/mak_ink) ([中文用户群](https://t.me/mak_ink_cn)) on Telegram.



## Table of Contents

- [Features*](#features)

- [Shortcuts](#shortcuts)

- [URL / link](#url--link)

  + [File (#file)](#file-file)

  + [Mode (#file?mode)](#mode-filemode)

  + [URL Action (?action)](#url-action-action)

- [Settings (`set:`)](#settings-set)

- [More Details](#more-details)

  + [LaTeX](#latex)

  + [Gist](#gist)

  + [Embeding as iframe](#embeding-as-iframe)

  + [Drag and drop](#drag-and-drop)

  + [Desktop App](#desktop-app)

  + [Mobile](#mobile)

  + [iOS App](#ios-app)

  + [Open Source](#open-source)

- [Examples](#examples)

- [Raw Thoughts](#raw-thoughts)

- [Share Mak](#share-mak)

- [License & Acknowledgement](#license--acknowledgement)



## Features*

- a “maximally minimal” design

- blazing fast

- multiple files support

- auto-saving

- works in offline

- side by side preview

- syntax highlighting

- powerful text editor

- LaTeX support

- task lists

- notepad links

- quick commands

- customization

- line number

- word counter

- URL configuration

- interactive plain text

- sync via Gists

- zoom friendly

- printer friendly

- PDF generating

- exporting

- ...



*Some features such as offline and sync may behave differently in different browsers.



## Shortcuts

> Click (or click with middle mouse button) on Markdown links to open (open in new tab).  

> Click on Markdown checkboxes to toggle a task.  

> Use ⌘ + [ / ⌘ + ] to outdent / indent text.  

> Use ⌥/Alt + Click to position the cursor, even on links.  

> Use ⌘/Ctrl + Click to create multiple cursors.  

> Use ⌥/Alt + Drag to select a rectangle area.  

> Use ⌘/Ctrl + Drag to select multiple areas.  

> Use the middle button on mouse to open links in new tab.  

> Use ⌘/Ctrl + Enter over a link to “click” it.

> Type `set:` to open quick commands.  

> Type `go:` to open quick jump.  



## URL / link

### File (#file)

> Files start with a hashtag `#` in the URL / link.  

> Files can be accessed via in-document links: `[my todos](#todo)`.  

> Files can be accessed via quick jump: `go:todo` and hit enter.  



+ Default file

  - [mak.ink#](https://mak.ink#): the default file

  - [mak.ink](https://mak.ink): without the hashtag

+ Built-in notepads (**readonly**)

  - [mak.ink#list](https://mak.ink#list): a place to find all your files

  - [mak.ink#preferences](https://mak.ink#preferences): preferences

  - [mak.ink#sample](https://mak.ink#sample): the sample document

  - [mak.ink#profile](https://mak.ink#profile): user profile

+ Create a file

  - [mak.ink#whatever_you_want](https://mak.ink#whatever_you_want)



### Mode (#file?mode)

> A mode is a pre-defined way to view files, so modes must be attached to a file.  

> Modes start with a question mark `?` in the URL / link.  

> Multiple modes are separated by `&`s: `mak.ink?dark&large`.  

> **Modes are defined by the URL, and will override your settings.**  

> For new opened files, modes attached to current file will be gone.  

> If you want to use a mode as default option, use settings below.  



+ View modes

  - [mak.ink#sample?edit](https://mak.ink#sample?edit): open sample in editor mode

  - [mak.ink#sample?read](https://mak.ink#sample?read): open sample in reading mode

  - [mak.ink?split](https://mak.ink?split): use split mode in the default notepad

+ Themes

  - [mak.ink?dark](https://mak.ink?dark): dark mode

  - [mak.ink?light](https://mak.ink?light): light mode (default)

+ Other settings

  - [mak.ink?large](https://mak.ink?large): larger text

  - [mak.ink?num](https://mak.ink?num): show line number

+ Combine

  - [mak.ink?dark&large](https://mak.ink?dark&large)



### URL Action (?action)

> Actions are special modes.  

> Actions start with a question mark `?` in the URL / link,

  and use `=` to pass parameters.  

> Actions will be removed from URL automatically.  

> **Actions might do changes to your content.**  



+ Built-in actions

  - [mak.ink?gist=5d52fb081b3570c81e3a](https://mak.ink?gist=5d52fb081b3570c81e3a): load a Gist and create a file (#5d52fb081b3570c81e3a)

+ Combine modes

  - [mak.ink?gist=5d52fb081b3570c81e3a&read](https://mak.ink?gist=5d52fb081b3570c81e3a&read): load a Gist in reading mode



## Settings (`set:`)

> You can type `set:` and hit enter in the editor to change settings.  

> You can create a "set" link and click on it: `[dark](set:dark)`.  

> Settings change preferences globally and persistently.  

> **Settings can be override (locally) by current modes.**  



+ View mode settings

  - `set:split`

  - `set:edit`

  - `set:read`

+ Display settings

  - `set:dark`

  - `set:large`

+ Other

  - `set:print`: print / download PDF

  - `set:export`: export data

+ Other settings

  - Check out the **[Preferences Page](https://mak.ink#preferences)**.

  - You can also use the _developer console_ to change settings :)



## More Details



### LaTeX

LaTeX rendering is powered by [KaTeX](https://khan.github.io/KaTeX/).



You need to wrap the $ inside an inlined code block to render LaTeX inlined equations, or use $$ inside a multi-line code block to get an equation block:  



  `$\frac{\pi}{2}$`



or



  ```

  $$

  \frac{\pi}{2}

  $$

  ```



### Gist

Use `?gist=` to load a GitHub Gist. It will be stored to `#` automatically (and replace the original context, if it exists), and mark this file as a Gist.  



Other commands: `set:login`, `set:logout`, `set:pull`, `set:push`.



### Embeding as iframe

Use **Gist** and read mode:



```html



```



You can easily embed Mak in other websites.



### Drag and drop

You can drag your file into the editor, and its content will be **inserted** after your cursor automatically.  



Currently all files will be read as **plain text** files. And the file size limit is **10MB**.



### Desktop App

Checkout [Makmini](https://github.com/inns/mak-mini) for macOS and Windows.



### Mobile

*Currently unavailable.*



For now, all basic features are available in mobile browsers. But there’re yet some known limitations:

- In Safari (macOS or iOS), `localStorage` is disabled in _private browsing mode_.

- In Safari on iOS, the screenshot functionality built on SVG `foreignObject` is not working dut to the iOS security model. So it’s replaced by another, simpler screenshot strategy.

- Service Worker is not fully supported on iOS. The offline feature is not working.



Technique details: due to the slow progress of the [IME](https://caniuse.com/#feat=ime) API implementation on `contenteditable` elements, we are using the native `textarea` as the input handler on mobile devices to make IME work. But textareas cannot do any _styling_ or _customization_. So some implementations in CodeMirror (and any other in-browser editors) might be hacky which caused strange behaviours on mobile devices (such as cursor moving and copy-paste experience). The (only) solution is: make a native App.



### iOS App

*Currently unavailable.*



WIP. You can add the Web version to your Home screen as a bookmark.



### Open Source

Will do after some code cleanup & refactoring.



## Raw Thoughts

[@chenglou](https://twitter.com/_chenglou) said this in ReactEurope:

> Not about potential power of doing more - it’s about exploiting properties you gain by doing less.



And as I always believe: Text powers editors. Not the opposite.



## Share Mak

[![](https://badgen.net/badge//twitter?icon=twitter)](https://twitter.com/intent/tweet?text=@theinnsinn+A+piece+of+paper:&url=https%3A%2F%2Finns.studio%2Fmak)



## License & Acknowledgement

Inspired and powered by [CodeMirror](http://codemirror.net/), [RxJS](https://github.com/Reactive-Extensions/RxJS) and other awesome open source projects.



By Shu ([email protected]), SH 2017  

https://shud.in