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

1import { HighCode } from 'vue-highlight-code';
2import 'vue-highlight-code/dist/style.css';
3export default {
4    components: {
5      HighCode
6    },
7}
8
9<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-heightString	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

1<script setup>
2const H = ref(null)
3onMounted(() => {
4  console.log(H.value.modelValue)
5})
6<script>
7<HighCode ref="H" ></HighCode>
8