이전 버전을 계속 포스팅 했었는데, br태그가 이상하게 나온다거나.. tistory에서 사용 할 때 불편한 문제점들이 이것저것 있는데.. 아래 처럼 사용하면 좀 더 편하게 사용 할 수 있습니다.
먼저 최신 버전의 SyntaxHighlighter을 다운로드 받습니다.
압축을 풀면 아래와 같이 보입니다.
관리자 화면 > 스킨 > HTML/CSS편집 > 파일 업로드에서 파일 업로드를 통해서 올려 줍니다.
추가 된 것을 확인 하시면,
관리자 화면 > 스킨 > HTML/CSS편집 > HTML/CSS편집에서 <title> 밑에 아래 코드를 추가해 줍니다.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFx.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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">
/* 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>'
temp = '<script type="syntaxhighlighter" class="'+ jQuery(this).attr('class') + '"><![CDATA['+temp+']]><\/script>'
jQuery(this).after(temp); // 뒤에 새 작성된 pre 또는 script태그로 붙인다.
jQuery(this).remove(); // 기존의 인용태그 삭제
}
});
/* SyntaxHighlighter 부분 */
SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 안 보기
SyntaxHighlighter.all();
});
</script>
jQuery는 구글의 apis에서 가져다 오도록 했습니다. 현재 최신 버전이 1.4.4입니다.
그리고, 41번과 42번 줄에 보시면, pre태그와 script태그를 둘중 하나를 선택해서 사용 하시면 되는데..
여기를 참고 하시고 선택해서 사용하세요.
저 같은 경우에는 script 태그를 선택 했습니다.
그리고 사용하는 방법은 매우 간단해 졌습니다.
텍스트 모드에서 붙여 넣기를 한 후,
인용구<Ctrl+Q>를 선택 하시면 됩니다.
그리고 HTML 편집 모드로 들어 가셔서 blockquote를 찾으셔서, 태그에 적당한 brush를 넣어 주시면, 코드가 깔끔하게 들어 갑니다.
<blockquote class="brush:html">그리고, 줄에 하일라이트를 넣고 싶거나, 상세 설정은
...
</blockquote>
- http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
지원 문법
Brush name | Brush aliases | File name |
---|---|---|
ActionScript3 | as3, actionscript3 | shBrushAS3.js |
Bash/shell | bash, shell | shBrushBash.js |
ColdFusion | cf, coldfusion | shBrushColdFusion.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 |
Erlang | erl, erlang | shBrushErlang.js |
Groovy | groovy | shBrushGroovy.js |
JavaScript | js, jscript, javascript | shBrushJScript.js |
Java | java | shBrushJava.js |
JavaFX | jfx, javafx | shBrushJavaFX.js |
Perl | perl, pl | shBrushPerl.js |
PHP | php | shBrushPhp.js |
Plain Text | plain, text | shBrushPlain.js |
PowerShell | ps, powershell | shBrushPowerShell.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 |
참고 사이트
- http://techbook.tistory.com/entry/tistory-highlight : jQuery 부분은 여기의 내용을 참고 했습니다. 감사합니다.
이 포스팅에 사용된 버전
덕분에 잘 설치했습니다. 감사합니다.
그런데, 버전이 올라가면서 스크롤바가 자동적으로 생긴 것인가요? ^^a
답글
혹시.. 크롬을 쓰시나요?
크롬에서는 상하 스크롤바가.. 생기더라구요.. ^^;
네.. IE로 보니 상하 스크롤바는 없어지네요^^
좌우 스크롤바는 어쩔 수가 없나보군요..
안녕하세요? 좋은 내용의 포스팅 감사 드립니다.
저는 위의 방법 진행하여도 적용이 되지 않는데 어떻게 원인을 찾아야 할지 모르겠습니다.
1. 알려주신 코드를 복사하여 <title> :: </title> 밑에 붙여 놓았고.
2. 혹시 파일이 업로드 되지 않았나 싶어서거 알려주신 코드에서 사용된 jss 및 css 화일이 제대로 업로드 되었는지도 직접 확인도 하였습니다.
3. 현재 작업한 브라우저는 크롬입니다.
혹시 여유가 되시어 함께 고민해 주시면 감사드리겠습니다.
(만약 함께 고민해 주신다면 어떤 정보를 더 알려 드려야 하나요??)
답글
흠.. 코드에서는 별 이상이 없어 보이네요 ^^;;
쓰실때
<pre class="bursh:html">
...
</pre>
이런식으로 테스트를 한번 해 보세요..
혹시 jquery 부분이 잘 동작하지 않을 수도 있을꺼 같아서..
잘 되었으면 좋겠네요.
감사합니다.
본 포스팅에는 나와 있지 않지만 공식 홈페이지에 가면 </body> 태그 위에 <script type="text/javascript">
SyntaxHighlighter.all()
</script> 이 부분이 들어가야 합니다.
답글
여기서는 자바스크립트에서 jquery를 사용하고 있습니다.
jQuery(document).ready(function(){}
여기서 이 함수 안에
SyntaxHighlighter.all()
를 넣어 주면, 페이지의 렌더링이 끝난 후에 실행이 되게 됩니다.
덕분에 /body 위에 넣지 않아도 괜찮습니다.
안심하고 사용하세요.
좋은 지적, 감사합니다.
그렇군요.. 저도 위의 JQuery관련 함수를 모두 입력하고 SyntaxHighlighter.all() 도 모두 호출했는데
적용이 되지 않더라구요. 그래서 방법을 찾다가 /body 태그위에서 호출하니까 되더라구요^^ 크롬을 사용하고 있습니다.^^
답글
흠.. /body위에 올리는 방법도 맞기는 한데.. 그건 로딩의 제일 끝에다 넣어서 파싱하다가.. 실행하는 방법이라서..
개인적인 의견으로는 jqeury에서의 jQuery(document).ready(function(){}안에 넣고.. 페이지 렌더링이 끝난 후에 실행 하도록 하는데.. 맞다고 생각합니다.
그런데, 잘 되질 않으신다고 하니.. ㅜ.ㅜ
뭐라 드릴 말씀이 없네요.
참고로 전 파폭과 크롬을 둘다 사용하고 있습니다.
어쩌다 보니.. 용도별로 사용하게 되었네요 ^^;
안녕하세요 신텍스하이라이트 관련글을 검색하다가 트랙백달고 갑니다.^^
전 3.0.83버전을 다운받아 블로그에 적용시켜보았는데 나오질 안더군요..
그래서 구 버전 2.1.382버전을 사용하는데 IE에서는 C언어 코드가 대문자로 보이고 크롬에선 소문자로 보이더군요..
혹시 3.0.83 버전이 2.1.382 버전에서 바뀐게 뭐가 있는 지 궁금하군요..
답글
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html
변경 사항은 여길 보시고 참고 하시면 될 것 같습니다.
전 버전에 따라서 잘 안 된 적이 없었는데..
뭐가 문제인지 궁금하네요 6^^
SyntaxHighlighter 설정 잘 보고 갑니다.^^ 반나절을 이걸로 고생하며 보냈네요. 제 경우는 위와 같이 세팅했는데 계속 안되다가 </body>위에
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
추가하구요. 그래도 안되어서 보니까
<pre class=brush: java> 여기서 pre를 대문자로 바꾸니까 되는군요.ㅠㅠ
대소문자 구분. 그리고 </body>위에 추가 한 내용 지우니까 또 안되고 결국엔 두부분을 변경해서 잘 사용하고 있습니다. 혹시 안되시는 분 PRE 대문자로 사용해 보세요^^ 좋은 글 감사드립니다.
답글
덕분에 잘 설치하고 갑니다ㅎㅎ 아직 테스트는 안해봤지만 잘 될 것 같군요 ㅠ_ㅠ 문제가 생기면 여쭤보러 다시 오겠습니다~^^
답글
흠.... 저도 myskan님처럼 아무것도 적용이 안되다가
위에 머핀스토리님 댓글 보고 </body> 위에
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
입력하니 적용이 되는군요..
저는 pre를 대문자로 해주지는 않았습니다;;
브라우저는 크롬입니다.
너무너무 감사합니다.
; 되어 있는데요..
; 이렇게 변경을 해야 정상 작동이 되네요..
예전에 2.X 버전도 잘보고 갔는데.. 이렇게 3.X 버전까지 설명해주시니 너무너무 감사합니다.
그런데.. 여기 있는 소스 그대로 하면 작동이 되나요?
저는 외 작동이 안될까요?? 그래서 고민하다가 보니 아래와 같이 변경하니 작동되네요...
42 번째 줄에 temp = temp.replace(//gi, "\n"
temp = temp.replace(/<BR>/gi, "\n"
그리고,
44 번째 줄에 temp = '<pre class="'+ jQuery(this).attr('class') + '">'+temp+'</pre>' 되어 있는데요.
temp = '<pre class="'+ jQuery(this).attr('class') + '">'+temp+'</pre>'; 마지막 부분에 ';' 을
해줘야 하는거 아닌가요??
그리고,
45 번째 줄을 지우고 44번째 주석을 풀어서 해도, pre 나 blockquote 2개다 작동이 되는데요..
저만 그런건가요???? 댓글에 오류났다는 분이 아무도 없어서요...
답글
아.. 좋은 지적 감사합니다.
SyntaxHighlighter.config.stripBrs = true;
제거 옵션중에서 BR 태그를 제거 하라고 해 뒀었는데..
그것 때문에 br이 출력이 되지 않고 있었네요 ^^;;
이런...
그리고 44째줄은 주석입니다.
45번째 줄과 필요하신 부분을 선택해서 쓰시라는 의미에서 해 놓은 겁니다.
실행에는 아무런 영향도 미치지 않습니다.
감사합니다.
c언어 코드를 <pre>테크를 이용하여 작성하니 for루프에서 깨짐현상이 발생하는 군요. 혹시 SyntaxHighlighter 자체의 문제인가요?
답글
퍼가겠습니다.
출처 밝히고요. 감사합니다.
궁금한건 다시 올께요.. ^^
답글
감사합니다.
퍼갈께요~^^
답글
ㅠㅠ 저는 잘 안되요 ㅠㅠ
1.X도 2.X도 3.X도 ㅠㅠㅠ
도와주세요 ㅠㅠㅠㅠㅠㅠ
답글
test라고 제일 최신글 남겼는데 안되용 ㅠㅠ
아에 코드가 안보이는 묘한 현상이!
아삼님 블로그에 가서 확인해 봤는데..
설정에는 별 이상이 없었습니다.
혹시 모르니, 스킨을 바꿔서 시도해 보세요.
출처 남기고 퍼가겠습니다 ^^
답글
아 저는 인용구 이용시
;
;
<br>이 안들어가고
<p></p>로 자동으로 감싸지네요 ㅠㅠ
그래서 이렇게 바꿨습니다.
temp = temp.replace(/<p>/gi, "\n"
temp = temp.replace(/<\/p>/gi, ""
근데 가끔 그 안에 font 태그도 자동으로 들어가버리더라고요 ㅡㅡ
font태그는 어떻게 지울수 있을까요?
답글
temp = temp.replace(/<font[^>]*>/gi, ""
;
;
temp = temp.replace(/<\/font>/gi, ""
정규식으로 해결했네요 ㅜㅜ
저는 왜 띄어쓰기가 안대죠???
텍스트 모드에서 인용구 넣고, html가서 class ="brush:cpp"로 하고,
html에다가 소스코드 붙였는데요;;
띄어쓰기가 한개도 안되요. 그리고 header 선언부가 끝에 일케.
#include <stdio.h>#include <list>using namespace std;int main(){ list ptr;}</list></stdio.h>
이상하게 나와요 ㅠㅠ
답글
html 편집 모드가 아닌 일반모드에서
붙여 넣기 해 보세요.