티스토리 정보 - 블로그 코드 블럭 넣기

티스토리를 통해서 많은 사람들이 프로그래밍 정보를 공유한다. 그중에 코드를 긁어서 자신의 코드에 쉽게 적용할 수 있도록 해주는
포스트가 있고 캡처를 이용하여 코드를 게시하는 분들이 계신다.
나도 사실 캡처를 해서 올렸던 작성자라.. 이왕이면 쉽게 긁어서 바로 적용해 볼 수 있는 게시글이 좋다고 생각이 드는 만큼 포스트에
코드를 넣을 수 있는 방법을 찾았기에 공유해보고자 한다.  

1. 코드블럭 이용하기
2. highlight.js 이용하기

총 2가지 방법이 있는데 1번은 쉬운 방법이고 2번은 스타일이 다양한 대신 복잡하다.

---

# [코드 블럭] 이용하기

티스토리의 에디터에는 코드를 쉽게 넣을 수 있는 기능이 존재한다. 바로 [코드 블럭]이다. 


1. 우선 글을 작성하기 위해서 글쓰기를 누르고 빨간 화살표가 가리키는 점 3개 ( 더보기 ) 기능을 클릭한다.

2. 점 3개 ( 더보기 )를 클릭 시 코드 블록 <> 이 보일것이다. 클릭해보자 

3. 클릭하면 언어를 선택할수있는 선택지와 코드를 넣을 수 있는 빈 여백이 존재할 것이다. 
   여기서 코드를 입력하고 하단의 확인을 누르면 끝난다. 

하단은 시험 삼아서 넣어본 결과이다. 

#include<iostream>
using namespace std;

int main()
{
	int A, B, C;
    return 0;
}

 

* 글이 완성되면 pre code 상태로 보이고 하이라이트가 안되어서 보일것이다. 여기서 티스토리에서 제공해주는 플러그인 기능을 추가하여 하이라이트를 해줘야 더 이쁘게 보일 수 있다. 

티스토리 플러그인 기능 중에 Systax Highlight라는 코드 문법 강조 기능이 있는데 한번 같이 설치해보자.

4. 티스토리 블로그 관리자 페이지에서 왼쪽에 플러그인 항목이 보일것이다. 클릭해보자
   클릭시 현재 자신의 블로그에서 사용하고 있는 플러그인 리스트가 상단에 위치할 것이며 설치가 안된 플러그인 들은 하단에 위치한다.

5. 이제 검색창에 syntax highlight를 검색하여 설치해보자.
   설치는 테마를 선택하고 적용을 누르면 끝이난다.
   나는 어두운 배경에 코드가 보이는게 깔끔하다고 생각하여 Dracula 테마를 선택하였다.
   이것 이외에 github이라던지 다양한 테마가 있으니 각자에 맞는 스타일을 적용하여 설치하자.

   #다른 테마 종류 : Atom one Dark, Atom One Light, Github, Monokai, Darcula, Visual Studio, X Code

6. 플러그인이 설치되었으니 글쓰기를 클릭하고 코드 블록을 이용하여 코드를 넣어보자 
   하단의 그림처럼 코드 블럭이 하이라이트 되어서 나오면 성공이다. 

---

# highlight.js로 적용하기

추가적으로 highlight.js라는 기능이 있는데 해당 기능은 사이트에서 코드를 붙이면 하이라이트가 된 상태로 나와서 우리가 HTML에 추가해주면 된다. 

1. 하단의 사이트에 접속하여 Get Version~을 클릭하자.

highlight.js

 

2. Custom package에서 자신이 사용하는 언어와 사용할 언어를 선택하자.
   보통은 Common 쪽에 다 클릭이 되어있는데 Other의 항목에서도 원하는 것을 클릭해주면 된다. 

3. 원하는 스타일이 선택되었으면 스크롤을 내려서 하단의 Download 버튼을 클릭하고 압축을 풀어봅시다.
   
   압축을 풀면 highlight.pack이라는 파일과 styles 폴더가 보입니다.

4. 이제 highlight.pack과 styles폴더 안의 한 가지 Style의 CSS 스타일 시트를 업로드해봅시다.

   순서는 다음과 같습니다.
   블로그 관리 홈으로 가셔서 꾸미기 > 스킨 편집 > html 편집 > 파일 업로드에서 하단의 추가를 해주시면 되겠습니다. 

   저는 highlight.pack과 styles 폴더 안에 arduino-light파일을 업로드해보았습니다.
   

styles폴더안의 arduino-light 파일

5. 이제 집중하셔야 할 것이 있습니다. 우선 highlight.js에서 Download를 눌렀던 페이지 상단에 jsdelivr이라는 항복이 있습니다. 해당 항목의 코드를 복사하시고 블로그 HTML 페이지 Head 부분에 붙여 넣기를 해야 합니다. 

6. 바로 위의 2번째 사진과 같이 코드 붙여 넣기가 되었으면 이제 빨간 화살표가 가리키는 default.min.css 글자를 수정해야 합니다. 

    여러분이 넣고자 했던 스타일의 이름을 반영시킵니다. 
    ex ) default.min.css > arduino-light.min.css
    추가적으로 <script> hljs.initHighlightingOnLoad();</script>를 추가해줌으로써 즉시 나오도록 해야 합니다. 

최종 모습

7. 이제 글을 적어봅시다. 
   글쓰기를 들어가서 상단의 기본 모드에서 Html을 클릭합니다.

   Html 코드가 보일 건데 스크롤을 내려서 제일 하단으로 내립니다. 
   그리고 다음과 같이 입력해줍니다.

입력이 끝나고 다시 돌아오면 하단과 같은 코드 블록이 나오게 되는 것을 확인할 수 있습니다. 

def info():
  t=[]
  for i in range(3):
    t.append(i)
  return max(t)
  
print(info())

# 여기서 주의해야 할 것은 반드시 <pre class="python"><code> ~~ </code></pre> 형식으로 써야 합니다. 
그리고 또  하나의 유의점은 html을 작성 시 < 또는 >을 표시하기 위해서&lt; 그리고 &gt;로 사용하셔야 사용이 가능하다는 점 유의 바라겠습니다. 

 

이상 포스팅 마치겠습니다.