Notice: This project has been merged into the upstream writewithocto/ink package. Please use that package instead.
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.
- Dark and light themes
- Hybrid plain-text Markdown rendering
- Supports GitHub Flavored Markdown (an extension of CommonMark)
- Syntax highlighting for many common languages (in code blocks)
- Drag-and-drop or paste to upload files
- Inline Markdown image previews
- Configurable and stylable
- An optional formatting toolbar (great for mobile)
- Vim Mode
# yarn
yarn add @writewithocto/vue-ink
# npm
npm install --save @writewithocto/vue-inkThere are many ways to customize Ink to fit your needs. Here are a few examples to get you started.
<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>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>This library uses yarn.
yarn installyarn devyarn buildYour support is appreciated. Here are some ways you can help.
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!