Code
When To Use
When it is necessary to display text and the text content is code, use this component to provide code highlighting, line number, copy
Examples
<template>
<h-code :code="textInput" lang="TYPESCRIPT" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textInput = ref(`function likeUserAgent(str: string): boolean {
return (
str.includes('Mozilla') ||
str.includes('Opera') ||
str.includes('Dalvik') ||
str.includes('AppleTV') ||
str.includes('Windows') ||
str.includes('Mac') ||
str.includes('Linux') ||
str.includes('Android') ||
str.includes('Chromium') ||
str.includes('Electron') ||
str.includes('Gecko')
);
}
export function isUserAgent(value) {
return likeUserAgent(value);
}`);
</script>
API
Props
| Property | Description | Type | default |
|---|---|---|---|
| code | Show a reproducible code snippet | string | |
| lang | Programming language, letters must be all uppercase | CodeEditorLanguagesUnio |