더북(TheBook)

20.6.5 마크다운 스타일링

 

현재 마크다운은 html의 기본 스타일로 설정되어 있습니다. 포스트가 조금 더 멋져 보이도록 스타일을 조금 변경하겠습니다.

src/components/common/MarkdownRender/MarkdownRender.scss

@import ‘utils’;

.markdown-render {
  blockquote {
    border-left: 4px solid $oc-blue-6;
    padding: 1rem;
    background: $oc-gray-1;
    margin-left: 0;
    margin-right: 0;
    p {
      margin: 0;
    }
  }

  h1, h2, h3, h4 {
    font-weight: 500;
  }

  // 텍스트 사이의 코드
  h1, h2, h3, h4, h5, p {
    code {
      font-family: ‘D2 Coding’;
      background: $oc-gray-0;
      padding: 0.25rem;
      color: $oc-blue-6;
      border: 1px solid $oc-gray-2;
      border-radius: 2px;
    }
  }

  // 코드 블록
  code[class*=language-], pre[class*=language-] {
    font-family: ‘D2 Coding’;
  }

  a {
    color: $oc-blue-6;
    &:hover {
      color: $oc-blue-5;
      text-decoration: underline;
    }
  }

  //  스타일
  table {
    border-collapse: collapse;
    width: 100%;
  }

  table, th, td {
    border: 1px solid $oc-gray-4;
  }

  th, td {
    font-size: 0.9rem;
    padding: 0.25rem;
    text-align: left;
  }

  // 이미지 최대 크기 설정  가운데 정렬
  img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }
}

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.