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

[티스토리-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 Dark

반응형

 

▶ Atom One Light

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

Atom One Light

▶ Github

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

Github

반응형

 

▶ Monokai

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

Monokai

▶ Darcula

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

Darcula

반응형

 

▶ Visual Studio

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

Visual Studio

▶ Xcode

- 흰색 배경 패스..

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;
}

 

 

반응형

 

※ 코드블럭이 표 형식으로 보인다면?

 - 아래와 같이 코드블럭이 표 형식으로 보인다면, CSS 수정이 필요하다. 

 

1) 표의 색상표 확인하기

 - 픽픽을 이용하여 표의 색상표를 확인한다.

 - 필자가 보이는 표의 색상 코드값은 DADCE0이다.

 

 

픽픽 다운로드는 아래 내용 참고

[티스토리-19] 픽픽으로 썸네일 1분 만에 초간단 만들기

 

 2) CSS에서 CTRL+F로 색상표 검색 및 주석처리

 ① CSS에서 필자가 찾아낸 색상표(dadce0)로 검색하니 3개가 나왔다. 모두 주석처리를 하자

 ② 주석처리 단축키는 'CTRL + /' 이다.

 ③ 적용 클릭 

 

 

아래와 같이 주석처리 하면 된다.

 

더이상 표 형식으로 소스가 나오지 않고 예쁘게 잘 나오는걸 확인할 수 있다.

반응형

 

---

 

관련글

[티스토리-6] 이전 글 삽입하기 (이전 글 삽입 형태 바꾸기)

[티스토리-5] 유튜브 동영상 삽입하기 (티스토리 유튜브 동영상 업로딩)

[티스토리-4] 웹페이지 파비콘(웹페이지 아이콘) 변경 하기

[티스토리-2] 게시글 순서 바꾸기

[티스토리-1] 가입하기