연봉10배만들기

티스토리 Odyssey스킨의 Code부분 font 변경 및 프로그램 코드 하이라이트(Syntax Highlight) = 코드 문법 강조 플러그 인

saltdoll 2022. 1. 7. 07:22
반응형

Tistory 블로그를 사용하면서, 15년 넘게 하나의 스킨을 사용했습니다.

그 후, "티 에디션"의 기능을 알고 나서는 지금까지 Gallery (White) 스킨 만을 사용했습니다.

 

오랜 시간 나와 함께 했던, Gallery (White) 스킨

 

 오랜 시간 같이 사용하던 '티에디션' 스킨 화면

 

그러던 중, 티스토리에서 더 이상 "티에디션" 스킨 기능을 지원하지 않겠다고 공지하면서,

 

[스킨] 티에디션과 태터데스크 기능이 종료됩니다.

안녕하세요. 티스토리 팀입니다. 더 효율적인 스킨 시스템과 편집 기능을 위해 티에디션과 태더테스크를 부득이하게 종료합니다. 무엇이 종료되나요? - 스킨 편집 기능 중 '티에디션'과' '태터

notice.tistory.com

기존의 블로그 첫페이지를 사용하기 어렵게 되었습니다.

그래서, 새로운 스킨으로 변경하는 작업을 시작하게 되었습니다.

 

티에디션 버튼
블로그의 메인 화면을 수정 가능했던, 티에디션 화면

오랜 스킨을 버리고, 새로운 Odyssey 스킨을 사용하게 되었습니다.

기존의 스킨도 [스킨 편집]의 [html 편집] 기능으로 "HTML"과 "CSS"을 수정 했었습니다.

 

저 같은 경우 프로그램 코드 문법 강조인 code 부분을 많이 사용하는데,

스킨을 변경하면서,

코드 문법 강조(Sytax Hightlight) 플러그인이 초기화된 모습을 보게 되었습니다.

스킨 변경시, 코드 부분의 디폴트 초기 화면

이번 기회에 코드 문법 강조에 잘 보일 수 있게 수정해 보았습니다.

먼저, 가장 프로그램의 font 변경을 우선적으로 하였습니다.

 

 

코드 블록, 코드 하이라트로 가독성 높이기

프로그램 가독성을 위해서,

구글에서 무료로 지원하는 "Roboto Mono" 웹폰트를 추가해 보았습니다.

("Roboto Mono" 폰트는 구글의 무료 웹폰트입니다)

 

스킨 편집

티스토리 계정 관리자에서 [꾸미기] > [스킨 편집]으로 이동합니다.

 

[html 편집]으로 소스 수정

[html]을 선택 후에,

google font를 추가해주는 태그를 <head></head> 사이에 추가해줍니다.

 

Roboto Mono폰트 추가

<!--/* code 블록 영역 폰트 */-->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet"> 
<!--/* code 블록 영역 폰트 */-->

 

[CSS]을 선택 후에,

소스 부분의 검색 단축키인 Ctrl+G 또는 cmd+G을 눌러서,

"code"의 CSS선언 부분을 이동합니다.

여기서, font-family와 font-size를 수정해 줍니다.

 

html 코드에 추가한 google font인 'Roboto Mono' 폰트를

font-family에 새롭게 추가해 줍니다.

기본 폰트 사이즈인 font-size: 1.0em를 그대로 두면 글씨가 커서 가독성이 떨어집니다.

(0.8em은 개인 취향이오니, 원하시는 사이즈로 조절하시면 됩니다)

 

code,
kbd,
samp { 
    font-family: 'Roboto Mono', monospace; /* 폰트 추가 */
    /* 1 */
    font-size: 0.8em; /* 사이즈 변경 */
    /* 2 */
}

 

다음과 같이 변경 후, [적용]을 누르시면

기본 폰트가 수정된 모습을 확인할 수 있습니다.

 

'Roboto Mono' 폰트가 적용된 모습

 

반응형

 

여기서, 추가로 프로그램 코드의 가독성을 더 높이기 위해

티스토리(tisotry)에 코드 문법 강조(Syntax Highlight) 플러그 인을 추가해주면 가독성을 높일 수 있다.

 

코드 문법 강조 플로그 인

여기서, 여러 가지 코드 문법 강조의 테마도 여러 가지가 있습니다.

코드 문법 강조 테마에는 "Atom One Dark", "Atom One Light", "Github", "Monokai", "Darcula", "Visual Studio", "Xcode"는 있습니다. 여기서, 원하시는 테마를 선택하시면 됩니다.

 

개인적으로 Darcula 테마을 사용했습니다.
PhpStorm의 Theme인 Darcula가 있습니다.

그중에 저는 "Darcula"를 선택하였습니다. 

"Darcula"를 선택한 이유는, 제가 자주 사용하는 PhpStorm의 테마와 같아서입니다. 

 

Visual Studio 테마 적용
Darcula 테마 적용 화면 (회색 테두리 발견)

Daracla 테마를 적용해서 보면,

코드 블록 주위에 회색 테두리가 있어서, 집중을 방해시킵니다.

회색 테두리를 없애기 위해서, 스킨의 CSS를 수정해 주시면 됩니다.

CSS에서 검색어로, ".article-view pre"를 찾으시면 됩니다.

 

코드 부분의 pre의 CSS

.article-view pre {
    padding: 20px;
    background: #2b2b2b; /* 배경 색상 변경 */
    font-size: 16px;
    color: rgba(34, 85, 51, 0.87);
    white-space: pre-wrap;
}

여기서, 배경색을 "background: #2b2b2b;"로 변경해 주시면 됩니다.

 

Daracla '코드 문법 강조' 커스텀 수정한 최종 모습 (회색 테두리 사라짐)

최종적인 테두리 색상까지 변경하면,

코드 부분의 모습이 집중하기에 너무 좋습니다.

 

 

메뉴 항목 높이와 디자인 변경

그 외에 개인적으로 또 다른 변경은 Nav Menu의 CSS를 수정했습니다.

 

높이 조절, 마우스 오버(hover)위치 아래로 두기

/* nav menu 높이 줄이기 */
.wrap-right .header .category_list > li,
.wrap-right .header .t_menu_home,
.wrap-right .header .t_menu_guestbook,
.wrap-right .header .t_menu_tag,
.wrap-right .header .t_menu_link_1,
.wrap-right .header .t_menu_category{
	padding: 25px 0 25px 0; /* padding: 32px 0 32px 0; */
}
    
/* nav menu hover 높이 내리기 */
.header .tt_category .category_list > li:hover > a:after,
.header .topnavmenu > ul > li:hover > a:after {
  content: '';
  position: absolute;
  top: 25px; /* top: 16px; */
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 4px;
  background: #ef402f; /* NAV MENU 빨간색 */
  z-index: 1;
}

 

참고로, Menu는 스킨 꾸미기에서 Default로 내비게이션 "사용 안 함"으로 선택이 되어 있습니다.

여기서, "티스토리 '메뉴'활용"을 선택해 주시면, 상단 메뉴가 활성화됩니다.

 

상단 메뉴 사용
꾸미기에서 메뉴 관리 페이지
메뉴에는 다양한 타입을 추가가 가능함

 

 

계속적으로 CSS만 변경해줘도, 좋은 디자인 나올 수 있습니다.

아직 더 작업이 필요한 부분은 POSTER방식의 이미지의 정렬 표시 방법인데요.

그 부분은 javascript를 이용해서 수정해야 할 것 같네요.

아마도 추측하기론, 이미지 로딩 후, 사이즈를 키우는 javascript가 적용되는 것 같습니다.

반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)