티스토리에 Syntax Highlighter 2.0 적용하는 방법
블로그 관련 to-do 리스트에서 공지한 사항 중 하나인 Syntax Highlighter 2.0을 티스토리에서 적용하는 방법입니다.
많은 분들이 관련 글을 올려주셨는데, 이상하게 한 가지는 모두들 빠뜨리시더군요. 그 부분을 포함해서 설명하겠습니다.
우선 2.0이 기존의 1.5.1에 비해 바뀐 부분은 아래와 같습니다.
2. 지정된 행의 강조
3. 자동 줄넘김 기능
4. XHTML 표준 준수
이 과정에서 형식이 약간 변경되었습니다.
<pre name="code" class="html">의 형식에서 <pre class="brush:html;">의 형식으로 변경되었습니다.
2. 실행 함수 이름과 위치의 변경
dp.SyntaxHighlighter.HighlightAll('code'); 가 html의 마지막에 위치하는 것에서
SyntaxHighlighter.all(); 가 html의 헤더에 위치하는 것으로 변경되었습니다.
(1.5 시절에 입력된 내용을 위해 호환 모드도 지원합니다)
3. <pre>, <textarea> 에서 동작되던 것이 <pre>에서만 동작하도록 변경
<pre>에서만 동작되며, <textarea> 등의 다른 태그에서 동작시키려면 별도로 지정해야 합니다.
설치 및 사용법은 아래와 같습니다.
1. 관련 파일의 설치
SyntaxHighlighter20_bugpatched.zip이 파일에는 SH 2.0의 기본 언어 외에 AviSynth 스크립트 및 MSX 베이식 언어 파일이 포함되어 있습니다.
2. 스킨의 수정
<script type="text/javascript" src="./images/shCore.js"></script>주목해야 할 부분은 16행의 ~bloggerMode = true;입니다.
<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/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushMsx.js"></script>
<script type="text/javascript" src="./images/shBrushAvs.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeViolet.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
SyntaxHighlighter.all();
</script>
</head>
티스토리의 위지윅 화면에서 코드를 입력하면 각 행의 끝에 <br> 태그가 삽입되는데, 대부분의 포스트에서 이 <br> 태그를 지우라고 적었더군요.
그런데, 이와 같이 설정하면 각 행의 <br>을 자동으로 엔터로 변환합니다.
즉, 위지윅 화면에서 코드만 입력하는 것으로 충분하단 얘기입니다.
(이 내용이 앞에 적은 다들 빠뜨린다는 바로 그 부분입니다)
만약 새롭게 2.0을 사용하는 것이 아니라 1.5를 사용하시던 분이라면 스킨 맨 마지막 부분에 아래 내용을 추가해야 합니다.
<script type="text/javascript">이 코드는 기존 방식으로 입력된 내용을 2.0의 방식으로 내부적으로 호출해주는 코드입니다.
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
3. 코드에 태그 추가
뒷부분에는 그냥 </pre>만 씌우면 되지만, 앞부분은 조금 신경써야 합니다.
<pre class="brush:c-sharp; highlight:[3,5];">속성값 중 highlight는 강조할 행을 표시할 떄 사용합니다.
4. 문제점
하지만, 아이러니하게도 제가 지금 사용하는 hi8ar.net님의 화이트보드 스킨에서는 정상동작을 하지 않습니다.
Categoy: 컴퓨터야그/블로그 관련
-
-
설치 한다고 위에 메인 소스 복사하는데
FF에서는 스페이스가  로 복사되네요 ㅋ
그래서 그냥 소스보기 해서 복사를 했답니다 ^^;
IE에서는 정상작동하나요?-
역시 IE...
원래 IE는 정규식으로 문자열을 치환할 때 \s (공백)을 제대로 처리하지 못하는 버그가 있습니다. (무려 IE8도 마찬가지입니다)
IE에서는 그냥 를 표시하지 않습니다. 대단한 IE씨...
두 브라우저를 위해서 코드에 약간 손을 대야 될 것 같군요...
-
-
BLUEnLIVE님의 바이올렛테마를 외부스타일 파일로 정의해놓고,,,
<PRE>~</PRE> 태그에서 호출하는 방식인 것 까진 알겠는데,,,
<PRE>태그에서 호출할 때 형식을
<PRE class=" "> 어떻게 넣어줘야 바이올렛테마로 호출하는 건지요?
계속 기본테마로 보여지네요~ OTL-
테마는 css만 지정하면 적용됩니다.
소스를 보니 제대로 되어있더군요.
실제 SH를 적용한 페이지를 찾지 못했는데, 실제 사용한 페이지를 알려주시면 확인해보겠습니다.
참, 2.0.320으로 업데이트되었습니다.
-
-
http://miriya.tistory.com/34
여기선 이상하게 코드 위에 마우스를 안올려도 우측 상단에 도구모음이 보입니다.
이건 어떻게 해결해야하나요? -
질문 1.
[quote]3. <pre>, <textarea> 에서 동작되던 것이 <pre>에서만 동작하도록 변경
<pre>에서만 동작되며, <textarea> 등의 다른 태그에서 동작시키려면 별도로 지정해야 합니다.[/quote]
별도로 지정하는 방법이 어떻게 되는지요? 제 경우는 <code>라고 따로 태그를 만들고 싶습니다. 티스토리가 xhtml 기반이므로 태그도 만들 수 있다고 알고 있거든요.
질문 2.
요 아래 댓글창 위에 보이는 아이콘으로 된 BBCode 편집 도구는 어떻게 다는 건가요? (티스토리에서는 불가능하더라도 설명을 부탁드립니다.)-
1. 선언부에 tagName이란 값을 지정하면 된다고 합니다.
아래 링크를 참조하시기 바랍니다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration
2. 그냥 "빡시게" 집어넣은 코드입니다.
textarea에 name 값 부여해서 이미지 클릭하면 삽입하도록 만들었습니다. -
예. 고맙습니다. tagName 은 자바스크립트에 대해 잘 몰라도 할 수 있는 문제이므로 당장 해야겠구요.
textarea 문제는 자바스크립트에 대해 잘 모르면 해결하기 힘든 문제로 보이므로 우선 패스해야겠네요.
-
-
-
<script type="text/javascript" src="./images/shLegacy.js"></script>
쓰면 되는거라능...
-
-
질문 있습니다.
http://tysite.tistory.com/6 여기 보시면 최신 버젼으로 적용해놨는데요
sql 은 잘 안먹는 건가요?
최신 버젼 내려서 테스트 해도 같은 결과로 나오네요
콤마를 인식 못하네요
텍스트큐브에서는 잘나오는데... -
블로그에 8086 어셈블러 (NASM) 게시하기
shBrushNasm8086.js 앞쪽에서 말한 바가 있지만, 이건 그냥 이렇게 따로 써 놓는 게 나을 것 같아서 말입니다. 1. SyntaxHighlighter를 설치합니다. 설치되어 있으면... 뭐. 그렇죠. 설치하시려면, 뭐 들보 님의 지나간 덧글에도 있지만, 블루앤라이브 님의 포스트 http://zoc.kr/547 가 큰 참고가 될 겁니다. 2. 티스토리라면, 압축을 푼 파일을 업로드하고 HTML/CSS 편집에 이런 코드를 추가하셨겠죠? <h..
오홋 한번 시간내서 설치해봐야겠습니다 +_+
매번 좋은자료 감사합니다 >_<b