react-highlight-code-demo
v0.1.0
Published
Import the npm package and only one prop to show highlightCode and editor
Downloads
2
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>