mirror of
https://github.com/certd/certd.git
synced 2026-05-15 04:27:31 +08:00
Merge branch 'client_sync' into v2
# Conflicts: # packages/ui/certd-client/CHANGELOG.md # packages/ui/certd-client/package.json # packages/ui/certd-client/src/api/tools.ts # packages/ui/certd-client/src/components/index.ts # packages/ui/certd-client/src/main.ts # packages/ui/certd-client/src/plugin/fast-crud/index.tsx # packages/ui/certd-client/src/plugin/index.ts # packages/ui/certd-client/src/router/source/framework.ts # packages/ui/certd-client/src/store/modules/page.ts # packages/ui/certd-client/src/style/common.less # packages/ui/certd-client/src/utils/util.env.ts # packages/ui/certd-client/src/views/crud/form/independent/index.vue # packages/ui/certd-client/src/views/framework/register/index.vue # packages/ui/certd-client/vite.config.ts
This commit is contained in:
@@ -1,15 +1,18 @@
|
||||
<template>
|
||||
<pre class="fs-highlight hljs" v-html="highlightHTML"></pre>
|
||||
<pre class="fs-highlight hljs" v-html="highlightHTMLRef"></pre>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
// 相关文档
|
||||
// https://highlightjs.org/usage/
|
||||
// http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
|
||||
import highlight from "highlight.js";
|
||||
import { ref, watch } from "vue";
|
||||
import { defineComponent, Ref } from "vue";
|
||||
import "../highlight-styles/github-gist.css";
|
||||
import htmlFormat from "./libs/htmlFormat";
|
||||
export default {
|
||||
//@ts-ignore
|
||||
import htmlFormat from "./libs/htmlFormat.js";
|
||||
export default defineComponent({
|
||||
name: "FsHighlight",
|
||||
props: {
|
||||
code: {
|
||||
@@ -28,34 +31,31 @@ export default {
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
setup(props: any, ctx: any) {
|
||||
const highlightHTMLRef: Ref = ref("");
|
||||
|
||||
watch(
|
||||
() => {
|
||||
return props.code;
|
||||
},
|
||||
() => {
|
||||
doHighlight();
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
function doHighlight() {
|
||||
const code = props.formatHtml ? htmlFormat(props.code) : props.code;
|
||||
highlightHTMLRef.value = (highlight as any).highlightAuto(code, [props.lang, "html", "javascript", "json", "css", "scss", "less"]).value;
|
||||
}
|
||||
return {
|
||||
highlightHTML: ""
|
||||
highlightHTMLRef,
|
||||
doHighlight
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
code() {
|
||||
this.highlight();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.highlight();
|
||||
},
|
||||
methods: {
|
||||
highlight() {
|
||||
const code = this.formatHtml ? htmlFormat(this.code) : this.code;
|
||||
this.highlightHTML = highlight.highlightAuto(code, [
|
||||
this.lang,
|
||||
"html",
|
||||
"javascript",
|
||||
"json",
|
||||
"css",
|
||||
"scss",
|
||||
"less"
|
||||
]).value;
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
Reference in New Issue
Block a user