@sanity/code-inputでコードブロックを追加しました。
react-syntax-highlighterでシンタックスハイライトさせました。
nordのテーマを適用しました。
import { nord } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { SanityImage } from "./SanityImage";
import SyntaxHighlighter from "react-syntax-highlighter";
export const myPortableTextComponents = {
types: {
image: ({ value }: any) => {
return <SanityImage {...value} />;
},
codeField: (props: any) => {
console.log(props);
return (
<SyntaxHighlighter style={nord} language={props.value.language}>
{props.value.code}
</SyntaxHighlighter>
);
},
},
};