Import the npm package and only one prop to show highlightCode and editor
yarn add highlight.js vue-highlight-code
bitSandBox-demo(web-IDE部分模块的简单实现)
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>
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 | description | type | parameter |
---|---|---|---|
getCodeValue | The emit method is triggered when the edit content changes | Function |
function(contentValue: String): void |
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>