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

| prop | description | type | default | | :-------------- | :---------------------------------------------- | :-------- | :--------------------------------------- | | codeValue | Highlight Code Source | String | '' | | textEditor | CodeText Editor | Boolean | 'false' | | lang | Highlight Code Type | String | javascript (such as 'vue','html','css) | | theme | Component Highlight Code theme | String | default: dark(only ['dark','light']) | | codeLines | Show Code lines | Boolean | false | | langName | Highlight Code Name (Upper left corner display) | String | | | width | component style width | `String` | `620px` | | height | component style height | `String` | | | maxWidth | component style max-width | String | | | maxHight | component style max-height`String` | `String` | | | fontSize | highlight code font-size | String | - | | scrollStyleBool | component scroll bar style | Boolean | true | | copy | whether the code can copy | Boolean | true | | borderRadius | component style border_radius | String | 10px |

emit

| emit | description | type | parameter | | :----------- | :--------------------------------------------------------- | :--------- | :------------------------------------- | | getCodeValue | The emit method is triggered when the edit content changes | Function | function(contentValue: String): void |

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>