vue 代码高亮

纯纯记录下写的这个高亮组件

import hljs from 'highlight.js/lib/core';
import { MUtils } from 'admin-library';

import 'highlight.js/styles/base16/google-dark.min.css';

import 'highlight.js/lib/common';
import javascript from 'highlight.js/lib/languages/javascript';
import xml from 'highlight.js/lib/languages/xml';
import sql from 'highlight.js/lib/languages/sql';
import java from 'highlight.js/lib/languages/java';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('java', java);
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('sql', sql);

const escapeHtml = MUtils.htmlEscape;

const Highlight = defineComponent({
	name: 'High-light',
	props: {
		code: {
			type: String,
			required: true
		},
		language: {
			type: String,
			default: ''
		},
		autodetect: {
			type: Boolean,
			default: true
		},
		ignoreIllegals: {
			type: Boolean,
			default: true
		}
	},
	setup(props) {
		const language = ref(props.language);
		watch(
			() => props.language,
			newLanguage => {
				language.value = newLanguage;
			}
		);

		const autodetect = computed(() => props.autodetect || !language.value);
		const cannotDetectLanguage = computed(() => !autodetect.value && !hljs.getLanguage(language.value));

		const className = computed((): string => {
			if (cannotDetectLanguage.value) {
				return '';
			} else {
				return `hljs ${language.value}`;
			}
		});

		const highlightedCode = computed((): string => {
			// No idea what language to use, return raw code
			if (cannotDetectLanguage.value) {
				console.warn(`The language "${language.value}" you specified could not be found.`);
				return escapeHtml(props.code);
			}

			if (autodetect.value) {
				const result = hljs.highlightAuto(props.code);
				// eslint-disable-next-line vue/no-side-effects-in-computed-properties
				language.value = result.language ?? '';
				return result.value;
			} else {
				const result = hljs.highlight(props.code, {
					language: language.value,
					ignoreIllegals: props.ignoreIllegals
				});
				return result.value;
			}
		});

		return {
			className,
			highlightedCode
		};
	},
	render() {
		return h('pre', {}, [
			h('code', {
				class: this.className,
				innerHTML: this.highlightedCode
			})
		]);
	}
});

export default Highlight;

这里是html

<Highlight :code="errObj" language="xml" id="code" style="border-radius: 4px" />