소개
개발툴에서 코드를 작성을 하면 함수별로 특별하게 효과를 주고 깔끔하게 본 적이 있을 겁니다. 하지만 이를 웹에 적용 시키기란 쉽지가 않습니다. 따로 용도에 따른 HTML 태그를 직접 적용 시켜야 하는데 너무 번거롭습니다. 이를 웹에서 쉽고 자동으로 바꿔주는 스크립트 프로그램을 이 포스트에서 소개 하고자 합니다.
웹 사이트 중에 자동으로 이렇게 해주는 걸 블로그에서도 하면 좋지 않을까가 탐구의 시작이였습니다.
프로그램상에서의 태그/함수 지원
비주얼 스튜디오에서 printf 를 치면 자동으로 색깔이 빨간색이 되고 주석문(/* */ 나 // 를 하면 자동으로 녹색을 바꿔 주는 것을 확인 할수 있습니다. 또한 다른 언어들도 편집하고 도와 주는 프로그램 (IDE : Integral Development Environment 통합개발 환경) 에서 가독성을 편리 하게 도와 주기 위해서 글꼴 효과를 자동으로 입혀 줍니다.
Xilinx 9.1i ISE 에서 보시는 봐와 같이 자동으로 예약어는 파란색으로 주석은 녹색으로 처리 해줍니다.
이 효과는 코드 파일 자체에는 없지만 프로그램에서 자동으로 인식하여 변환 시켜 주는 기능을 가지고 있습니다. 이 코드를 밖으로 빼서 복사하면 일반 TEXT 이기 때문에 특별한 효과를 줄려면 프로그램 상에서 지원을 해주어야 합니다.
웹으로 올리려면 웹브라우져에서 인식을 해주면 좋을 텐데 아쉽게도 웹 브라우져에서는 기본적으로 해주지 않습니다. 이를 알아서인지 여러 좋은 프로그램(GNU Source-highlight)들 이 코드 파일을 HTML 태그를 입혀서 수동이나마 변환 시켜주는 프로그램들이 나와 있습니다.
오늘 제가 소개 해 드리는 것은 Javascript 를 사용하여 자동으로 코드에 직접 영향을 주지 않고 글꼴 효과를 입히는 역할을 웹브라우져가 할수 있게끔 도와 주는 프로그램입니다.
지원 언어
자주 쓰는 웹/컴퓨터 언어 대부분을 지원합니다.
작동 원리
main script(메인 스크립트)에서 코드를 language definition file(언어 정의 파일) 을 기반으로 분석을 하여 필요한 키워드에 stylesheet (스타일쉬트 - 글꼴 형태)에 정의된 형식을 적용합니다.
지원 브라우져
0. 우선 파일을 받습니다. 우선 3 종류의 파일이 있습니다
invalid-file
.
바로 받기 홈페이지 : http://shjs.sourceforge.net/doc/download.html
1. Javascript 와 Sytlesheet 를 계정에 올립니다.
- 다른 웹사이트나 태터툴즈도 쉽게 적용 하실수 있습니다.
- 위에서 언급한 3종류의 원하시는 언어 정의가 담긴 Javascript(자바 스크립트)와 키워드에 따라 정의된 Stylesheet(색상표)를 받습니다.
2. 업로드
- 티스토리에서는 사용자 스킨 업로드를 하면 상대 주소가 ./images 곳에 저장이 됩니다.
3. (스킨 편집 - 하나) head tag 부분에 적용 하기
- head 부분에 스크립트와 stylesheet 를 쓰는 부분에서 아래 줄을 추가 합니다.
위 예제에서는 sh_cpp.js 라는 cpp 언어 정의와 sh_nedit.css 로 적용된 색상표를 사용합니다.
4. (스킨 편집 - 둘) body tag 부분에 적용하기
- body 부분에 <body onload="sh_highlightDocument();"> 를 적용합니다.
적용 시킨 화면 입니다. 반전된 부분을 보세요.
5. 예제 코드를 작성 해 봅니다.
- pre 태그로 시작해서 /pre 태그로 마감합니다.
홈페이지에 나와 있는 결과 물입니다.
- 꺽쇄(<>) 부분은 살려지지 않습니다. 이후에 다시 수정으로 입력하면 되니깐 결과물을 꼭 확인 하시기 바랍니다.
- pre 태그 안에 있기 때문에 글꼴의 속성이 없어 집니다. 그리고 테터툴즈 고유의 keylog 기능이 작동하지 않습니다.
- 지원하는 언어에 대한 pre class 와 필요한 파일(.js 가 head 태그 부분에 포함 되어야 합니다. 예를 들어 C++ 코드를 지원하기 위해서 <script type="text/javascript" src="./images/sh_cpp.js"></script> 코드를 head 부분에 넣어 줘야 합니다.
6. 결과를 직접 확인 합니다.
7. 문제 확인
- 색상이 적용되지 않는다 : 글쓰는 곳에서 HTML 태그 모드로 작성을 해야지 편집기 모드로 작성을 하면 적용이 되지 않습니다.
- 조금 느리게 적용된다 : 웹 페이지가 다 읽은 후에 스타일을 적용하는거 같습니다.
- 편집기에서 작업한 내용에 의도하지 않은 글꼴이 적용된다 : pre class="sh_html" 또는 pre class="sh_sh sh_sourceCode" 태그가 의도되지 않게 추가 될수 있습니다.
- 다른 언어 지원 : source-highlight manual. 부분을 참조 하시고 만드신 .lang 파일을 download 부분에 있는 sh2js.pl 을 이용하여 변환 시킵니다. 이때 perl 이 필요 합니다.
예 - foo.lang 을 sh_foo.js 로 변환 합니다.
: perl sh2js.pl foo.lang > sh_foo.js
결론
- 프로그래머들에겐 이 스크립트는 snap.com 처럼 강력한 블로그 툴입니다.
참고 사이트
- SHJS - Syntax Highlighting in JavaScript
- GNU Source-highlight 2.6
- BeeJ's Guide to Network Programming
- DesyEdit 2.1 나왔습니다!! - jwmx 님
개발툴에서 코드를 작성을 하면 함수별로 특별하게 효과를 주고 깔끔하게 본 적이 있을 겁니다. 하지만 이를 웹에 적용 시키기란 쉽지가 않습니다. 따로 용도에 따른 HTML 태그를 직접 적용 시켜야 하는데 너무 번거롭습니다. 이를 웹에서 쉽고 자동으로 바꿔주는 스크립트 프로그램을 이 포스트에서 소개 하고자 합니다.
웹 사이트 중에 자동으로 이렇게 해주는 걸 블로그에서도 하면 좋지 않을까가 탐구의 시작이였습니다.
프로그램상에서의 태그/함수 지원
비주얼 스튜디오에서 printf 를 치면 자동으로 색깔이 빨간색이 되고 주석문(/* */ 나 // 를 하면 자동으로 녹색을 바꿔 주는 것을 확인 할수 있습니다. 또한 다른 언어들도 편집하고 도와 주는 프로그램 (IDE : Integral Development Environment 통합개발 환경) 에서 가독성을 편리 하게 도와 주기 위해서 글꼴 효과를 자동으로 입혀 줍니다.
Xilinx 9.1i ISE 에서 보시는 봐와 같이 자동으로 예약어는 파란색으로 주석은 녹색으로 처리 해줍니다.
이 효과는 코드 파일 자체에는 없지만 프로그램에서 자동으로 인식하여 변환 시켜 주는 기능을 가지고 있습니다. 이 코드를 밖으로 빼서 복사하면 일반 TEXT 이기 때문에 특별한 효과를 줄려면 프로그램 상에서 지원을 해주어야 합니다.
Desyedit 나 Editplus 같은 확장 메모장 프로그램에서는 이를 자동으로 인식하고 지원합니다.
웹으로 올리려면 웹브라우져에서 인식을 해주면 좋을 텐데 아쉽게도 웹 브라우져에서는 기본적으로 해주지 않습니다. 이를 알아서인지 여러 좋은 프로그램(GNU Source-highlight)들 이 코드 파일을 HTML 태그를 입혀서 수동이나마 변환 시켜주는 프로그램들이 나와 있습니다.
오늘 제가 소개 해 드리는 것은 Javascript 를 사용하여 자동으로 코드에 직접 영향을 주지 않고 글꼴 효과를 입히는 역할을 웹브라우져가 할수 있게끔 도와 주는 프로그램입니다.
지원 언어
자주 쓰는 웹/컴퓨터 언어 대부분을 지원합니다.
| Bison C/C++ C# ChangeLog CSS Diff Flex HTML |
Java JavaScript LaTeX Log files M4 Makefile Pascal Perl |
PHP Prolog Python Ruby Shell SQL Tcl XML |
작동 원리
main script(메인 스크립트)에서 코드를 language definition file(언어 정의 파일) 을 기반으로 분석을 하여 필요한 키워드에 stylesheet (스타일쉬트 - 글꼴 형태)에 정의된 형식을 적용합니다.
지원 브라우져
- Firefox 2
- Internet Explorer 6
- Internet Explorer 7
- Opera 9
0. 우선 파일을 받습니다. 우선 3 종류의 파일이 있습니다
invalid-file
번거로우시면 여길 클릭!
바로 받기 홈페이지 : http://shjs.sourceforge.net/doc/download.html
- The main script or the minified version - 기본 핵심 스크립트(JS)
- A language definition file - 언어 정의 파일(JS)
- A stylesheet (alternatives) - 정의된 스타일 시트(CSS)
1. Javascript 와 Sytlesheet 를 계정에 올립니다.
- 다른 웹사이트나 태터툴즈도 쉽게 적용 하실수 있습니다.
- 위에서 언급한 3종류의 원하시는 언어 정의가 담긴 Javascript(자바 스크립트)와 키워드에 따라 정의된 Stylesheet(색상표)를 받습니다.
2. 업로드
- 티스토리에서는 사용자 스킨 업로드를 하면 상대 주소가 ./images 곳에 저장이 됩니다.
올립니다
3. (스킨 편집 - 하나) head tag 부분에 적용 하기
- head 부분에 스크립트와 stylesheet 를 쓰는 부분에서 아래 줄을 추가 합니다.
<script type="text/javascript" src="./images/sh_main.js"></script>
<script type="text/javascript" src="./images/sh_cpp.js"></script>
<link type="text/css" rel="stylesheet" href="./images/sh_nedit.css">
<script type="text/javascript" src="./images/sh_cpp.js"></script>
<link type="text/css" rel="stylesheet" href="./images/sh_nedit.css">
위 예제에서는 sh_cpp.js 라는 cpp 언어 정의와 sh_nedit.css 로 적용된 색상표를 사용합니다.
4. (스킨 편집 - 둘) body tag 부분에 적용하기
- body 부분에 <body onload="sh_highlightDocument();"> 를 적용합니다.
5. 예제 코드를 작성 해 봅니다.
- pre 태그로 시작해서 /pre 태그로 마감합니다.
입력된 HTML 코드 입니다.
- 꺽쇄(<>) 부분은 살려지지 않습니다. 이후에 다시 수정으로 입력하면 되니깐 결과물을 꼭 확인 하시기 바랍니다.
- pre 태그 안에 있기 때문에 글꼴의 속성이 없어 집니다. 그리고 테터툴즈 고유의 keylog 기능이 작동하지 않습니다.
- 지원하는 언어에 대한 pre class 와 필요한 파일(.js 가 head 태그 부분에 포함 되어야 합니다. 예를 들어 C++ 코드를 지원하기 위해서 <script type="text/javascript" src="./images/sh_cpp.js"></script> 코드를 head 부분에 넣어 줘야 합니다.
| Language | HTML class |
|---|---|
| Bison | sh_bison |
| C/C++ | sh_cpp |
| C# | sh_csharp |
| ChangeLog | sh_changelog |
| CSS | sh_css |
| Diff | sh_diff |
| Flex | sh_flex |
| HTML | sh_html |
| Java | sh_java |
| JavaScript | sh_javascript |
| LaTeX | sh_latex |
| Log files | sh_log |
| M4 | sh_m4 |
| Makefiles | sh_makefile |
| Pascal | sh_pascal |
| Perl | sh_perl |
| PHP | sh_php |
| Prolog | sh_prolog |
| Python | sh_python |
| Ruby | sh_ruby |
| Shell | sh_sh |
| SQL | sh_sql |
| Tcl | sh_tcl |
| XML | sh_xml |
다양한 프로그램언어를 지원합니다. 이를 적당히 잘 적용해야지 필요한 효과를 얻을수 있습니다.
6. 결과를 직접 확인 합니다.
7. 문제 확인
- 색상이 적용되지 않는다 : 글쓰는 곳에서 HTML 태그 모드로 작성을 해야지 편집기 모드로 작성을 하면 적용이 되지 않습니다.
- 조금 느리게 적용된다 : 웹 페이지가 다 읽은 후에 스타일을 적용하는거 같습니다.
- 편집기에서 작업한 내용에 의도하지 않은 글꼴이 적용된다 : pre class="sh_html" 또는 pre class="sh_sh sh_sourceCode" 태그가 의도되지 않게 추가 될수 있습니다.
- 다른 언어 지원 : source-highlight manual. 부분을 참조 하시고 만드신 .lang 파일을 download 부분에 있는 sh2js.pl 을 이용하여 변환 시킵니다. 이때 perl 이 필요 합니다.
예 - foo.lang 을 sh_foo.js 로 변환 합니다.
: perl sh2js.pl foo.lang > sh_foo.js
결론
- 프로그래머들에겐 이 스크립트는 snap.com 처럼 강력한 블로그 툴입니다.
참고 사이트
- SHJS - Syntax Highlighting in JavaScript
- GNU Source-highlight 2.6
- BeeJ's Guide to Network Programming
- DesyEdit 2.1 나왔습니다!! - jwmx 님
