블로거에 소스코드를 보기 좋게 올리는 법 - SyntaxHighlighter 적용

in KnowHow - on 2015/09/16 9:18 오전

근간에 Java를 배우겠다고 책을 사서 들여다 보고, 내용 정리를 해서 올리고 있는데 줄번호와 소스를 입력하면서 느낀 점이...

"예쁘지 않아!"
"시안성이 떨어져!"

였습니다.

그래서 다른 블로거들... 특히 프로그래밍을 전문으로 하시는 분들을 보니,

'오잉? 어찌 이리도 코드가 깔끔하게 보이지?'
'이미지로 캡처한 것도 아니고!'
....
'일일이 이것을 색깔을 입혀가며 작성을 했단말인가...?!'

답은, "그럴 리 없다" 였습니다.

열심히 검색을 해 본 결과, 방법을 찾았습니다.

구글에서 제공하는 SyntaxHighlighter라는 멋진 스크립트가 있더군요. 자바스크립트를 기반으로 만들어진 것인데, 이것을 블로그나 웹사이트에 적용하면 줄번호를 포함한 색깔이 알록달록 들어있는 소스코드를 간편하고 보기 좋게 할 수 있다는 사실.

나중에 이 내용을 또 찾을 날을 위해, 또한 저 처럼 이 방법을 찾는 분들을 위해 정리해 둡니다.

SyntaxHighlighter는 다음의 소스코드를 지원한다고 합니다.

Bash/shell, C#, C++, CSS, Delphi, Diff, Groovy, JavaScript, Java, PHP, Plain Text, Python, Ruby, SQL, Visual Basic, XML, HTML

/**
 * SyntaxHighlighter
 */
function foo()
{
 if(counter <= 10)
  return;
 // it works!
}

위의 소스코드 처럼 보이는 겁니다.

적용방법은 아래 코드를 일단 드래그에서 복사하시고, 블로그의 디자인=>템플릿=>HTML편집에 들어가셔서, head태그 사이에 붙여넣으시고 저장합니다.

그리고나서 본문에 pre코드를 사용해 묶어 주면 됩니다.
꼭 글쓰기 옆에 있는 HTML에서 pre태그를 넣어주세요.

그냥 글쓰기에서 하면 제대로 보이질 않더군요.

/**
 * SyntaxHighlighter
 */
function foo()
{
 if(counter <= 10)
  return;
 // it works!
}

소스에서 brush: js 라고 되어 있는 부분에 js는 자바스크립트를 의미하구요, 자바는 java로 사용하는 프로그래밍 언어의 종류를 넣어 주면 됩니다.

아래에서 사용하는 소스의 종류를 brush name에서 확인하시고, aliases를 적용하면 됩니다.

brush name / brush aliases

Bash shell / bash, shell

C# / c-sharp, csharp

CSS / css

Delphi / delphi, pas, pascal

Diff / diff, patch

Groovy / groovy

JavaScript / js, jscript, javascript

Java / java

PHP / php

Plain Text / plain, text

Python / py, python

Ruby / rails, ror, ruby

SQL / sql

Visual Basic / vb, vbnet

XML / xml, xhtml, xslt, html

Translate