高亮问题

[wqiucheng]

trafficstars

作者你好，感谢你的项目，我想请教一个问题。为什么首行没有选中也会高亮？（和我这里的placeholder没啥关系，去掉也是这样）？谢谢

[rennzhang]

为什么？

因为这个插件内置了一些配置，比如： https://github.com/rennzhang/codemirror-editor-vue3/blob/5a12e43cd5bef7cf65c93ab91385f599bf4629d3/packages/src/components/index.vue#L40 https://github.com/rennzhang/codemirror-editor-vue3/blob/5a12e43cd5bef7cf65c93ab91385f599bf4629d3/packages/src/config/index.ts#L64 这些配置允许选中行高亮，并且第一行会高亮（这是 codemirror5 的默认行为）

如果你不想要选中行高亮，可以关掉他, 将 options 中 styleActiveLine 修改为 false：

const cmOptions = {
  mode: "javascript",
  lineNumbers: true,
  highlightDifferences: true,
  lineWiseCopyCut: true,
  styleActiveLine: false ,
};

或者，你需要高亮，但不希望默认选中第一行，这是一个可行的方案：

在获得焦点/失焦时设置 styleActiveLine 属性

<template>
  <Codemirror
    :options="cmOptions"
    :height="100"
    :width="500"
    class="cm-component"
    v-model:value="code"
    :border="true"
    ref="codemirrorRef"
    @blur="onBlur"
    @focus="onFocus"
  />
</template>
<script lang="ts" setup>
import { ref, defineComponent } from "vue";
import { Editor, EditorSelectionChange } from "codemirror";
import Codemirror, { CmComponentRef } from "codemirror-editor-vue3";
// language
import "codemirror/mode/javascript/javascript.js";

// theme
// import "codemirror/theme/";

const code = ref(`function findSequence(goal) {
  function find(start, history) {
    if (start == goal)
      return history;
    else if (start > goal)
      return null;
    else
      return find(start + 5, "(" + history + " + 5)") ||
             find(start * 3, "(" + history + " * 3)");
  }
  return find(1, "1");
}`);

const codemirrorRef = ref<CmComponentRef>(null);
const cmOptions = {
  mode: "javascript",
  lineNumbers: true,
  highlightDifferences: true,
  lineWiseCopyCut: true,
  styleActiveLine: false
};

const onBlur = (cm: Editor) => {
  cm.setOption("styleActiveLine", false);
};

const onFocus = (cm: Editor) => {
  cm.setOption("styleActiveLine", true);
};

</script>
<style lang="less" scoped>
.cm-component {
  font-size: 13px;
  border-radius: none;
  font-family: monospace;
}
</style>