2013년 2월 27일 수요일

[정보] 구글 블로그(Blogspot)에 Syntax Highlighter 적용하기

구글 블로그에 소스 코드를 올리면, 그냥 Text 형식으로 된다. 소스에 컬러를 주고 예쁘게 꾸며 주고 싶은데 잘 안되어, 이미지로 캡쳐를 해서 올리곤 했다. 다른 블로그에는 예쁘게 잘 나오는 것을 보아 방법이 있을텐데....

역시 찾아보니 답이 있다.

어떤 이들은 SyntaxHighlighter_1.5.1 버전의 파일을 다운 받아, 파일을 업로드 하여 연결하여 쓰기도 하는 것 같다. 티스토리의 경우가 잘 되는 것으로 보이는데, 구글 블로그는 잘 안되어서 이상하긴 하다.

다른 방법을 찾아보니, 또 다른 블로그를 발견!

그대로 따라하니, 잘 된다.

1. 내 블로그의 템플릿 화면으로 들어간다.
  * 사용중인 디자인의 HTML 편집을 선택한다.
2. SyntaxHighlighter.css 파일의 내용을 추가한다.
  * 추가 위치는 <b:skin></b:skin> 사이에 하면 된다.
  * 아래는 SyntaxHighlighter.css 파일의 내용이다.

 
3. Javascript 파일들을 가져오기 위해 아래 코드를 추가한다.
  * 추가 위치는 <head></head> 사이에 하면 된다.

4. 그 다음 아래 코드들을 추가한다.
  * 추가 위치는 <body></body> 사이에 하면 된다.

5. SyntaxHighlighter 적용을 위한 작업은 다 되었다.
  * 글쓰기를 할 때, HTML 화면에서 pre 태그나 textarea 태그를 이용하여 소스 코드를 올리면 된다.

<예제>



6. 참조사이트
  * anshNote 블로그 : http://anshnote.blogspot.kr/2011/07/syntax-highlighter-blogger.html

댓글 3개: