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!
