[個人開源]vue-code-view:一個線上編輯、實時預覽的程式碼互動元件

Anduril發表於2021-11-01
VueView元件

元件簡介

vue-code-view是一個基於 vue 2.x、輕量級的程式碼互動元件，在網頁中實時編輯執行程式碼、預覽效果的程式碼互動元件。

使用此元件, 不論 vue 頁面還是 Markdown 文件中的示例程式碼，效果如下：

vcv.gif

元件的由來

當專案中頁面或者 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

專案資源列表

使用示例

安裝

使用 npm 或 yarn 安裝元件包。

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>

元件庫混合使用

專案引入其他元件庫後，元件的示例原始碼中直接使用即可，實現預覽除錯功能。

image.png

錯誤處理

元件內建了錯誤預處理，目前支援程式碼為空、程式碼格式錯誤（<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 vue 的 notify元件進行訊息提醒，效果如下：

error.gif

示例效果

具體示例效果詳見 元件Markdown說明文件

其他

後續功能持續迭代中！激情期待。

相關文章