티스토리에서 구문강조, 적절한 개행처리 팁
웹/CMS/블로그 등 2009.05.01 09:06이러한 처리에 곤란한 점에 추가하여 여러 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사이 문제 해결
1. 파일 업로드와 스킨 HTML 편집
jQuery(파일1개) 와 SyntaxHighlighter 2.0의 js및 그림과 css 파일을 티스토리에 업로드한다. 티스토리에서는 디렉토리 변경이나 수정할 수 없으며 자동적으로 images/이하의 디렉토리로 들어가진다.
블로그의 관리자메뉴에서 스킨의 html부분을 직접 head태그 부분에 아래와 같이 추가하여 수정한다. jQuery는 버전등에 따라 파일명이 다를 수 있으니 파일명을 확인한다.
<!-- jQuery 삽입 -->
<script type="text/javascript" src="./images/jquery-1.3.2.min.js"></script>
<!-- SyntaxHighlighter 삽입 -->
<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 |
참고, 다운로드 및 관련 정보
- jQuery : http://docs.jquery.com/Downloading_jQuery
- SyntaxHighlighter 2.0: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
- 보다 적용에 관한 친절한 설명: SyntaxHighlighter 2.X를 tistory에 적용하기.(언제나 상쾌한 기분) [티스토리 블로그]
또는 사용중인 다음의 파일
PS> 이것으로 티스토리 편집기에서 구문강조된 소스코드 작성에 곤란한 점이 많았던 사람들에게 다소 도움이 되었으면 좋겠다.
'웹 > CMS/블로그 등' 카테고리의 다른 글
티스토리에서 구문강조, 적절한 개행처리 팁 (10) | 2009.05.01 |
---|