uni-ai-msg.vue

<template>
	<view class="rich-text-box">
		<rich-text v-if="nodes&&nodes.length" space="nbsp" :nodes="nodes"></rich-text>
	</view>
</template>

<script>
	import parseHtml from './html-parser.js';
	const MarkdownIt = require('markdown-it')
	const hljs = require('highlight.js')
	const md = new MarkdownIt({
		html: false,
		highlight: function(str, lang) {
			if (lang && hljs.getLanguage(lang)) {
				try {
					return `<pre class="hljs"><code>${hljs.highlight(lang, str, true).value}</code></pre>`
				} catch (__) {}
			}
			return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
		}
	})
	export default {
		name: "msg",
		data() {
			return {

			};
		},
		props: {
			md: {
				type: String,
				default () {
					return '# H1 \r ```js' + '\r alert(1); \r```'
				}
			},
		},
		computed: {
			html() {
				// req.body.content 代表md代码
				return md.render(this.md)
			},
			nodes() {
				return parseHtml(this.html)
			}
		},
	}
</script>

<style lang="scss">
	@import "highlight.js/styles/agate.css";

	/* #ifndef APP-NVUE */
	.hljs code {
		padding: 5px;
		margin: 5px 0;
		display: flex;
	}

	/* #endif */
</style>