vue-ink
The flexible TypeScript Markdown editor that powers octo.app - packaged as a Vue 3 component. You can also check out the framework-agnostic package at writewithocto/ink.
Features
- [x] Dark and light themes
- [x] Hybrid plain-text Markdown rendering
- [x] Supports GitHub Flavored Markdown (an extension of CommonMark)
- [x] Syntax highlighting for many common languages (in code blocks)
- [x] Drag-and-drop or paste to upload files
- [x] Inline Markdown image previews
- [x] Configurable and stylable
- [x] An optional formatting toolbar (great for mobile)
- [x] Vim Mode
Install the package
# yarn
yarn add @writewithocto/vue-ink
# npm
npm install --save @writewithocto/vue-ink
How to get started
There are many ways to customize Ink to fit your needs. Here are a few examples to get you started.
Minimal setup
<template>
<Ink v-model="markdown" />
</template>
<script lang="ts" setup>
import Ink from '@writewithocto/vue-ink'
import { ref } from 'vue'
const markdown = ref('# Hello, World!')
</script>
Configuration options
The options
prop is an Ink.Options
object.
<template>
<input v-model="options.interface.appearance" type="radio" value="dark"> dark
<input v-model="options.interface.appearance" type="radio" value="light"> light
<Ink v-model="markdown" :options="options" />
</template>
<script lang="ts" setup>
import Ink from '@writewithocto/vue-ink'
import { reactive, ref } from 'vue'
const markdown = ref('# Hello, World!')
const options = reactive({
interface: {
appearance: 'dark',
},
})
</script>
Contributing
This library uses yarn
.
Install dependencies
yarn install
Compile and hot-reload for development
yarn dev
Compile for production
yarn build
Support
Your support is appreciated. Here are some ways you can help.
Tell us what you think
Your feedback is immensely important for building Ink into a library that we all love. Consider starting a discussion under Octo if you have a question or just want to chat about ideas!