tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现iframe等元素的渲染

Browse Source
This commit is contained in:
tone
2025-05-18 15:47:27 +08:00
parent 98f5543865
commit 0f1ecb683e
3 changed files with 120 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
tone-page-web/app/(with-header-footer)/blog/[id]/page.tsx
View File

@@ -10,6 +10,7 @@ import rehypeHighlight from 'rehype-highlight'
import 'highlight.js/styles/github.css'
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';
import rehypeRaw from 'rehype-raw'
export default function Blog() {
const params = useParams();
@@ -35,19 +36,19 @@ export default function Blog() {
<p className="text-sm text-zinc-500 text-center my-5">发布于：{new Date(data.createdAt).toLocaleString()}</p>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeHighlight]}
rehypePlugins={[rehypeRaw, rehypeHighlight]}
children={data.content}
components={{
h1: ({ node, ...props }) => <h1 className="text-3xl font-bold py-1" {...props} />,
h2: ({ node, ...props }) => <h2 className="text-2xl font-bold py-0.5" {...props} />,
h3: ({ node, ...props }) => <h3 className="text-xl font-bold" {...props} />,
h1: ({ node, ...props }) => <h1 className="text-3xl font-bold py-2" {...props} />,
h2: ({ node, ...props }) => <h2 className="text-2xl font-bold py-1" {...props} />,
h3: ({ node, ...props }) => <h3 className="text-xl font-bold py-0.5" {...props} />,
h4: ({ node, ...props }) => <h4 className="text-lg font-bold" {...props} />,
h5: ({ node, ...props }) => <h5 className="text-md font-bold" {...props} />,
p: ({ node, ...props }) => <p className="py-2 text-zinc-700" {...props} />,
p: ({ node, ...props }) => <p className="py-1 text-zinc-700" {...props} />,
img: ({ node, src, ...props }) => (
<PhotoProvider>
<PhotoView src={src as string}>
<img src={src} alt="" {...props} />
<img src={src} {...props} />
</PhotoView>
</PhotoProvider>
),