@writewithocto/vue-ink NPM

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.

npm.io

Features

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

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!