@writewithocto/vue-ink

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

• 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!

Become a financial backer

• GitHub Sponsors
• Patreon
• Ko-Fi
• Buy Me a Coffee