Markdown source highlighting

<textarea id="source"># Hello **world**</textarea>

import { createMdInk } from 'md-ink'
const md = createMdInk(document.querySelector('#source'))

// After script value changes: md.update()
// On teardown: md.destroy()

HTML + JavaScript

import { useState } from 'react'
import { useMdInk } from 'md-ink/react'

export default function Editor() {
  const [source, setSource] = useState('# Hello **world**')
  const ref = useMdInk<HTMLTextAreaElement>()
  return <textarea ref={ref} value={source}
    onChange={e => setSource(e.target.value)} />
}

React ≥18 · TSX · updates and cleanup handled by the hook.

<script setup>
import { ref } from 'vue'
import { vMdInk } from 'md-ink/vue'
const source = ref('# Hello **world**')
</script>

<template>
  <textarea v-md-ink v-model="source" />
</template>

Vue ≥3 · updates and cleanup handled by the directive.

<script>
  import { mdInk } from 'md-ink/svelte'
  let source = $state('# Hello **world**');
</script>

<textarea use:mdInk={source}
  bind:value={source}></textarea>

Svelte ≥5 · source is a refresh token; cleanup is automatic.