vue3-ace-editor主题汇总

笔者正苦于给vue3-ace-editor换肤,这里汇总一下常见的主题及样式

  • ambiance
theme="ambiance"
import 'ace-builds/src-noconflict/theme-ambiance';

  • chaos
theme="chaos"
import 'ace-builds/src-noconflict/theme-chaos';

  • chrome
theme="chrome"
import 'ace-builds/src-noconflict/theme-chrome';

  • clouds
theme="clouds"
import 'ace-builds/src-noconflict/theme-clouds';

  • clouds_midnight
theme="clouds_midnight"
import 'ace-builds/src-noconflict/theme-clouds_midnight';

  • cobalt
theme="cobalt"
import 'ace-builds/src-noconflict/theme-cobalt';

  • crimson_editor
theme="crimson_editor"
import 'ace-builds/src-noconflict/theme-crimson_editor';

 

  • dawn
theme="dawn"
import 'ace-builds/src-noconflict/theme-dawn';

  • dracula
theme="dracula"
import 'ace-builds/src-noconflict/theme-dracula';

  • dreamweaver
theme="dreamweaver"
import 'ace-builds/src-noconflict/theme-dreamweaver';

  • eclipse
theme="eclipse"
import 'ace-builds/src-noconflict/theme-eclipse';

  • github
theme="github"
import 'ace-builds/src-noconflict/theme-github';

  • gob
theme="gob"
import 'ace-builds/src-noconflict/theme-gob';

  • gruvbox
theme="gruvbox"
import 'ace-builds/src-noconflict/theme-gruvbox';

  • idle_fingers
theme="idle_fingers"
import 'ace-builds/src-noconflict/theme-idle_fingers';

  • iplastic
theme="iplastic"
import 'ace-builds/src-noconflict/theme-iplastic';

  • katzenmilch
theme="katzenmilch"
import 'ace-builds/src-noconflict/theme-katzenmilch';

  • kr_theme
theme="kr_theme"
import 'ace-builds/src-noconflict/theme-kr_theme';

  • kuroir
theme="kuroir"
import 'ace-builds/src-noconflict/theme-kuroir';

  • merbivore
theme="merbivore"
import 'ace-builds/src-noconflict/theme-merbivore';

  • merbivore_soft
theme="merbivore_soft"
import 'ace-builds/src-noconflict/theme-merbivore_soft';

  • mono_industrial
theme="mono_industrial"
import 'ace-builds/src-noconflict/theme-mono_industrial';

  • monokai
theme="monokai"
import 'ace-builds/src-noconflict/theme-monokai';

  • pastel_on_dark
theme="pastel_on_dark"
import 'ace-builds/src-noconflict/theme-pastel_on_dark';

  • solarized_dark
theme="solarized_dark"
import 'ace-builds/src-noconflict/theme-solarized_dark';

  • solarized_light
theme="solarized_light"
import 'ace-builds/src-noconflict/theme-solarized_light';

  • sqlserver
theme="sqlserver"
import 'ace-builds/src-noconflict/theme-sqlserver';

  • terminal
theme="terminal"
import 'ace-builds/src-noconflict/theme-terminal';

  • textmate
theme="textmate"
import 'ace-builds/src-noconflict/theme-textmate';

  • tomorrow
theme="tomorrow"
import 'ace-builds/src-noconflict/theme-tomorrow';

  • tomorrow_night
theme="tomorrow_night"
import 'ace-builds/src-noconflict/theme-tomorrow_night';

 

  • tomorrow_night_blue
theme="tomorrow_night_blue"
import 'ace-builds/src-noconflict/theme-tomorrow_night_blue';

  • tomorrow_night_bright
theme="tomorrow_night_bright"
import 'ace-builds/src-noconflict/theme-tomorrow_night_bright';

  • tomorrow_night_eighties
theme="tomorrow_night_eighties"
import 'ace-builds/src-noconflict/theme-tomorrow_night_eighties';

  • twilight
theme="twilight"
import 'ace-builds/src-noconflict/theme-twilight';

  • vibrant_ink
theme="vibrant_ink"
import 'ace-builds/src-noconflict/theme-vibrant_ink';

 

  • xcode
theme="xcode"
import 'ace-builds/src-noconflict/theme-xcode';

### 在 Vue 3 中使用 `vue3-ace-editor` 实现 XML 文件的语法高亮展示 为了在 Vue 3 项目中集成并配置 `vue3-ace-editor` 来显示带有语法高亮功能的 XML 文件,需遵循以下说明。 #### 安装依赖包 首先,在命令行工具里执行 npm 或 yarn 命令来安装必要的库: ```bash npm install vue3-ace-editor ace-builds ``` 或者如果偏好使用 Yarn: ```bash yarn add vue3-ace-editor ace-builds ``` #### 配置 main.js 文件 接着,在项目的入口文件 `main.js` 中注册全局组件以及加载样式表[^1]: ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; // 导入 vue3-ace-editor 和对应的 CSS 样式 import V3AceEditor from "vue3-ace-editor"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/mode-xml"; const app = createApp(App); app.use(V3AceEditor); app.mount(&#39;#app&#39;); ``` #### 使用 Ace Editor 组件 最后一步是在模板内声明 `<V3AceEditor>` 组件,并设置其属性以便正确渲染 XML 文本。下面是一个简单的例子,展示了如何定义一个具有特定主题和模式(即针对 XML 的语法着色)的编辑器实例[^4]: ```html <template> <div class="editor-container"> <!-- 设置 editorProps, mode (用于指定语言), theme --> <V3AceEditor v-model:value="content" :mode="&#39;xml&#39;" :theme="&#39;github&#39;" /> </div> </template> <script setup lang="ts"> import { ref } from &#39;vue&#39; let content = ref(`<?xml version="1.0"?> <!-- 这是一段示例 XML 数据 --> <Bookstore> <Book category="COOKING"> <Title>Everyday Italian</Title> <Author>Giada De Laurentiis</Author> <Year>2005</Year> <Price>30.00</Price> </Book> </Bookstore>`) </script> <style scoped> .editor-container { width: 100%; height: 60vh; } </style> ``` 通过上述操作,可以在 Vue 3 应用程序中成功嵌入具备 XML 语法高亮特性的 ACE 编辑器。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值