diff --git a/package.json b/package.json
index 3b1493e97caea51d58cbf62b5a21c4a516137d5b..4a6633a4a55dee0bc5b06794aff2471bf2844a28 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 32988a378913402f11f5e8b93dcc421326eb94df..be685428734cd683c663baf8828cefb5b956bedc 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 89c95d9fbb95f2b65666989445826c0b66b24a88..e2906934e3d21055c74a1bf08a02a36d35298eb3 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 16f9fba6f37400f6957a6f5803e6e1bb06417087..8fe857cf93fd4a00b1023d3c8c1b292840e15c68 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 0ce62c39b7eb46ec5aaaad1b9b9e1e4b224b6ce6..27d7a0dd74b2452e60dc6679fdbf8b1a1c64904d 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';