参考官网地址:https://www.npmjs.com/package/vue-codemirror

<script setup lang="ts">
import { ref } from "vue";
import { Codemirror } from "vue-codemirror";
import { oneDark } from "@codemirror/theme-one-dark";
import { yaml } from "@codemirror/lang-yaml";

const code = ref("");
const extensions = [yaml(), oneDark];

</script>

<template>
  <div>
    <codemirror
      v-model="code"
      placeholder="Code goes here..."
      :style="{ width: '1000px', height: '400px' }"
      :autofocus="true"
      :indent-with-tab="true"
      :tab-size="2"
      :extensions="extensions"
    />
  </div>
 </template>
Logo

一站式 AI 云服务平台

更多推荐