React-highlight-code-vue NPM

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

NXGUK Z% L$P EQCLJZ6TZY

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>

highlight vue3 component vue highlight.js

highlight.js vue vue-virtual-list-observer vue3-highlight-code vue-highlight-code vue-highlight-code-plus

react-highlight-code-demo react-highlight-code-demo1

0.2.0

1 year ago

0.1.0

1 year ago