From 9ba549f965885f0c14a493e8a224860ee48f5aa5 Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Mon, 18 Mar 2024 20:25:41 +0800 Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E6=9B=B4=E6=96=B0=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=E5=AF=8C=E6=96=87=E6=9C=AC=E5=86=85=E6=8F=92=E5=85=A5?= =?UTF-8?q?=E7=9A=84=E4=BB=A3=E7=A0=81=E5=9D=97=E7=9A=84=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 3 + src/common/rawitem/rawitem.scss | 118 ++++++++++++++++++++++++++++++++ src/common/rawitem/rawitem.tsx | 17 ++++- src/shims-vue.d.ts | 1 + 5 files changed, 139 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 3b1493e97..4a6633a4a 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "monaco-editor": "^0.45.0", "nprogress": "^0.2.0", "pinia": "^2.1.7", + "prismjs": "^1.29.0", "pluralize": "^8.0.0", "qs": "^6.11.2", "qx-util": "^0.4.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 32988a378..be6854287 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -86,6 +86,9 @@ dependencies: pluralize: specifier: ^8.0.0 version: 8.0.0 + prismjs: + specifier: ^1.29.0 + version: 1.29.0 qs: specifier: ^6.11.2 version: 6.11.2 diff --git a/src/common/rawitem/rawitem.scss b/src/common/rawitem/rawitem.scss index 89c95d9fb..e2906934e 100644 --- a/src/common/rawitem/rawitem.scss +++ b/src/common/rawitem/rawitem.scss @@ -9,3 +9,121 @@ height: 100%; } } + +// 此处控制富文本代码块的样式 + +pre > code { + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + hyphens: none; + line-height: 1.5; + color: black; + text-align: left; + text-shadow: 0 1px white; + word-break: normal; + word-wrap: normal; + tab-size: 4; + white-space: pre; + background: none; + word-spacing: normal; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +// /* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + white-space: normal; + border-radius: .3em; +} + + +pre > code .token.comment, +pre > code .token.prolog, +pre > code .token.doctype, +pre > code .token.cdata { + color: slategray; +} + +pre > code .token.punctuation { + color: #999; +} + +pre > code .token.namespace { + opacity: 0.7; +} + +pre > code .token.property, +pre > code .token.tag, +pre > code .token.boolean, +pre > code .token.number, +pre > code .token.constant, +pre > code .token.symbol, +pre > code .token.deleted { + color: #905; +} + +pre > code .token.selector, +pre > code .token.attr-name, +pre > code .token.string, +pre > code .token.char, +pre > code .token.builtin, +pre > code .token.inserted { + color: #690; +} + +pre > code .token.operator, +pre > code .token.entity, +pre > code .token.url, +pre > code .language-css .token.string, +pre > code .style .token.string { + color: #9a6e3a; +} + +pre > code .token.atrule, +pre > code .token.attr-value, +pre > code .token.keyword { + color: #07a; +} + +pre > code .token.function, +pre > code .token.class-name { + color: #DD4A68; +} + +pre > code .token.regex, +pre > code .token.important, +pre > code .token.variable { + color: #e90; +} + +pre > code .token.important, +pre > code .token.bold { + font-weight: bold; +} + +pre > code .token.italic { + font-style: italic; +} + +pre > code .token.entity { + cursor: help; +} + diff --git a/src/common/rawitem/rawitem.tsx b/src/common/rawitem/rawitem.tsx index 16f9fba6f..8fe857cf9 100644 --- a/src/common/rawitem/rawitem.tsx +++ b/src/common/rawitem/rawitem.tsx @@ -1,5 +1,5 @@ import { useNamespace } from '@ibiz-template/vue3-util'; -import { defineComponent, PropType, Ref, ref, watch } from 'vue'; +import { defineComponent, nextTick, PropType, Ref, ref, watch } from 'vue'; import { createUUID } from 'qx-util'; import { IHtmlItem, @@ -7,6 +7,7 @@ import { IRawItemContainer, ITextItem, } from '@ibiz/model-core'; +import Prism from 'prismjs'; import './rawitem.scss'; export const IBizRawItem = defineComponent({ @@ -169,6 +170,17 @@ export const IBizRawItem = defineComponent({ } }; + + /** + * @description 解析格式化代码块 + * @author 姜林君 + * @date 2024/03/14 15:03:03 + */ + const parseCodeBlock = async () => { + await nextTick(); + Prism.highlightAll(); // 切换更新内容则重新调用这个方法 + }; + convertValue(); watch( @@ -177,6 +189,9 @@ export const IBizRawItem = defineComponent({ if (newVal !== oldVal) { rawItemContent.value = newVal as string | number; convertValue(); + if (rawItemType.value === 'HTML') { + parseCodeBlock() + } } }, { diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts index 0ce62c39b..27d7a0dd7 100644 --- a/src/shims-vue.d.ts +++ b/src/shims-vue.d.ts @@ -7,3 +7,4 @@ declare module '*.vue' { declare module 'element-plus/dist/locale/zh-cn.mjs'; declare module '@ibiz-template-plugin/gantt'; +declare module 'prismjs'; -- Gitee