diff --git a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
index 400fa39a19..be9b36c07d 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
@@ -41,7 +41,6 @@ const FormContentPreview: FC<Props> = ({
       <div className='max-h-[calc(100vh-167px)] overflow-y-auto px-4'>
         <Markdown
           content={content}
-          customDisallowedElements={['variable']}
           rehypePlugins={[rehypeVariable]}
           customComponents={{
             variable: ({ node, ...props }: any) => (
diff --git a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
index 3127ceff32..4c8c8fe95a 100644
--- a/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx
@@ -1,45 +1,50 @@
 import React from 'react'
 
+const regex = /\{\{#(.+?)#\}\}/g
+
 export function rehypeVariable() {
   return (tree: any) => {
-    const iterate = (node: any) => {
-      console.log(node.type)
+    const iterate = (node: any, index: number, parent: any) => {
+      const value = node.value
+      if(node.type === 'text')
+        console.log(value)
+
+      if(node.type === 'text' && regex.test(value)) {
+        let m: RegExpExecArray | null
+        let last = 0
+        const parts: any[] = []
+        regex.lastIndex = 0
+        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', // variable is also be cleared
+            properties: { path: m[0].trim() },
+          })
+          last = m.index + m[0].length
+        }
+
+        if (parts.length) {
+          if (last < value.length)
+            parts.push({ type: 'text', value: value.slice(last) })
+
+          parent.children.splice(index, 1, ...parts)
+        }
+      }
+      if (node.children) {
+        node.children.forEach((item: any, i: number) => {
+          iterate(item, i, node)
+        })
+      }
     }
-    tree.children.forEach(iterate)
-
-    // 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: [],
-    //     })
-    //     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)
-    // })
+    tree.children.forEach((item: any, i: number) => {
+      iterate(item, i, tree)
+    }, tree)
   }
 }
 
 export const Variable: React.FC<{ path: string }> = ({ path }) => {
-  return <span style={{ color: 'red', fontWeight: 700 }}>{path}</span>
+  return <span style={{ color: 'blue', fontWeight: 700 }}>{path.replaceAll('.', '/')}</span>
 }