vue-highlight-code-plus

Import the npm package and only one prop to show highlightCode and editor
14,059
vue vue3 component highlight highlight.js
Install
npm install vue-highlight-code-plus
Latest Version:0.2.0
Vue:3
License:MIT
Last Updated:Mar 6, 2024
Links: GitHub  ·  npm
Maintainer: fanyyyyy

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>

Related Packages

vue-highlightjs

Syntax highlighting with highlight.js for Vue.js 2.x

445,320 336
highlight highlight.js vue syntax vuejs
vue-highlight-code

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

33,884 25
component highlight highlight.js vue vue3
react-highlight-code-vue

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

14,060 1
component highlight highlight.js vue vue3
vue-highlight.js

Highlight.js syntax highlighter component for Vue.

60,107 207
highlight highlight.js vue syntax vue-component vuejs
vue-hljs-with-line-number

Syntax highlighting with highlight.js for Vue.js 2.x

811
highlight highlight.js vue line-number syntax vuejs

Version History

Version Released Vue License
0.2.0 ^3.2.25 MIT
0.1.0 ^3.2.25 MIT