vue-highlight-code v0.2.0

Highlight Code and Content editor for Vue.js

Import the npm package and only one prop to show highlightCode and editor

yarn add highlight.js vue-highlight-code

live demo

bitSandBox-demo（web-IDE部分模块的简单实现）

stackblitz

1. use in Vue3

Install the vue-highlight-code package from NPM and highlight.js:

yarn add highlight.js vue-highlight-code

import the component and style

import { HighCode } from 'vue-highlight-code';
import 'vue-highlight-code/dist/style.css';
export default {
    components: {
      HighCode
    },
}

<HighCode></HighCoder>

Component Props

emit

Get real-time editing code content

create ref in the HighCode component instance get the modelValue

<script setup>
const H = ref(null)
onMounted(() => {
  console.log(H.value.modelValue)
})
<script>
<HighCode ref="H" ></HighCode>