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-inkHow 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 installCompile and hot-reload for development
yarn devCompile for production
yarn buildSupport
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!