+ {!!filename && (
+
+ {filename}
+
+ {language?.toUpperCase()}
+
+
+ )}
+
+ {!filename && !!language && (
+
+ {language.toUpperCase()}
+
+ )}
+
+
+
+
+
+
+ {renderedHtml ? undefined : (
+
+ {value}
+
+ )}
+
+
+ {isOverflow && isCollapsed && (
+
+
+
+ )}
+
+
+
+ )
+ }
+ `}
+ lang="tsx"
+ attrs='filename="ShikiHighLighter.tsx" {3,4}'
+ />
+ )
+}
diff --git a/src/components/ui/code-highlighter/index.ts b/src/components/ui/code-highlighter/index.ts
index 49dad4d83f..414ff583be 100644
--- a/src/components/ui/code-highlighter/index.ts
+++ b/src/components/ui/code-highlighter/index.ts
@@ -1 +1,3 @@
export * from './CodeHighlighter'
+
+// export * from './Shiki'
diff --git a/src/components/ui/code-highlighter/shiki/Shiki.module.css b/src/components/ui/code-highlighter/shiki/Shiki.module.css
new file mode 100644
index 0000000000..0ef2abbde6
--- /dev/null
+++ b/src/components/ui/code-highlighter/shiki/Shiki.module.css
@@ -0,0 +1,35 @@
+.code-card {
+ @apply relative my-6 overflow-hidden rounded-md;
+ :global {
+ pre {
+ @apply !m-0 !p-0;
+
+ font-size: min(1em, 16px);
+ }
+
+ pre code {
+ @apply flex flex-col;
+ }
+
+ .shiki,
+ code {
+ @apply !bg-transparent;
+ }
+
+ .line {
+ @apply block px-4;
+ }
+
+ .highlighted {
+ @apply relative break-all bg-accent/20;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ overflow: auto;
+
+ &::before {
+ @apply absolute left-0 top-0 h-full w-[2px] bg-accent;
+ content: '';
+ }
+ }
+ }
+}
diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx
new file mode 100644
index 0000000000..71bb87bd17
--- /dev/null
+++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -0,0 +1,188 @@
+import {
+ useCallback,
+ useEffect,
+ useLayoutEffect,
+ useMemo,
+ useState,
+} from 'react'
+import clsx from 'clsx'
+import { getHighlighterCore } from 'shiki'
+import getWasm from 'shiki/wasm'
+import type { FC } from 'react'
+import type { HighlighterCore } from 'shiki'
+
+import { getViewport } from '~/atoms/hooks'
+import { AutoResizeHeight } from '~/components/modules/shared/AutoResizeHeight'
+import { useMaskScrollArea } from '~/hooks/shared/use-mask-scrollarea'
+import { clsxm } from '~/lib/helper'
+
+import { MotionButtonBase } from '../../button'
+import styles from './Shiki.module.css'
+import { codeHighlighter, parseFilenameFromAttrs } from './utils'
+
+interface Props {
+ lang: string | undefined
+ content: string
+
+ attrs?: string
+}
+
+let highlighterCore: HighlighterCore | null = null
+
+export const ShikiHighLighter: FC