티스토리 뷰

개발

SyntaxHighlighter 3.0

달리는개발자 2011. 10. 26. 22:33
설명이 필요없습니다... ^^
코드를 깔끔하게 보여줍니다.
현재 Apache, Aptana, Mozilla, Yahoo, Wordpress, Bug Lab, Freshbooks 등에서 사용한다고 하네요

설치
1. shCore.js 와 shCore.css 파일을 추가합니다.
2. 원하는 Brush를 선택합니다. JavaScript 코드를 보여주고 싶으면 shBrushJScript.js를 추가합니다.
3. shCore.css와 shThemeDefault.css를 Include 합니다.
4. <pre />나 <script /> 로 코드를 만든다.

<pre />를 사용하는 방법
장점 : script 사용을 못하는 곳에서 사용할 수 있고 모든 RSS reader 보여진다.
단점 : HTML을 치환해줘야한다. 예를 들어... <는 &lt; 와 같이 수정한다.

<script />를 사용하는 방법
장점 : CDATA 안쪽에 넣은 어떤 것도 치환이 필요없다.
단점 : RSS reader에서 <script /> 태그를 제거하기 때문에 블로그에서 사용할 때에는 <pre />를 사용하는 것이 좋습니다. 꼭 </script> 태그를 붙여야 정상적으로 보입니다.

다음과 같이 class를 지정하시면 됩니다.
<pre class="brush: javascript"> 코드 </pre>
<pre class='brush: php; highlight: [5, 15]; html-script: true'> 코드 </pre>
<script type="syntaxhighlighter" class="brush: javascript"> 코드 </script>
<script type="syntaxhighlighter" class='brush: php; highlight: [5, 15]; html-script: true'> 코드 </script>

예제 - <pre /> 사용
<!-- Include required JS files -->
<script type="text/javascript" src="js/shCore.js"></script>
<!--    At least one brush, here we choose JS. You need to include a brush for every    
        language you want to highlight-->
<script type="text/javascript" src="css/shBrushJScript.js"></script> 
<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
<!-- You also need to add some content to highlight, but that is covered elsewhere. -->
<pre class="brush: js">
function foo(){}
</pre>
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">    
    SyntaxHighlighter.all()
</script>

예제 - <script /> 사용




SyntaxHighlighter 3.0
http://alexgorbatchev.com/SyntaxHighlighter/



반응형
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함