Vue CodeMirror 是一個基于 Vue.js 的代碼編輯器組件。它提供了豐富的編輯功能，例如代碼著色、代碼折疊、括號匹配等功能，使你更容易編寫代碼。

// 安裝 Vue CodeMirror
npm install vue-codemirror --save
// 引入組件
import Vue from 'vue'
import VueCodeMirror from 'vue-codemirror'
// 使用組件
Vue.use(VueCodeMirror)

Vue CodeMirror 的樣式可以自定義，你可以修改它的顏色、字體、大小等樣式屬性。修改樣式的方法有很多種，以下是其中一種方法。

// 引入 CSS 文件
import 'codemirror/lib/codemirror.css'
// 修改樣式
.CodeMirror {
font-size: 16px;
font-weight: bold;
background-color: #f7f7f7;
}

你也可以通過自定義主題文件來修改樣式。主題是一個 .css 文件，包含了編輯器的所有樣式。你可以在主題文件中修改顏色、字體、大小等樣式屬性。以下是一個自定義主題文件的示例。

.cm-s-mytheme .CodeMirror {
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
line-height: 1.5;
background-color: #f5f5f5;
}
.cm-s-mytheme .CodeMirror-gutters {
background-color: #f5f5f5;
border-right: 1px solid #ddd;
}
.cm-s-mytheme .CodeMirror-linenumber {
color: #999;
}

使用主題文件時，你需要將主題文件引入到項目中，并將主題名稱傳入組件的 theme 屬性中。

// 引入主題文件
import 'codemirror/theme/mytheme.css'
// 使用主題

以上是關于 Vue CodeMirror 樣式的介紹，希望能夠幫助到大家，加快你的開發效率。