티스토리 뷰
설명이 필요없습니다... ^^
코드를 깔끔하게 보여줍니다.
현재 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을 치환해줘야한다. 예를 들어... <는 < 와 같이 수정한다.
<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 /> 사용
예제 - <script /> 사용
SyntaxHighlighter 3.0
http://alexgorbatchev.com/SyntaxHighlighter/
코드를 깔끔하게 보여줍니다.
현재 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을 치환해줘야한다. 예를 들어... <는 < 와 같이 수정한다.
<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/
반응형
댓글