# @writewithocto/vue-ink

> The flexible TypeScript Markdown editor that powers https://octo.app - packaged as a Vue component.

Latest version **0.7.0** (published 2022-05-23) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @writewithocto/vue-ink
pnpm add @writewithocto/vue-ink
yarn add @writewithocto/vue-ink
bun add @writewithocto/vue-ink
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2022-05-23 |
| First published | 2021-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | voraciousdev |
| Keywords | codemirror, component, easymde, javascript, js, markdown, mde, octo, sfc, simplemde, ts, typescript, vue, vue3 |

## Links

- npm: https://www.npmjs.com/package/@writewithocto/vue-ink
- npm.io page: https://npm.io/package/@writewithocto/vue-ink

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.7.0 (latest) — 2022-05-23
- 0.6.5 — 2022-04-01
- 0.6.4 — 2022-03-31
- 0.6.3 — 2022-03-31
- 0.6.2 — 2022-03-21
- 0.6.0 — 2022-03-20
- 0.5.3 — 2022-02-12
- 0.5.2 — 2021-09-29
- 0.5.1 — 2021-09-17
- 0.5.0 — 2021-09-03
- 0.4.2 — 2021-08-25
- 0.4.1 — 2021-08-23
- 0.4.0 — 2021-08-21

## README

[![latest tag](https://img.shields.io/github/v/tag/writewithocto/vue-ink?color=blue&label=latest%20tag&sort=semver)](https://github.com/writewithocto/vue-ink/releases)
[![license](https://img.shields.io/github/license/writewithocto/vue-ink)](https://github.com/writewithocto/vue-ink/blob/master/LICENSE)
[![open issues](https://img.shields.io/github/issues-raw/writewithocto/vue-ink)](https://github.com/writewithocto/vue-ink/issues)

# vue-ink

The flexible TypeScript Markdown editor that powers [octo.app](https://octo.app) - packaged as a Vue 3 component. You can also check out the framework-agnostic package at [writewithocto/ink](https://github.com/writewithocto/ink).

![](screenshot.png)

## Features

- [x] Dark and light themes
- [x] Hybrid plain-text Markdown rendering
- [x] Supports GitHub Flavored Markdown ([an extension of CommonMark](https://github.github.com/gfm/#what-is-github-flavored-markdown-))
- [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

```bash
# 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

```vue
<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`](https://github.com/writewithocto/ink) object.

```vue
<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

```shell
yarn install
```

### Compile and hot-reload for development

```shell
yarn dev
```

### Compile for production

```shell
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](https://github.com/writewithocto/octo/discussions) under [Octo](https://github.com/writewithocto/octo) if you have a question or just want to chat about ideas!

### Become a financial backer

- [GitHub Sponsors](https://github.com/sponsors/voraciousdev)
- [Patreon](https://patreon.com/voraciousdev)
- [Ko-Fi](https://ko-fi.com/voraciousdev)
- [Buy Me a Coffee](https://www.buymeacoffee.com/voraciousdev)

---
_Source: https://npm.io/package/@writewithocto/vue-ink · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._