@tslsmart/code-view

0.0.3 • Public • Published

Vue Code View(VCV)

Build Status GitHub license npm npm bundle size npm

English | 简体中文

A lightweight code interaction component based on vue 2.x, which can edit, run and preview the code effect display in real time on the web page.

When reading docs that contain a lot of code, many project docs implement a render representation of the sample code via the markdown loader, but it is static. When we want to debug code, we generally need to open the local IDE or open online editor websites such as codepen, codesandbox, and it is also subject to whether the computer has a development environment installed or whether the network connection is smooth.

So can there be such a component that can support editing code in the page, edit, run and preview the code effect display in real time in the web page?

Special thanks to the component react-code-view, based on which the vue version of the component was written! Using this component, you can edit the running code and preview the effect in real time by using the multi-sample code in the vue page or the markdown document.

Online Demo

示例

demo address: https://andurils.github.io/vue-code-view/#/demo

codesandbox example: vue-code-view-example

Features

  • 💻 Code can be edited online and preview the effect in real time.
  • 🎨 Support sample code highlighting, configure themes.
  • 🌈 Support <style> parsing and rendering.
  • 📑 Support Markdown file example rendering

📦 Install

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

🔨 Configure

Using vue cli requires configuration in the vue.config.js file, which supports the use of Vue builds that include the runtime compiler.

module.exports = {
  runtimeCompiler: true,
  // or
  chainWebpack: (config) => { 
    config.resolve.alias
      .set("vue$", "vue/dist/vue.esm.js");
  },
}; 

💻 Usage

Components are introduced in the entry file main.js, and there is no need to manually introduce styles.

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");

API

Attributes

参数 说明 类型 默认值 版本
themeMode code editor theme mode,default light `` | dark ``
showCode show the code editor , only layout value is top takes effect boolean false
source source code string -
layout render view layout top | right | left top 0.4.0

Changelog

Detailed changes for each release are documented in the release notes.

💡 Inspired

links.

License

VCV is licensed under the terms of the MIT License

Copyright (c) 2021-present Anduril

Package Sidebar

Install

npm i @tslsmart/code-view

Weekly Downloads

4

Version

0.0.3

License

MIT

Unpacked Size

1.63 MB

Total Files

8

Last publish

Collaborators

  • junex
  • leano_z
  • gin_black