FEAT: add image styling in markdown (#2441)

Co-authored-by: crazywoola <427733928@qq.com>
This commit is contained in:
Yash_1124 2024-02-19 12:37:45 +05:30 committed by GitHub
parent 61e4bbabaf
commit 81c5a21b8d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -143,6 +143,37 @@ export function Markdown(props: { content: string; className?: string }) {
</code>
)
},
img({ src, alt, ...props }) {
return (
// eslint-disable-next-line @next/next/no-img-element
<img
src={src}
alt={alt}
width={250}
height={250}
className="max-w-full h-auto align-middle border-none rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out mt-2 mb-2"
{...props}
/>
)
},
p: (paragraph) => {
const { node }: any = paragraph
if (node.children[0].tagName === 'img') {
const image = node.children[0]
return (
// eslint-disable-next-line @next/next/no-img-element
<img
src={image.properties.src}
width={250}
height={250}
className="max-w-full h-auto align-middle border-none rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out mt-2 mb-2"
alt={image.properties.alt}
/>
)
}
return <p>{paragraph.children}</p>
},
}}
linkTarget='_blank'
>