code-runs

一个代码在线编辑预览工具

Installation

npm i code-runs

项目主要技术

脚手架： Vue CLI

框架：Vue 3.4.21全家桶，通过script setup使用组合式API

代码编辑器：Monaco Editor

项目引用

在main.js中引用

import { createApp } from 'vue'
import App from './App.vue'
import codeRun from 'code-runs'
// import "code-runs/dist/style.css";
import '../node_modules/code-runs/dist/style.css' // 样式失效时查看相对路径
const app = createApp(App)
app.use(codeRun)
app.mount('#app')

在quasar项目中使用

创建文件coderun.ts src\boot\coderun.ts

import { boot } from 'quasar/wrappers'
import codeRun from 'code-runs'
import '../../node_modules/code-runs/dist/style.css' // 样式失效时查看相对路径
export default boot(({ app }) => {
  app.use(codeRun)
})
export { codeRun }

在quasar.config.js中配置

module.exports = configure(function (/* ctx */) {
  // 其他配置...
  boot: ['axios', 'boot', 'codeRun'],
  // 其他配置...
}

教程

<script setup>
import { ref } from 'vue'
const pageOption = ref({
  theme: 'vs-dark', // 要继承的基础主题，默认 'vs-dark''; 可选的三个：vs、vs-dark、hc-black
  fontSize: 20, // 编辑区域字体大小, 默认16
  content: '', // 初始化内容， 默认vue3模板
  minimap: false, // 是否显示缩略图， 默认关闭
  lineNumbers: 'off' // 是否显示行号， 默认开启
})
</script>

<template>
  <codeRun :pageOption="pageOption" />
</template>