vue-highlight-code
v0.2.0
Published
Import the npm package and only one prop to show highlightCode and editor
Downloads
2,989
Maintainers
Readme
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部分模块的简单实现)
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>