I can't run it after updating to Version 9

[semihraifgurel]

import React, { FC, useState } from 'react';
import { Prism } from 'react-syntax-highlighter';
import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
import ReactMarkdown from 'react-markdown';
import classNames from 'classnames';
import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
import useDarkMode from '../hooks/useDarkMode';
import Button from './ui/Button';
import useMdToString from '../hooks/useMdToString';

interface ICopyButtonProps {
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	children: any;
}
const CopyButton: FC<ICopyButtonProps> = ({ children }) => {
	const [copyOk, setCopyOk] = useState(false);
	const handleClick = () => {
		navigator.clipboard
			// eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access,react/prop-types
			.writeText(children[0].props.children[0])
			.then(() => {})
			.catch(() => {});
		setCopyOk(true);
		setTimeout(() => {
			setCopyOk(false);
		}, 1000);
	};

	return (
		<pre className='group relative'>
			<Button
				color={copyOk ? 'emerald' : 'blue'}
				variant={copyOk ? 'solid' : 'outline'}
				icon={copyOk ? 'HeroClipboardDocumentCheck' : 'HeroClipboardDocument'}
				className='absolute right-0 scale-0 opacity-0 group-hover:scale-100 group-hover:opacity-100'
				onClick={handleClick}
			/>
			{children}
		</pre>
	);
};

interface IMdViewerProps extends Partial<ReactMarkdownOptions> {
	mdFile: RequestInfo | URL;
	className?: string;
}
const MdViewer: FC<IMdViewerProps> = (props) => {
	const { mdFile, className: classes } = props;

	const content = useMdToString(mdFile);

	const { isDarkTheme } = useDarkMode();

	return (
		<>
			<style>{`pre>code, pre>code>span {background: transparent !important} pre>pre {margin: 0 !important; padding: 0 !important}`}</style>
			<ReactMarkdown
				className={classes}
				components={{
					pre: CopyButton,
					// eslint-disable-next-line react/no-unstable-nested-components
					code({ node, inline, className, children, ...rest }) {
						const match = /language-(\w+)/.exec(className || '');
						return !inline && match ? (
							<Prism
								// eslint-disable-next-line react/no-children-prop
								children={String(children).replace(/\n$/, '')}
								// @ts-ignore
								// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
								style={isDarkTheme ? oneDark : oneLight}
								customStyle={{
									background: 'transparent',
								}}
								language={match[1]}
								// eslint-disable-next-line react/jsx-props-no-spreading
								{...rest}
							/>
						) : (
							<code className={classNames(className, classes)} {...rest}>
								{children}
							</code>
						);
					},
				}}>
				{content}
			</ReactMarkdown>
		</>
	);
};
MdViewer.defaultProps = {
	className: undefined,
};

export default MdViewer;

[wooorm]

Read and follow the support guide.

[semihraifgurel]

I couldn't find any resources for the upgrade.
I couldn't find where to import "ReactMarkdownOptions".
I couldn't find any instructions on what we should do for "inline".
Most importantly, the "components" prop no longer accepts "pre" and I couldn't find any instructions explaining how to use "CopyButton".

[ChristianMurphy]

There are release notes that explain how to upgrade https://github.com/remarkjs/react-markdown/blob/main/changelog.md#900---2023-09-27

I couldn't find where to import "ReactMarkdownOptions".

This is now Options and exported at the top level.

I couldn't find any instructions on what we should do for "inline".

Explained in the release notes https://github.com/remarkjs/react-markdown/blob/main/changelog.md#remove-extra-props-passed-to-certain-components

Most importantly, the "components" prop no longer accepts "pre"

No, it still does accept pre.

I couldn't find any instructions explaining how to use "CopyButton".

Right, <CopyButton> is your custom component, why would react-markdown have a guide for it?