티스토리에서 구문강조, 적절한 개행처리 팁

웹/CMS/블로그 등 2009.05.01 09:06

티스토리에서 여러 소스코드의 구문강조를 위해 사용할 수 있는 것은 자바스크립트로 작성된 것을 이용하는 방법을 사용한다. 그러나 티스토리에선 <pre>태그로 소스코드가 삽입되는 경우 수정시마다 무한의 <br>이 생겨날 수가 있고, 또한 편집기와 소스코드의 br태그가 사용되는 경우 적절한 처리가 필요하다.

이러한 처리에 곤란한 점에 추가하여 여러 HTML 태그를 티스토리에서 글이 저장시 직접 입력되는 것이 아니라, 브라우저에 따른 특성을 갖는 모습이 있는 것 같다. MSIE에서는 대문자로 태그가 만들어지고, 파이어폭스에서는 소문자로 만들어지며 br태그에서는 empty tag로 파이어 폭스는 />로 마감되지만, MSIE에서는 그러하지 않다.

여기서는 SyntaxHighlighter 2.0을 사용하였고, MSIE7과 FF3, 크롬에서 확인하였다. 또한 이러한 처리를 위해서 jQuery를 이용하였다. jQuery를 사용하지 않고 직접 작성하려는 경우, 약간의 설명이 될 수 있는 다음의 주석이 같이한 소스내용을 참고하시기를 바란다.

해결

해결방법은 간단하다. 일단 편집기에서 코드 입력시만 직접 pre태그를 사용하지 않아야겠다. 물론 기존에 <pre>태그로 사용하여 작성한 것들을 고칠 필요는 없다. 사실 작성후 구문강조가 필요한 블로그글을 보는 경우에서 처리전에 이를 pre로 변환하기만 하면 된다.

여기서는 그저 툴바에서 제공되는 blockquote(인용) 태그로 작성에 사용하며, 이 태그에서 사용된 클래스명을 확인해 pre로 구문강조된 태그로 변환할지 확인한다. 이때 검토하는 클래스명은 pre에서 사용하는 클래스명과 동일하다. 처리할 내용에서 브라우저에 따른 경우의 수에 따라 적절히 br태그를 처리하고 다시 pre로 출력한다.

/* SyntaxHighlighter 사용부분 */

SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
SyntaxHighlighter.all();

/* jQuery 부분 */

jQuery.noConflict(); // 다른 라이브러리와 충돌을 방지한다.
jQuery(document).ready(function(){ // 문서가 모두 읽힌 후에 다음을 실행
   jQuery("blockquote").each( function() { //blokquote가 사용한 태그
      if (jQuery(this).attr('class').substr(0,5)=='brush')
      // 그중 클래스명이 brush로 시작하는 것을 찾아 적용
      {
      var temp = jQuery(this).html(); // 내용 복사
temp = temp.replace(/\n/gi, "");
temp = temp.replace(/<BR>/gi, "\n");
temp = temp.replace(/<BR \/>/gi, "\n");
      temp = '<pre class="'+ jQuery(this).attr('class') + '">'+temp+'</pre>'
      jQuery(this).after(temp);
      // 뒤에 새 작성된 pre태그로 붙인다.
      jQuery(this).remove(); // 기존의 인용태그 삭제
      }
   });
});

알려진 오류

티스토리 스팸ㆍ불펌방지 callback(저작권표시) 플러그인과 충돌이 있다. 아래 예제를 그대로 사용하는 경우 이 플로그인을 꺼야 한다. 같이 사용하는 경우 변환된 소스코드에 종종 삽입되는 오류가 있다. (차후 여유시 해결방법을 찾아보겠다, 또한 굳이 jQuery없이 새로 작성해보겠다.)

변경내역

2009-05-03 : pre에서 작성된 내용의 개행(\n)과 br사이 문제 해결

티스토리의 HTML 편집 및 소스코드 작성방법

1. 파일 업로드와 스킨 HTML 편집

jQuery(파일1개) 와 SyntaxHighlighter 2.0의 js및 그림과 css 파일을 티스토리에 업로드한다. 티스토리에서는 디렉토리 변경이나 수정할 수 없으며 자동적으로 images/이하의 디렉토리로 들어가진다.

블로그의 관리자메뉴에서 스킨의 html부분을 직접 head태그 부분에 아래와 같이 추가하여 수정한다. jQuery는 버전등에 따라 파일명이 다를 수 있으니 파일명을 확인한다.

<script type="text/javascript" src="./images/jquery-1.3.2.min.js"></script>


<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>

<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">

<script type="text/javascript">

/* SyntaxHighlighter 사용부분 */

SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
SyntaxHighlighter.all();

/* jQuery 부분 */

jQuery.noConflict(); // 다른 라이브러리와 충돌을 방지한다.
jQuery(document).ready(function(){ // 문서가 모두 읽힌 후에 다음을 실행
   jQuery("blockquote").each( function() { //blokquote가 사용한 태그
      if (jQuery(this).attr('class').substr(0,5)=='brush')
      // 그중 클래스명이 brush로 시작하는 것을 찾아 적용
      {
      var temp = jQuery(this).html(); // 내용 복사
temp = temp.replace(/\n/gi, "");
temp = temp.replace(/<BR>/gi, "\n");
temp = temp.replace(/<BR \/>/gi, "\n");
      temp = '<pre class="'+ jQuery(this).attr('class') + '">'+temp+'</pre>'
      jQuery(this).after(temp);
      // 뒤에 새 작성된 pre태그로 붙인다.
      jQuery(this).remove(); // 기존의 인용태그 삭제
      }
   });
});
</script>

2. 작성 및 테스트

소스코드는 티스토리 블로그의 인용(blockquote)를 통해 작성한후, HTML로 가서 <blockquote 부분에 적절한 brush명을 클래스에 넣으면 된다.

예 html인 경우

<blockquote class="brush: html">

참고, Brush 목록

분류	사용가능 brush명	필요 파일
Bash/shell	bash, shell	shBrushBash.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js