Editable Vue Code Component with Syntax Highlight using Prism.js (global)

editable.js

import { computed, ref, createElement as h } from "/vue.js";

export default {
  props: {
    lang: { type: String, default: "js" },
    content: { type: String, default: "your code..." }
  },
  setup(props, { emit, refs }) {
    const content = ref(props.content);
    const highlighted = computed(() =>
      Prism.highlight(props.content, Prism.languages[props.lang])
    );

    return () =>
      h("div", { style: { position: "relative" } }, [
        h("pre", {
          ref: "element",
          style: { position: "absolute", "pointer-events": "none", inset: 0, margin: 0 },
          domProps: { innerHTML: highlighted.value }
        }),
        h(
          "pre",
          {
            ref: "element",
            style: { opacity: 1, margin: 0 },
            attrs: { contenteditable: true, tabindex: 0 },
            on: {
              input: event => emit("update:content", event.target.innerText)
            }
          },
          content.value
        )
      ]);
  }
};