Home

Sanity Studioにコードブロック追加しました

@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>
      );
    },
  },
};