将语法突出显示添加到svelte中的输入

<script>
  import { onMount } from 'svelte';

  let code = '';

  onMount(() => {
    import('codemirror/mode/javascript/javascript'); // 导入JavaScript语法模式
    import('codemirror/lib/codemirror.css'); // 导入CodeMirror样式

    const editor = CodeMirror.fromTextArea($refs.textarea, {
      mode: 'javascript', // 设置语法模式
      theme: 'default', // 设置主题
      lineNumbers: true, // 显示行号
      autofocus: true, // 自动聚焦
    });

    editor.on('change', () => {
      code = editor.getValue(); // 更新输入框的值
    });
  });
</script>

<style>
  .editor {
    height: 300px;
  }
</style>

<div class="editor">
  <textarea bind:this={$refs.textarea}></textarea>
</div>

<p>输入的代码：{code}</p>