설치없이 블로그(tistory)에 소스코드 이쁘게 삽입하는 방법 - SyntaxHighlighter

2021-05-24 update log: 본 블로그에서는 더이상 Syntaxhighlighter를 사용하지 않습니다. highlight.js + alikong 님이 개발하신 커스텀 코드를 사용하고 있습니다.
2019-03-27 update log: CDN을 이용한 방법에서 원인을 찾지 못한 문제(PC 크롬 브라우저에서 사이드바 스크롤 먹통)가 발생하여 직접 설치하는 방법으로 갈아탔습니다. 따라서 본 블로그에서는 당분간 아래 CDN을 이용한 방법을 사용하지 않을 예정입니다.

---

 

 

프로그래밍 예제나 여기 저기서 수집한 다양한 코드들을 블로그에 보기 좋게 올리기 위해서 사용되는 다양한 툴이 있답니다.

 

code-prettify, Rainbow, Prism, highlight.js, SHJS, 등등

 

많은 분들께서 각 툴들의 장단점을 면밀히 분석했던데 난 그냥 귀찮으니까 구글링해서 맨위에 링크 SyntaxHighlighter를 사용하기로 했습니다.

SyntaxHighlighter의 단점으로는 사용하는 언어별로 지정을 해줘야 한다는데, 기능도 많고 오래 사용된 툴이며 많은 사람들이 사용하고 있다니 그냥 이걸 쓰기로 했습니다.

 

이 SyntaxHighlighter는 여러 사람이 사용하는 만큼, 찾아보시면 소개된 사용법도 여러가지라서 혼란스러울 수도 있는데요. 어떤 이는 코드를 이건 헤드에 넣고 이건 바디에 넣고 아주 복잡하게 설명한 사람이 있는데 그냥 제가 한 것처럼 한방에 하시면 되니 딴데 가지 마시고 따라해 보세요. ^^

 

지금부터 사용 방법 입니다.

 

1. 블로그 관리 페이지로 가서 꾸미기 >> 스킨편집 으로 가서 오른쪽에 있는 HTML 편집 메뉴 버튼을 눌러줍니다.

 

 

 

2. 소스가 보이는 창에서 </head> 태그를 검색으로 찾아갑니다. 그리고 </head> 바로 위에 다음 코드를 삽입합니다. 

다시 말해 head 블록 맨 마지막에 이 코드를 추가한다는 거죠.

<!--     ========================      SyntaxHighlighter 시작   --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreMidnight.css" />   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js" ></script>   <script type="text/javascript"> SyntaxHighlighter.all(); </script> <!--      SyntaxHighlighter 종료     ======================== --> 

여기서 5번 줄은 표현될 테마입니다.

그리고 7~10번 줄은 사용하고자 하는 언어입니다.

많이 넣으면 페이지 로딩에 영향을 준다고 하네요.

 

물론 티스토리에서는 js를 설치할 수 있도록 되어 있으니 설치해서 사용하시면 속도 면에서는 이점이 있을 것 같은데, 파일 받아서 올리고 하기가 귀찮아서 전 그냥 CDN을 쓰는 걸로 넘어가겠습니다. ㅎㅎ

 

제공되는 CDN는 여기에서 확인하실 수 있습니다. js 파일명을 보시면 용도가 뭔지 아실껍니다.

저는 어차피 사용 할 줄 아는게 몇 게 없으니 4개만 넣고... ;;

 

최종적으로 아래와 같은 모양이 됩니다.

 

 

3. 저장을 하면 준비는 끝나게 됩니다.

이때 확인 하실 게 <link> 및 <script> 태그에 시작과 끝을 티스토리 에디터가 잘 이해했는지 확인해야 합니다.

문법에는 맞지만 에디터가 오류가 있다고 붉은색으로 표시하면 제대로 작동이 안되더군요.

붉은색 문법 오류 표시가 없도록 확인하고 저장하세요.

 

4. 다음은 소스 코드를 입력하는 방법입니다.

글쓰기에서 HTML모드로 들어가서 작성하고자 하는 소스 코드를 아래 pre 태그 사이에 적어주면 됩니다.

 

<pre class="brush: [사용언어]">

[여기다가 필요한 코드]

</pre>

 

여기서도 주의할 점이 있습니다. pre 태그 안에 들어가는 게시 하고자 하는 소스 코드에 < 가 있으면 안됩니다.

예를 들어 html이나 xml등 코드에 모든 "<" 를 "&lt;"로 써줘야 브라우저가 코드를 오해하지 않아 정상적으로 출력이 되죠. 이거 때문에 왜 안되나 한참을 뒤졌네요. ㅜ.ㅜ

 

아래는 xml 코드의 작성 방법과 그 결과 입니다.

이렇게 작성해 주면

<pre class="brush: xml">

&lt;?xml version="1.0" encoding="UTF-8" ?>

&lt;text>Hi There!&lt;/text>

</pre>

 

이렇게 나오는 거죠.

 

<?xml version="1.0" encoding="UTF-8" ?> <text>Hi There!</text> 

추가적인 설정 방법은 여기에서 확인하시면 되겠습니다.