react-highlight-code-vue

0.2.0 • Public • Published

Highlight Code and Content editor for Vue.js

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

vue 3

Downloads Version Quality

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-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

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

Package Sidebar

Install

npm i react-highlight-code-vue

Weekly Downloads

87

Version

0.2.0

License

MIT

Unpacked Size

6.55 MB

Total Files

8

Last publish

Collaborators

  • xinrui003