반응형

티스토리 마크다운 CSS 적용

  • 마크다운으로 글을 썼더니 typora와 다르게 표시되고 테이블이 깨진다.

  • github-markdown.css를 적용하기로 결정했다.

적용 과정

  • 공식 깃허브 링크

    https://github.com/sindresorhus/github-markdown-css/blob/main/github-markdown.css

  • 위 링크의 코드를 복사하여 VSCode 등의 에디터에 붙여넣기한다.

    • 같은 단어를 한번에 변경할 수 있어야 편하다.

  • .markdown-body로 작성된 부분을 드래그로 긁어서 우클릭한다.

    • Change All Occurences(Ctrl + F2)로 같은 부분을 한번에 편집할 수 있다.

    • 적용하고 싶은 클래스명을 입력

      • 크롬 등의 브라우저에서 개발자 모드로, 작성한 글이 전부 포함된 DOM의 클래스명 확인

      • 내가 적용한 블로그 스킨같은 경우 글을 쓰면 tt_article_useless_p_margin 클래스의 하위에 작성됨

  • 전부 복사해서 블로그 스킨 편집의 html 편집에서 CSS 항목 맨 밑에 붙여넣기

    • 혹은 파일로 저장하여 업로드 후 html의 <head> 부분에서 <link>로 적용해도 될 것 같다.

  • 카테고리의 다른 글 처리

    • 이것도 테이블 형식이라 마크다운의 테이블 형식으로 변환되어서 깨진다.

    • CSS 탭 맨 아래에 다음 내용을 추가했다.

      .tt_article_useless_p_margin .another_category h4 {
  text-align: center;
}
.tt_article_useless_p_margin .another_category tbody {
  display: block;
}
.tt_article_useless_p_margin .another_category table,
.tt_article_useless_p_margin .another_category tbody,
.tt_article_useless_p_margin .another_category tr,
.tt_article_useless_p_margin .another_category th,
.tt_article_useless_p_margin .another_category td {
  border: none;
  background-color: white;
}
.tt_article_useless_p_margin .another_category tr {
  display: flex;
  justify-content: space-between;
}
.tt_article_useless_p_margin table tr:nth-child(2n) {
  background-color: white;
}

참고

반응형
저작자표시 (새창열림)

'IT(개발아님)' 카테고리의 다른 글

구글 검색으로 Tistory 접속 시 400 에러 발생할 때  (0) 2023.04.22

티스토리툴바