[티스토리-3] 소스코드블럭 작성 & 코드 하이라이트 예쁘게 출력하기

Tistory/티스토리

[티스토리-3] 소스코드블럭 작성 & 코드 하이라이트 예쁘게 출력하기

크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널 2022. 10. 22. 21:27

[티스토리-3] 소스코드블럭 작성 & 코드 하이라이트 예쁘게 출력하기

필자는 공부한 프로그래밍 언어들을 정리하고 나중에 까먹었을때 복습할 목적으로 티스토리 블로그를 운영하고 있다. 코드들을 티스토리에 작성하기 위해 반드시 필요한 코드블럭 사용법 및 하이라이트 예쁘게 출력하는 방법에 대해 알아보자.

1. 코드블럭을 이용하여 코드 작성하기

1) 글쓰기 페이지 우측 '...' 클릭 - '코드블럭' 클릭

2) 프로그래밍 언어 선택

3) 코드 삽입 - '확인' 클릭

4) 코드 확인 - 글 저장

겉으로 보기에는 잘 적용이 된 것 처럼 보인다. 하지만 작성된 글을 확인하면 에디터에서만 알록달록 예쁘게 코드가 보이고 전혀 적용이 안된 것을 볼 수 있다.

이를 해결하기 위해선 추가적으로 하이라이트 적용이 필요하다. 하이라이트를 적용하는 방법에는 아래의 두 가지 방법이 있다.

2-1. 티스토리 플러그인에서 Syntax Highlight를 적용하기

2-2. highlight.js에서 직접 적용하기

2-1. 티스토리 플러그인에서 Syntax Highlight를 적용하기

1) 블로그관리 하단에 '플러그인' 클릭

2) '코드 문법 강조 (Syntax Highlight)' 클릭

3) 테마 선택 - '변경사항 적용' 클릭

변경사항을 적용하고 나면 아래와 같이 사용중 이라는 문구가 뜨게 된다.

기존에 작성했던 코드를 확인해보면 아래와 같이 알록달록 하이라이트가 적용된 것을 볼 수 있다.

티스토리 플러그인에 등록된 코드 문법 강조(Syntax Highlight)는 총 7가지이다. (향후 더 늘어날 전망) 이 7가지 코드 에 대해 간략히 설명하고자 한다.

▶ Atom One Dark

- 필자는 다크한 배경을 선호한다. 회사에서도 개발업무로 영혼을 녹이다보면 다크한 배경이 눈에 덜 부담되기 때문이다. 개인적으로 주석이 조금 별로이다.

▶ Atom One Light

- Atom 에디터 베이스에 그레이 배경 버전이다. 개인적으로 주석과 배경색의 대비가 낮아 식별이 힘든 것 같다.

▶ Github

- Github 에디터 베이스에 그레이 배경이다. 개인적으로 Github 베이스는 모노톤으로 조금 삭막한 느낌이 있지 않나 싶다..

▶ Monokai

- 나쁘진 않으나 핑크색 볼드체가 조금 부담스럽다.

▶ Darcula

- 가장 무난한 것 같다. 필자는 Darcula를 사용중이다.

▶ Visual Studio

- 가장 익숙한 VS지만 흰색 배경이므로 pass~

▶ Xcode

- 흰색 배경 패스..

2-2. highlight.js에서 직접 적용하기

이 방법은 HTML 스크립트를 직접 적어 넣어 추가하는 방법이다.

※ <2-1. 티스토리 플러그인에서 Syntax Highlight를 적용하기>에서 플러그인이 사용중이면

적용이 불가능함. 플러그인 사용안함으로 변경 후 본 내용 수행 필요

1) highlight 파일 다운로드 클릭

<highlight.js 다운로드>

- 위 링크를 접속하여 .zip 파일 다운로드 한다.

2) .zip 파일 압축풀기

3) 블로그에 파일 업로드

① 블로그 관리 좌측 '스킨 편집' 클릭 - 'html 편집' 클릭 - '파일 업로드' 클릭

② highlight.min.js 파일 업로드

③ 원하는 코드 포맷 업로드

- 아래 링크에서 좌측 Theme에서 원하는 코드 포맷을 업로드한다.

<코드 포맷 확인하기>

필자는 "Atom One Dark Resonable"이 예뻐보여서 이를 선택하기로 결정했다.

포맷 파일 위치(압축풀기 한 파일 내) : \\highligh\styles\atom-one-dark-reasonable.min.css

※ 파일을 업로드하고 나면 컴퓨터에서 파일을 삭제해도 됨

4) HTML 링크 연결

① HTML 클릭

② CTRL+F로 '</head>' 검색 후 바로 윗 줄에 아래 HTML 소스 추가

※ 기존에 작성되어있는 HTML 소스는 삭제, 수정하면 안됨!!

  <!--Syntax Highlighter-->
  <script src="./images/highlight.min.js"></script>
  <link rel="stylesheet" href="./images/atom-one-dark-reasonable.min.css">
  <script>hljs.initHighlightingOnLoad();</script>

<link rel="stylesheet" href="./images/atom-one-dark-reasonable.min.css"> 이 부분을 본인이 선택하여 업로드한 .css 파일명으로 변경해야 함.

5) 폰트 및 폰트사이즈 변경

① CSS 클릭

② 제일 밑에 아래 CSS 소스코드 붙여넣기

pre code {
  font-family: "consolas", monospace;
	line-height: 1.3;
}
 
pre code.hljs {
	padding: 10px; margin: 15px 0; max-width: 100%;
    overflow-x: auto; overflow-y: hidden;  border-radius: 7px; line-height: 130%;
}

.hljs {
  white-space: pre;
  overflow-x: auto;
}

③ 적용 클릭

6) 코드 라인 보이게 설정

① 아래 파일 다운로드 및 압축 풀기

highlightjs-line-numbers.js-master.zip

0.10MB

② highlightjs-line-numbers.js 파일 업로드

- 2-2-3의 방법대로 highlightjs-line-numbers.js 파일을 업로드 한다.

- 파일 위치(다운로드 파일 내) : src\highlightjs-line-numbers.js

③ HTML에 아래 코드 추가

</head> 바로 위에 아래 링크를 붙여넣기 하면 된다.

<!--Line Number-->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
	$('code.hljs').each(function(i, block) {
		hljs.lineNumbersBlock(block);
	});
});
</script>

④ CSS에 아래 코드 추가

CSS 맨 밑에 아래 링크를 추가하면 된다.

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 
    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px !important;
 
    /* your custom style here */
}
 
/* for block of code */
.hljs-ln-code {
    padding-left: 10px !important;
}