temp

web/app/components/base/markdown/index.tsx

@@ -32,6 +32,7 @@ export type MarkdownProps = {
   content: string
   className?: string
   customDisallowedElements?: string[]
+  rehypePlugins?: any// js: PluggableList[]
   customComponents?: Record<string, React.ComponentType<any>>
 }
 
@@ -71,6 +72,7 @@ export const Markdown = (props: MarkdownProps) => {
               tree.children.forEach(iterate)
             }
           },
+          ...(props.rehypePlugins || []),
         ]}
         urlTransform={customUrlTransform}
         disallowedElements={['iframe', 'head', 'html', 'meta', 'link', 'style', 'body', ...(props.customDisallowedElements || [])]}

web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx

@@ -10,6 +10,7 @@ import Badge from '@/app/components/base/badge'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { RiCloseLine } from '@remixicon/react'
+import { Variable, rehypeVariable } from './variable-in-markdown'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
@@ -38,7 +39,16 @@ const FormContentPreview: FC<Props> = ({
         <ActionButton onClick={onClose}><RiCloseLine className='w-5 text-text-tertiary' /></ActionButton>
       </div>
       <div className='max-h-[calc(100vh-167px)] overflow-y-auto px-4'>
-        <Markdown content={content} />
+        <Markdown
+          content={content}
+          customDisallowedElements={['variable']}
+          rehypePlugins={[rehypeVariable]}
+          customComponents={{
+            variable: ({ node, ...props }: any) => (
+              <Variable path={node.properties?.path as string} />
+            ),
+          }}
+        />
         <div className='mt-3 flex flex-wrap gap-1 py-1'>
           {userActions.map((action: any) => (
             <Button

web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { visit } from 'unist-util-visit'
+
+export function rehypeVariable() {
+  return (tree: any) => {
+    visit(tree, 'text', (node: any, index: number, parent: any) => {
+      if (!parent || parent.type !== 'element') return
+      const tag = parent.tagName
+      if (tag === 'code' || tag === 'pre') return
+
+      const value: string = node.value
+      const regex = /\{\{#\$(.+?)#\}\}/g
+      let m: RegExpExecArray | null
+      let last = 0
+      const parts: any[] = []
+
+      while ((m = regex.exec(value))) {
+        if (m.index > last)
+          parts.push({ type: 'text', value: value.slice(last, m.index) })
+
+        parts.push({
+          type: 'element',
+          tagName: 'variable',
+          properties: { path: m[1].trim() },
+          children: [], // 也可放文本 children
+        })
+        last = m.index + m[0].length
+      }
+
+      if (!parts.length) return
+      if (last < value.length)
+        parts.push({ type: 'text', value: value.slice(last) })
+
+      parent.children.splice(index, 1, ...parts)
+    })
+  }
+}
+
+export const Variable: React.FC<{ path: string }> = ({ path }) => {
+  return <span style={{ color: 'red', fontWeight: 700 }}>{path}</span>
+}