• Stars
    star
    550
  • Rank 80,395 (Top 2 %)
  • Language Vue
  • Created over 8 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A smart and beautiful markdown editor.

Markcook, a smart and beautiful markdown editor

Img

中文文档

Desktop App (for windows): markcook2.0-win32-x64.zip

What's Markcook?

Markcook is a markdown editor, you can play it HERE

By now, Markcook has updated to version 2.0, which was redesigned by Google Material Design, rebuilt by VueJS 2.0 and Vuex 2.0. All the works made Markcook much more beautiful and smarter.

About it's name and design

Why it names “Markcook” and why should you choose it? For me, good food cooked by good cook, and I would like my editor could “cook” the markdown good, so I gave this name to it.

Google Material Design is my favorite style, not only it looks beautiful, but also makes me feel comfortable.

Img

As an editor, it should be easy to use. Markcook has tried its best to improve the user experience. The color is low contrast and low saturability so that your eyes wouldn’t be hurt; all your operations would be as smooth as the transition and the animation dose.

Img

Features

Thought Markcook is an online markdown editor and back-end free, it could do as good as a local application.

You can open more than one markdown file and switch them conveniently from the side menu, just like Sublime Text or Atom, etc.

Img

Files could be loaded by dragging.

Img

You can save the article as a markdown file or a html file, the article title would be set by the string above the cutting line automatically, and the file name would be same to the title, too.

Img

Using the tool bar could make you markdown editing very easy. By clicking to the button on the tool bar, you could insert a markdown string to your article, or just format a normal string to markdown.

Img

Don’t ever be afraid of loosing your work while using Markcook. It could save your work to local storage automatically. Even thought you have shut down the browser, you would find all your works are still in there the next time you open Markdown by the same browser.

Img

Deep in Markcook

Thanks to VueJS 2.0 and Vuex 2.0, Markcook was developed by components and the components are decoupled, and all the state are managed by a store — which means it’s easy to maintain and customize.

|__ index.html
   |__ src
     |__ App.vue
     |__ components
       |__ inputer.vue
       |__ navBar.vue
       |__ outputer.vue
       |__ sideMenu.vue
     |__ main.js
   |__ vuex
     |__ store.js

The main logic was handle by store.js, and the components mostly in charge of input and output, or just showing the states. More information you could find them in the source code.

Run and build

You could run Markcook locally by cloning it.

git clone https://github.com/jrainlau/markcook.git

cd markcook && yarn

For developing mode:

yarn run dev

For building mode:

yarn run build

For PWA test mode:

yarn run build:watch

# open a new terminal
yarn start

If you enjoy Markcook, it would be great to fork it, star it, and send issues or pull requests to it. Thank you very much!

License

MIT

More Repositories

1

canjs

CanJS is a javascript interpreter, which can run JS code in JS.
JavaScript
339
star
2

draw-something

使用VueJS和WebSocket技术实现的你画我猜小游戏
Vue
267
star
3

vue-occupy

A Vue directive for occupying content places before the data has been loaded.
JavaScript
217
star
4

scion

Scion is a scaffold for initiating new projects from a given template.
TypeScript
180
star
5

picee

Using Github as your image hosting service.
JavaScript
166
star
6

MY-Kit

基于 Vite 的超丝滑 Vue3 组件库开发框架
CSS
162
star
7

smartour

makes website tour guide much easier.
TypeScript
156
star
8

taxi-together-client

一起打车吧微信小程序客户端
JavaScript
114
star
9

LowPolifier

Style an image with low-poly
JavaScript
98
star
10

sphinx

A very light JS library which could encode a string to an image, or decode an image to a string.
JavaScript
73
star
11

vue-skeleton

JavaScript
66
star
12

chat-input-box

Web聊天工具的富文本输入框
61
star
13

vue-donut

A template work with vue-cli, it helps you build your own VueJS basic UI component library in an easy way.
JavaScript
57
star
14

motto

A tool to show your motto in an amazing way
JavaScript
49
star
15

MintloG

使用Vuejs+Webpack+VueRouter+VueResource搭建的博客SPA
JavaScript
46
star
16

rhyke

Use morse code rhythm to awake something.
JavaScript
42
star
17

filemap

A tool for creating files structure tree map.
JavaScript
41
star
18

blog-articles

My personal blog.
HTML
39
star
19

tiny-reactive

JavaScript
31
star
20

mongoose_crud

使用express与mongoose对mongodb数据库进行增删改查操作demo
JavaScript
29
star
21

elf

一个干净,轻巧的响应式CSS框架。
CSS
26
star
22

taxi-together-server

taxi wechat mini program server
Python
23
star
23

vonut

A personal blog system made by VueJS.
JavaScript
23
star
24

online-code-runner

Online code runner, works like Codepen
Vue
21
star
25

VueComponentsCommunicateDemo

实现了vuejs组件之间的通讯问题
JavaScript
19
star
26

mog

A very easy data binding instance.
JavaScript
18
star
27

gulp-html-import

A gulp plugin which can import .html files into .html files
JavaScript
17
star
28

webpack-learning

JavaScript
16
star
29

wallpaper-downloader

Python
10
star
30

dolu

A light weight tool for photo uploading
JavaScript
9
star
31

markssue

🍘 Markdown previewer for editing Github issues.
JavaScript
8
star
32

vue-composition-api-demo

Vue
5
star
33

python-learning

记录我的python学习路线
Python
5
star
34

node-redis-missions-queue

TypeScript
5
star
35

jsdoc2configs

Convert JSDoc to any configs
TypeScript
4
star
36

TodoMVC-PWA

CSS
3
star
37

gulp-tools

gulp功能包
JavaScript
3
star
38

node-learning

nodejs学习
JavaScript
3
star
39

kaleido

A free wallpaper downloader relates to
JavaScript
2
star
40

bsdiff-cli

bsdiff globally
JavaScript
2
star
41

extract-yaml-from-markdown-plugin

extract yaml information from a markdown file automatically
JavaScript
2
star
42

rust_learning_check_list

My Rust learning check list
Rust
1
star
43

oChat-client

Vue
1
star
44

longit.js

A tool to format long number string which is longer than Number.MAX_SAFE_INTEGER and Number.MAX_VALUE.
JavaScript
1
star
45

flutter-learning

Dart
1
star
46

oChat-server

Python
1
star
47

happy_wedding

Vue
1
star
48

injector

A Chrome extension for injecting custom stylesheet to any website.
JavaScript
1
star
49

huya-tools

JavaScript
1
star
50

learning-vue-by-steps

JavaScript
1
star
51

lottie-converter

Export any frames of a lottie, convert lottie to APNG、GIF、MP4.
Vue
1
star
52

koa-learning

JavaScript
1
star
53

ts-learning

TypeScript
1
star