티스토리에 코드 예쁘게 삽입하는 방법

2017.02.02 00:12

프로그래밍 코드 포스팅하기

티스토리에 HTML과 CSS 혹은프로그래밍 관련 코드를 포스팅 하다 보면, 프로그래밍 소스코드를 에디터로 표현하는 것이 여러모로 불편하고 가독성도떨어진다는 점은 해본 사람은 누구나 공감할 것입니다. 예전 포스팅에서SyntaxHighlighter 글을 찾았는데 추가 내용이 있어 수정 글 올립니다.

우선 프로그래밍 코드를 예쁘게 포스팅 하는 방법에는 2가지가 있습니다. 하나는 colorscripter 웹페이지에서 변환하여 포스팅에 붙여 넣는 방법이고, 다른 하나는SyntaxHighlighter라는 오픈소스 자바스크립트를 블로그에 넣어서 그때 그때 pre태그로 포스팅에서 삽입하여 사용하는 방법입니다.

colorscripter

colorscripter의 사용법은 쉽습니다. https://colorscripter.com/ 웹페이지에 접속해서 코드를 붙여넣고 우측하단의 '클립보드 복사' 버튼을 눌러서 복사한 다음 포스팅 내에 붙여 넣으면 끝.

SyntaxHighlighter

많은 분들이 잘 알고 계시듯이, 프로그래밍 구문을 강조하는 일반적인 방법으로 신택스하이라이터(SyntaxHighlighter)라는 오픈소스 자바스크립트를 많이들 이용합니다. 공식 웹사이트 주소는 http://alexgorbatchev.com/SyntaxHighlighter/ 입니다.

해당 웹사이트를 방문해서 오늘자 최신 파일인 syntaxhighlighter_3.0.83.zip 파일을 우측의 다운로드 섹션에서 다운로드 받습니다. 귀찮은 분들을 위해서 포스팅 해당 파일 syntaxhighlighter_3.0.83.zip 첨부해 놓습니다. 시간이 많이 경과 되었다면 웹사이트에서 최신 파일을 다운로드 받으시길 바랍니다.

설치

신택스하이라이터를 티스토리에 사용하기 위해서는 다음과 같은 몇 가지 작업이 필요합니다.

다운로드 받은 압축 파일을 푼 다음 티스토리에 styles와 scripts, src폴더의 파일들을 모두 업로드 합니다. 나중에라도 속도를 위해서 안 쓰는 파일들은 지우면 되지만 지금은 설명의 편의상 모두 업로드 합니다.

티스토리 관리자 모드로 들어가서 html편집 창에서 head태그 닫기 전에 다음의 코드를 붙여 넣습니다.

<scripttype="text/javascript"src="./images/shLegacy.js"></script>
<scripttype="text/javascript"src="./images/shBrushBash.js"></script>
<scripttype="text/javascript"src="./images/shBrushCpp.js"></script>
<scripttype="text/javascript"src="./images/shBrushCSharp.js"></script>
<scripttype="text/javascript"src="./images/shBrushCss.js"></script>
<scripttype="text/javascript"src="./images/shBrushDelphi.js"></script>
<scripttype="text/javascript"src="./images/shBrushDiff.js"></script>
<scripttype="text/javascript"src="./images/shBrushGroovy.js"></script>
<scripttype="text/javascript"src="./images/shBrushJava.js"></script>
<scripttype="text/javascript"src="./images/shBrushJScript.js"></script>
<scripttype="text/javascript"src="./images/shBrushPhp.js"></script>
<scripttype="text/javascript"src="./images/shBrushPlain.js"></script>
<scripttype="text/javascript"src="./images/shBrushPython.js"></script>
<scripttype="text/javascript"src="./images/shBrushRuby.js"></script>
<scripttype="text/javascript"src="./images/shBrushScala.js"></script>
<scripttype="text/javascript"src="./images/shBrushSql.js"></script>
<scripttype="text/javascript"src="./images/shBrushVb.js"></script>
<scripttype="text/javascript"src="./images/shBrushXml.js"></script>
<linktype="text/css"rel="stylesheet"href="./images/shCore.css">
<linktype="text/css"rel="stylesheet"href="./images/shThemeDefault.css">
<scripttype="text/javascript">
SyntaxHighlighter.all();
</script>
cs

사용 방법

원하는 포스팅의 HTML 코드 자리에 아래의 구문을 삽입하면 됩니다.

<PREclass="brush:js;">삽입코드</PRE>
cs

코드 종류에 따라서 js(java script), cpp(c++), php(php), html(web)등의 브러쉬 이름을 바꿔서 넣으면 해당 스타일로 표시가 됩니다.

SyntaxHighlighter 사용법 정리

요약하면 웹사이트에서 zip파일을 다운로드 받아서 압축 푼 파일들을 티스토리의 image 폴더에 업로드 하고 html 코드의 head 말미에 위의 코드를 삽입한다. 이제 포스팅 하는 글에서 원하는 코드를 PRE 태그로 감싸서 기입하면 끝.

어느것이나은가?

colorscripter가 간편해서 좋긴한데, 뭔가 추가로 글들이 포함되기도 하고 해당 서비스가 없어지면 문제가 발생할 수 있을까 하는 염려도 생기기도 하고 괜한 걱정을 하게하네요. SyntaxHighlighter는 속도가 좀 느려질것같고 코드 넣는것도 좀 번거로와 보이기는 하지만 내가 온전히 모든걸 갖고 있고 수정할 수 있다는 점이 좋습니다.

아. SyntaxHighlighter에서 추가로 프로그래밍 구문을 달리하고 싶은 분은 shBrushJScript.js 같은 브러쉬 이름을 변경하면 됩니다. 또 테마를 변경하고자 하는 경우에도 shCoreDefault.css 대신 shThemeMDUltra.css와 같은 다른 테마를 선택하면 되고요. 여기까지 티스토리에서 소스코드 넣는 방법을 살펴 보았습니다.

신고

댓글이 1개 달렸습니다.

관심분야

분류 전체 (1572)
티스토리 공부 (65)
잉고래 (477)
컴퓨터 (162)
문화연예 (173)
먹고 놀기 (76)
정보 (608)

블로그 방문수

  • 전체 : 6,895,420
    오늘 : 220
    어제 : 1,499
Statistics Graph

티스토리 툴바