一个基于 vue 2.x
的轻量代码交互组件,在网页中可以编辑、运行并实时预览代码效果展示。
当阅读包含大量代码的文档时,很多项目文档通过 markdown loader
实现了示例代码的 render
展示,但它是静态的。当我们想调试代码时,一般需要打开本地 IDE 或者打开 codepen
, codesandbox
等在线编辑器网站,也会受制于电脑是否安装开发环境或者网络连接是否顺畅。
那么能不能有这么一个组件能支持在页面中编辑代码,在网页中可以编辑、运行并实时预览代码效果展示?
特别感谢组件 react-code-view,基于此编写了 vue 版本的组件!使用此组件在 vue
页面还是 markdown
文档中的多示例代码,都可以实时编辑运行代码、预览效果。
在线预览: https://andurils.github.io/vue-code-view/#/demo
codesandbox
示例: vue-code-view-example
<style>
解析渲染。Markdown
文件示例渲染。npm i vue-code-view
# or
yarn add vue-code-view
使用vue cli
需要在vue.config.js
文件进行配置,支持使用包含运行时编译器的 Vue 构建版本。
module.exports = {
runtimeCompiler: true,
// or
chainWebpack: (config) => {
config.resolve.alias
.set("vue$", "vue/dist/vue.esm.js");
},
};
入口文件 main.js
中引入组件,不需要手动引入样式。
import Vue from "vue";
import App from "./App.vue";
import CodeView from "vue-code-view";
Vue.use(CodeView);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
theme | 代码编辑器 theme mode,支持 light / dark | light | dark |
dark |
|
showCode | 是否显示代码编辑器 | boolean | false | |
source | 运行示例源码 | string | - | |
errorHandler | 错误处理函数 | function | - | |
debounceDelay | 错误处理防抖延迟(ms) | number | 300 | |
layout | render 视图布局 | top | right | left |
top |
0.4.0 |
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.