Storybook: 문서 플러그인으로 코드 형식을 지정하는 방법

버그 설명
코드 미리보기 형식이 엉망입니다.

재현하려면
동작을 재현하는 단계 :
Typescript 사용

 config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          transpileOnly: true,
        },
      },
       {
         loader: require.resolve('react-docgen-typescript-loader'),
         options: {
           tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
         },
       },
    ],
  });

사전 설정 구성

 {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {},
      sourceLoaderOptions:null
    },
  },

예상되는 행동
올바른 형식의 코드 미리보기
공식 코드 스 니펫 형식

스크린 샷

코드 조각

<Preview >
  <Story name="default">
    <Radio.Group value="apple">
      <Radio label="apple" />
      <Radio label="banana" />
      <Radio label="watermale" />
    </Radio.Group>
  </Story>
</Preview>

체계:
원사 추가 -D @ storybook / addon-docs

추가 컨텍스트
여기에 문제에 대한 다른 컨텍스트를 추가하십시오.