Showing posts with label syntaxhighlighter. Show all posts
Showing posts with label syntaxhighlighter. Show all posts

2009/10/26

블로그의 소스 문법강조 스크립트 SyntaxHighlighter 2.1.364 Released!!

SyntaxHighlighter 는 웹페이지의 프로그램 소스를 아주 보기 좋게 문법강조해 주는 스크립트로 현재 블로그에도 사용하는 스크립트 인데 오랜만에 가 업데이트 되었다.


이번 버전에서는 ColdFusion brush가 추가 되었고 많은 버그가 수정되었다.


자세한 변경 사항은 프로젝트 사이트를 참고하면 된다.


SyntaxHighlighter

SyntaxHighlighter:Changes:2.1.364

SyntaxHighlighter:Hosting
Original Post : http://neodreamer-dev.tistory.com/338
Posted by at No comments :
Labels: , , ,

2009/03/02

SyntaxHighlighter 2.0.296 Released!!

이번 버전에 수정된 내용.
    # Added "current" to published folder which always points to latest version.
    # Added rollover to the copy to clipboard button.
    # Fixed OSX specific line wrapping image issue.
    # Switched to LGPL v3.

SyntaxHighlighter project

2009/02/04 - [Com. Story/Tips] - Tistory에 SyntaxHighlighter 2.0 적용하기
Original Post : http://neodreamer-dev.tistory.com/258
Posted by at No comments :
Labels: , , ,

2009/02/11

SyntaxHighlighter 2.0.287 Released!!

얼마전 2.0 버전 (278) 버전을 발표한 SyntaxHighlighter 가 버전업을 하였다.

이번 버전에 수정된 내용.
    * Added 'c#' alias to C# brush.
    * Fixed blogger double lines style error.

2.0 버전 부터는 프로젝트 웹페이지를 새로 단장하면서 Hosting 까지 지원을 하여서 보다 쉽게 SyntaxHighlighter를 적용할 수 있을 뿐만 아니라 업데이트또한 쉬워졌다.
참조 경로만을 바꾸는 것으로 업데이트를 할 수 있다.

SyntaxHighlighter project

2009/02/04 - [Com. Story/Tips] - Tistory에 SyntaxHighlighter 2.0 적용하기


Original Post : http://neodreamer-dev.tistory.com/251
Posted by at No comments :
Labels: , ,

2009/02/04

Tistory에 SyntaxHighlighter 2.0 적용하기

2.0이 발표되고 내용을 살펴 보았다.



뭐가 크게 바뀌었나 설치를 해 보고 싶었는데 기존 1.5.1 버전을 삭제하고 다시 할 경우 호환이 되는지를 먼저 파악해야 했다. 2.0으로 업데이트 하면서 기존의 글들을 수정해야 된다면 여간 큰일이 아닐 수 없기 때문이다.

다행이 2.0에서 하위 호환성을 지켜주고 있었다. 1.5 버전을 위한 shBrushBash.js 를 포함시켜주고 이전의 Highlighter 적용 코드를 추가 해 주면 된다. 그에 대한 자세한 내용을 이 글 마지만에 다시 언급 하겠다.



우선 2.0 을 Tistory에 적용하는 방법은 두 가지가 있다.

소스 코드를 직접 올려서 적용하는 방법과 SyntaxHighlighter Project 페이지에서 호스팅하는 소스를 호출해 주면 된다.



먼저 소스 코드를 직접 올리는 방법이다.

SyntaxHighlighter 2.0 소스를 다운로드 받아서 scripts 와 styles 폴더의 모든 파일을 스킨 편집의 직접 올리기를 통해 업로드 한다.



scripts 와 styles 폴더의 파일 구성 보기



그리고 스킨의 HTML/CSS 소스 수정에서 Head tag 를 닫기 전에 아래의 코드를 추가해 준다.



<head>
:
    <script type="text/javascript" src="images/shCore.js"></script>
    <script type="text/javascript" src="images/shLegacy.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="styles/shCore.css">
    <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css">
    <script type="text/javascript">
        SyntaxHighlighter.all();
    </script>
</head>




이제 SyntaxHighlighter 를 사용할 준비가 되었다.



다음으로 SyntaxHighlighter project 페이지에서 제공하는 호스팅 서버에서 소스를 받아 사용하는 방법이다. 파일을 직접 올리기 귀찮은 사람은 이 방법이 더 편할 것이다.



호스팅 주소는 http://alexgorbatchev.com/pub/sh/[VERSION] 이고 현재 마직막 버전은 2.0.278 으로 정확한 주소는 http://alexgorbatchev.com/pub/sh/2.0.278/ 이다.

따라서 javascript 주소를 베이스를 위의 주소로 설정해 주면 된다.



<head>
:
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shCore.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.278/styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.278/styles/shThemeDefault.css"/>
    <script type="text/javascript">
        SyntaxHighlighter.all();
    </script>
</head>






그리고 아래 코드로 테스트 해 본다.



<pre class="brush: js">
    alert("Hello world");
</pre>






위의 코드는 2.0에서 지원하는 코드이지만 tistory 에서는 1.5 버전에서 사용하던 방식인 TEXTAREA 태그를 활용하는 것이 HTML 편집과 위지윅 편집을 번갈아 가면서 편집하는데 더 편하다.

<textarea name="code" class="js" rows=3 cols=30>
    alert("Hello world");
<textarea>




마지막으로 1.5.1 버전으로부터 업그레이드할 경우 몇 가지 알아 두어야 할 사항이 있다.



1.5.1 버전을 사용할 때 작성한 코드가 실행 되게 하기 위해서는 brush Script 중에서 shLegacy.js 를 호출 해 주어야 하고 BODY 태그의 OnLoad 에 Syntax Highlighter 를 적용하는 코드를 추가해 주어야 한다.



<head>
:
:
    <script type="text/javascript" src="images/shLegacy.js"></script>
:
:
</head>
<body OnLoad="dp.SyntaxHighlighter.HighlightAll('code');">




그리고 Brush Alias 가 바뀐 내용도 알아 두어야한다. 이전에 Brush Alias로 class="c++" 나 class="c#" 을 사용했을 경우 "cpp" 와 "csharp" 으로 바꾸어 주어야 한다. 자세한 내용은 아래 페이지를 참고 하면 된다.


1.5 버전의 지원 언어와 Alias : http://code.google.com/p/syntaxhighlighter/wiki/Languages

2.0 버전의 지원 언어와 Alias : http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
Original Post : http://neodreamer-dev.tistory.com/248
Posted by at No comments :
Labels: , , ,

SyntaxHighlighter 가 업데이트 버전(2.0) 을 발표 하였다.

이전 버전은 1.5.1 버전 이였고 새롭게 프로젝트 페이지를 만들고 2.0을 발표 하였다.


SyntaxHighlighter 는 소스코드를 웹페이지 상에서 상당히 보기 좋게 출력해 준다. 아래 이미지는 1.5.1 버전이 적용된 모습니다.


SyntaxHighlighter 1.5.1

SyntaxHighlighter 1.5.1



새로운 2.0 버전은 새로운 기능이 추가도 UI의 변화가 생겼다.

SyntaxHighlighter 2.0

SyntaxHighlighter 2.0



상당의 코드보기, 복사, 인쇄 기능이 플래시에서 이미지로 바뀌고 오른쪽 구석으로 이동 하였다.


새롭게 추가된 기능은 pre tag에 property 형태로 highlight 지원이 추가 되고 가로 방향의 스크롤바가 생성되지 않도록 줄넘김 기능이 추가 되었다.


아래는 SyntaxHighlighter 사이트에서 발췌해 온 1.5 와 2.0 과의 비교 자료이다.





프로젝트 페이지를 새단장 하면서 SyntaxHighlighter Hosting 도 지원하여 어디서나 쉽게 사용할 수 있게 되었다. 그에 대한 내용은 정리를 하여 다시 올릴 계획이다.


SyntaxHighlighter project site
Original Post : http://neodreamer-dev.tistory.com/247
Posted by at No comments :
Labels: ,

2008/01/05

티스토리에 Google Syntaxhighlighter 적용하기

블로그를 개발과 관련한 글이 주로 올리려 하기 때문에 아무래도 소스코드를 올리는 일이 많겠고 보다 이쁘고 보기 좋게 하려면 소스코드에 색상을 입힌 syntax highlighter 가 적용이 되면 보다 더 보기 좋겠다는 생각에 티스토리에 적용을 해보기로 했다.

Syntaxhighlighter 는 구글코드에 있는게 그래도 보기 좋고 기능도 좋아 우선 적용하기로 하고 나와 같은 생각을 하는 사람이 분명 있을거란 생각에 먼저 적용을 시도한 정보를 찾아 보았다.

다행이도 먼저 시도한 분이 있어서 적용하는데 크게 힘들지 않았다.


  
//-----------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include <iostream.h>

//-----------------------------------------------------------

#pragma argsused
int main(int argc, char* argv[])
{
    cout << "Hello World";

    return 0;
}
//-----------------------------------------------------------



Google Code Syntaxhighlighter

적용하는 방법 자세히 보기

나름대로 정리 보기

Posted by at No comments :
Labels: ,
Subscribe to: Posts ( Atom )