组件简介

vue-code-view是一个基于 vue 2.x、轻量级的代码交互组件,在网页中实时编辑运行代码、预览效果的代码交互组件。

使用此组件, 不论 vue 页面还是 Markdown 文档中的示例代码,效果如下:

组件的由来

当项目中页面或者 Markdown 文档包含大量代码时,使用 highlight.js 进行代码高亮后极大的增大了阅读性,但是当我们阅读时想要对当前代码进行编辑调试时,只能打开本地开发环境或者跳转至 codepen codesandbox等在线项目示例。即使是很简单的代码示例仍然避免不了上述场景的繁琐步骤!如果遇到网络不好,或者本地开发环境没有安装配置的情况,那就很遗憾了!

目前大多开源项目的 Markdown 文档示例大多支持了示例代码的实时渲染,可以在文档页面中看到源码的运行效果,提供了在线项目的跳转功能。当需要调试代码时,还是需要重复上述步骤,体验不是太友好。

那么能不能有这么一个组件能支持在页面中编辑代码,实时运行预览效果?在网络找了好久,没有找到 vue 版本,只看到了 react-code-view,受其启发,自已编写了一个 vue 版本组件 vue-code-view

组件功能

目前组件已实现的主要功能特性:

  • 代码可以在线编辑,实时预览效果。
  • 代码编辑器支持代码高亮、光标行背景高亮、括号/标签匹配自动关闭、代码折叠。
  • 基于vue的 SFC 解析,支持 <template> <script> <style>代码逻辑。
  • 支持<style> CSS 预处理,目前实现sass
  • 支持 Markdown 示例实时渲染,需要自定义 loader 。

组件props

参数 说明 类型 默认值
theme theme mode,支持 light / dark light | dark dark
showCode 是否显示代码编辑器 boolean false
source 示例代码 string -
renderToolbar 自定义工具栏展示 function -
errorHandler 错误处理函数 function -
debounceDelay 错误处理防抖延迟(ms) number 300

项目资源列表

使用示例

安装

使用 npmyarn 安装组件包。

npm i vue-code-view
# or
yarn add vue-code-view

Vue 配置

组件使用包含运行时编译器的 Vue 构建版本,所以需要单独配置下。

若使用 vue cli,需要在vue.config.js文件进行如下配置:

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";
import "vue-code-view/lib/vue-code-viewer.css";
...
Vue.use(CodeView);
...

组件使用

使用组件的source属性传入示例代码。

示例代码格式支持 <template> <script> <style><template>不能为空;暂不支持JSX 语法。

<template>
<div id="app">
<code-viewer :source="code_example"></code-viewer>
</div>
</template>
<script>
const code_source = `
<template>
<div id="app">
<img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" />
<h1>Welcome to Vue.js {{version}} !</h1>
</div>
</template>
<script>
export default {
data() {
return {
version: '2.x'
};
},
};
<\/script> <style>
.logo {
width:66px;
}
</style> `, export default {
data() {
return {
code_example: code_source
};
},
};
</script>

JSX使用方式

组件 JSX 语法使用方式。

<script>
const code_example = `<template>
<div id="app">
<img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" />
<h1>Welcome to Vue.js !</h1>
</div>
</template> `; export default {
name: "demo",
render() {
return (
<div >
<code-viewer source={code_example}
showCode={false}
></code-viewer>
</div>
);
},
};
</script>

组件库混合使用

项目引入其他组件库后,组件的示例源代码中直接使用即可,实现预览调试功能。

错误处理

组件内置了错误预处理,目前支持代码为空、代码格式错误(<template>内容不存在)等,以文字的形式显示在示例区域,也提供了自定义错误方式 errorHandler(使用 Notice 组件进行信息告知)。

render() {
return (
<div >
<code-viewer
source={code_example}
showCode={false}
errorHandler={(errorMsg) => {
this.$notify.error({
title: "Info",
message: errorMsg,
});
}}
></code-viewer>
</div>
)
}

示例使用了antd vuenotify组件进行消息提醒,效果如下:

示例效果

具体示例效果详见 组件Markdown说明文档

其他

后续功能持续迭代中!激情期待。

[个人开源]vue-code-view:一个在线编辑、实时预览的代码交互组件的更多相关文章

  1. 使用Sublime Text 3进行Markdown编辑+实时预览

    使用Sublime Text 3进行Markdown编辑+实时预览 安装软件包管理器 打开Sublime Text 3 同时按下 ctrl+` ,窗口底部出现一个小控制台 复制以下代码,粘贴到控制台的 ...

  2. 使用Sublime Text 3进行Markdown 编辑+实时预览

    这种做法可能会对你的磁盘IO造成一小部分性能负担,但负面影响足以忽略. 另外,由于这种频率的读写会被磁盘缓存接管,不必担心磁盘寿命的影响. 对于刚安装好的Sublime Text,我们需要安装一个软件 ...

  3. Markdown在线编辑及预览

    推荐一款不错的Markdown语法手册,最可贵的是支持在线编辑预览: Cmd Markdown简介 Cmd Markdown语法手册及在线编辑 补充一些使用技巧: MarkDown实现段首缩进:「Ma ...

  4. 一个支持实时预览的在线 Markdown 编辑器 - Markdoc

    最近组内需要为一些项目和系统写文档,发表在公司内的文档平台上,这个平台并不支持markdown,所以打算做一个在线markdown编辑器,支持实时预览,并且可以很容易的迁移发表到公司文档平台上,所以就 ...

  5. Sublime下MarkDown插件实现编辑和实时预览并转换成HTML格式

    最近在使用markdown做笔记,编辑器Sublime Text3用起来很轻巧,现在让他支持markdown的语法并且可以实时预览. 安装准备——安装Package Control Package C ...

  6. 1小时搞定vuepress快速制作vue文档/博客+免费部署预览

    先来一下演示效果.和vue的官方文档几乎是一致的,页面内容都可自定义. 此教程部署后的效果预览. 在你跟着教程搭建好项目之后,你会收获: 快速搭建一个文档/博客,后期只需要修改markdown内容和导 ...

  7. 在线文档预览方案-office web apps续篇

    上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情. 阅读 ...

  8. 在线文档预览方案-office web apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

  9. [转载]在线文档预览方案-Office Web Apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

随机推荐

  1. scrapy各种持久化存储的奇淫技巧

    理论 磁盘文件: 基于终端指令 1)保证parse方法返回一个可迭代类型的对象(存储解析到的页面内容) 2)使用终端指令完成数据存储到指定磁盘文件中的操作,如:scrapy crawl 爬虫文件名称 ...

  2. 基于pgpool搭建postgresql集群

    postgresql集群搭建 基于pgpool中间件实现postgresql一主多从集群部署,这里用两台服务器作一主一从示例 虚拟机名 IP 主从划分 THApps 192.168.1.31 主节点 ...

  3. 集合转数组:toArray()最优化方法探索

    优化背景 有些场景下(比如入参要求)需要将集合(比如List)转为数组类型,利用集合的toArray方法应该最为方便的,对于toArray()无参方法其返回的是Object[],强制转其他类型数组会C ...

  4. gin 源码阅读(2) - http请求是如何流入gin的?

    推荐阅读: gin 源码阅读(1) - gin 与 net/http 的关系 本篇文章是 gin 源码分析系列的第二篇,这篇文章我们主要弄清一个问题:一个请求通过 net/http 的 socket ...

  5. win10环境charles抓包unknow问题

    win10环境,charles已经安装了证书,但是抓包的时候还是unknow,让人头疼. 1.确保证书安装成功. 2.检查charles设置是否正确. 进入Charles - > Proxy - ...

  6. [源码解析] PyTorch 流水线并行实现 (3)--切分数据和运行时系统

    [源码解析] PyTorch 流水线并行实现 (3)--切分数据和运行时系统 目录 [源码解析] PyTorch 流水线并行实现 (3)--切分数据和运行时系统 0x00 摘要 0x01 分割小批次 ...

  7. Jetbrains CLion 安装与激活 详解

    1. 下载与安装 1.1 下载 这里提供了三个操作系统的官网下载地址 Mac Windows Linux 进入页面后向下拉点击蓝色按钮即可下载. 1.2 安装 这里将用 MacOS 来进行示例,Win ...

  8. MySQL技术专题(X)该换换你的数据库版本了,让我们一同迎接8.0的到来哦!(初探篇)

    前提背景 MySQL关是一种关系数据库管理系统,所使用的 SQL 语言是用于访问数据库的最常用的标准化语言,其特点为体积小.速度快.总体拥有成本低,尤其是开放源码这一特点,在 Web应用方面 MySQ ...

  9. HTML基本标记

    头部标记 <head></head> 说明:元素的作用范围是整篇文档.元素中可以有元信息定义.文档样式表定义和脚本等信息,定义在HTML语言头部的内容往往不会在网页上直接显示. ...

  10. display:none、visibility:hidden,opacity:0三者区别

    1. display:none 设置display:none,让这个元素消失 消失不占据原本任何位置 连带子元素一起消失 元素显示:display:block 2. visibility:hidden ...