code로 묶여있는 글이 글 미리보기에 나타나지 않는 문제

[whatisand]

` 로 묶여있는 코드는 글 미리보기시 나타나지 않고 있습니다.

미리보기 부분 캡

쳐

본문 캡쳐

[devHudi]

이슈 등록 감사드립니다 😄

[rxjw95]

해당 이슈에 대해서 제가 개인적으로 해결한 방법은 다음과 같습니다.

기존 아티클 형식에 대한 컴포넌트는 내부적으로 StyledMarkdown 컴포넌트로 html을 치환하는 과정이 있습니다.

반면에, PostList 컴포넌트를 확인해보니 단순히 Excerpt 스타일드 컴포넌트에 텍스트를 추가하는 것으로 보입니다!

그래서 Excerpt를 따로 컴포넌트 파일로 빼서 내부적으로 StyledMarkdown 컴포넌트를 래핑해주었습니다.

/*추가한 Excerpt*/
const Wrapper = styled.div` /* p 태그였으나, 인라인 태그 내에 블록 태그가 있는 것이 부자연스러워 div로 변경*/
  margin-bottom: 32px;
  line-height: 1.7;
  font-size: 16px;
  color: ${props => props.theme.colors.secondaryText};
  word-break: break-all;
`

const Excerpt = ({ html }) => {
    return (
        <Wrapper>
            <StyledMarkdown
                id="post-excerpt"
                dangerouslySetInnerHTML={{ __html: html }}
                itemProp="postExcerpt"
            />
        </Wrapper>
    )
}

export default Excerpt

/*PostList*/
<Excerpt html={excerpt}></Excerpt>

프론트엔드를 정말 깔짝해보아서 정답은 아니라고 생각하고 있지만, 바쁘신 와중에도 해당 블로그를 운영하시는 것에 감사드리면서 도움이 되고자 코멘트 남깁니다 :)