티스토리 코드 하이라이트 간단한 3가지 방법 - 플러그인, highlight.js, 웹 사이트 활용 - 아이공

코드를 많이 사용하는 프로그래머나 혹은 개발자를 꿈꾸는 사람들에게 블로그 활동을 하는데 밋밋한 default 코드 삽입보다 좀 더 세련된 스타일의 코드 사용하기를 바랍니다. 그런 사람들에게 추천하는 방식으로 3가지 간단한 방법을 알려드리려합니다.

목차 - 번호를 선택하면 그 위치로 이동합니다.

1. 티스토리 플러그인 사용하기

2. Color Scripter 웹 사이트 활용하기

3. highlight.js를 다운받아 사용하기

1. 티스토리 플러그인 사용하기

티스토리 : 블로그관리 홈 - 플러그인 - 코드 문법 강조

여기에 들어가게 되면 여러분은 7가지 테마를 선택하실 수 있습니다.

Atom One Dark, Atom One Light, GitHub, Monokai, Darcula, Visual Studio, Xcode가 그 예입니다.

Style들이 각 언어에 어떻게 적용되는지를 확인하고 싶다면 아래 사이트 좌측에 존재하는 Styles들을 선택해서 확인할 수 있습니다.

https://highlightjs.org/static/demo/

간단합니다. 그렇죠?^^

구 버전 에디터의 경우 아래와 같은 HTML 코드블럭을 사용합니다.

<pre><code class='LANG'> ... </code></pre>

물론 class에는 여러분의 언어를 넣어야겠지요?

아래와 같이 간략히 표현도 가능합니다.

만약 python이라면 <pre class="python"> ~ </pre>를 넣어주시면 됩니다.

필요하다면 GitHub에 공개된 hightlight.js를 활용할 수 있습니다.

https://github.com/highlightjs/highlight.js

이 방법을 좀 더 이해하기 쉽게 제가 3번에서 다룰 예정입니다.

만약 7가지 테마 스타일에 만족하지 못하다면 위 사이트에서 보여주는 정말 수많은 스타일을 적용하는 방법을 알려드리겠습니다.

물론 이것보다는 쪼금 어려울 수 있습니다만 우리는 아름다움을 위해 그 노고를 치룰 각오가 되어있다고 가정하겠습니다. ^^

2. Color Scripter 웹 사이트 활용하기

이 방법 역시 매우 간단합니다.

https://colorscripter.com/

위 사이트를 방문하셔서 여러분이 원하는 코드를 친 다음 언어와 스타일패키지, 기타 세부설정에 들어가셔서 원하는 방식으로 바꿀 수 있습니다.

다만 스타일패키지가 3가지 종류이고 세부설정에 있어 약간의 어려움이 있어보이지만 그래도 밋밋한 코드보다는 훨씬 나아보입니다.

만약 설정이 끝나셨으면 우측 하단에 HTML 복사가 존재하고 이 것을 우리 글쓰기 HTML에 붙여넣기 하면 끝입니다.

이 방법도 매우 간단하죠?

아래 2개의 예를 보여드리겠습니다.

Default (기본, 단일 색상, 줄간격 130%)

1
2
3
4
5
6
7
def info():
    t = []
    for i in range(3):
        t.append(i)
    return max(t)
 
print(info())
cs

스타일패키지 : 서브라임 블랙, 배경 : 이중색, 줄간격 100%

1
2
3
4
5
6
7
def info():
    t = []
    for i in range(3):
        t.append(i)
    return max(t)
 
print(info())
cs

3. highlight.js를 다운받아 사용하기

여기는 간단하지는 않습니다.

그러나 스타일을 위해 감수하겠다는 분들은 이곳을 보실 것 같습니다.

아마 대부분의 "티스토리 코드 하이라이트" 키워드는 이 방법을 알려드립니다.

만약 제가 설명이 부족하다면 다른 블로그를 찾아보셔도 충분한 내용이 나올 것입니다.

1. https://highlightjs.org/ 에 방문합니다.

2. Get version ~를 클릭합니다.

3. Custom package에 자신이 사용하는 언어와 사용할 언어를 선택합니다.

대부분 Common에 대부분이 클릭되어 있는데 그대로 다운로드를 받으셔도 무방합니다.

다운로드 클릭 버튼은 Custom package 하단에 존재합니다.

4. https://highlightjs.org/static/demo/ 에서 여러분이 원하는 언어에 적용되는 코드 스타일을 고릅니다.

저는 예로 Atelier Heath Dark를 선택하기로 가정하겠습니다.

5. 아까 사이트에서 Download한 hightlight.zip파일을 풀어보도록 하겠습니다.

6. 그 안에 존재하는 highlight.pack과 style 폴더 안에 여러분이 선택한 style의 CSS 스타일시트를 현 블로그 관리 홈 - 꾸미기 - 스킨 편집 - html 편집 - 파일 업로드를 합니다.

보이는 것과 같이 제가 예로 설정한 Atelier Heath Dark에 대한 css와 heightlight.pack.js가 들어간 것을 확인할 수 있습니다.

7. 이제 HTML을 클릭한 후 제가 3번 위에 있는 그림처럼 파란 박스로 칠한 부분의 코드를 <head> 다음에 넣을 것인데 주의!

현재 <link rel="stylesheet" href="~/default.min.css"라고 설정되어 있는 부분을 수정해야합니다.

default.min.css를 여러분이 넣고자했던 css 이름으로 바꿔야합니다.

저의 경우 atelier-cave-dark.min.css로 바꾸겠습니다.

8. 아직 끝나지 않았습니다.

이 코드를 마지막으로 삽입합니다.

<script>hljs.initHighlightingOnLoad();</script>

즉시 하이라이트가 나오도록 도와주는 코드입니다.

즉 여러분의 HTML 편집에 넣어야하는 코드는 7번 위의 그림과 같습니다.

아래에 코드로 넣겠습니다.

파란색이 여러분이 바꿔야하는 부분입니다.

<link rel="stylesheet"
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/atelier-heath-dark.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>

참고)

사실 위의 코드보다 더 간단히 아래와 같이 넣을 수 있습니다만 선택사항이고 html을 잘 모르는 분들에게 설명하기 위해 위와 같은 설명을 했습니다.

그러나 사실 우리는 티스토리에 파일을 업로드 했기 때문에 아래와 같은 코드를 넣어도 됩니다. 참고하세요

<link rel="stylesheet" href="./images/atelier-heath-dark.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

9. 이제 글을 적어보겠습니다.