지난 포스팅에서 소스 코드 구문 강조를 위한 몇 가지 솔루션들의 스타일들과 간략한 특징을 알아보았습니다.
그럼 이번에는 그 중 syntaxhighlight.in 사용법에 대해 알아보겠습니다.
아래는 syntaxhighlight.in을 적용한 모습입니다. Default 테마를 사용하였습니다.
syntaxhighlight.in (Default)
- #include <stdio.h>
- int _tmain(int argc, _TCHAR* argv[])
- {
- int nTemp = 0; // Comment : Dummy
- char szTemp[50] = "http://reslee.kr";
- printf("Hello World - %s\n", szTemp);
- return 0;
- }
먼저 syntaxhighlight.in의 경우는 소스 코드 구문 강조를 위한 코드를 먼저 생성해야 합니다.
이는 아래 홈페이지에서 생성할 수 있습니다.
가장 상단에 보이는 PASTE YOUR CODE HERE 부분에 구문 강조를 하고 싶은 소스를 복사해 붙여넣습니다.
그 후 아래 보이는 여러가지 옵션들을 설정할 수 있습니다만, 첫 번째 옵션인 Show/Hide-effect 옵션은 빨강색 네모 처럼 No를 선택해 주세요.
제가 테스트한 바로는 해당 옵션을 수행하는 자바 스크립트 파일이 제대로 동작하지 않았습니다.
이 후 설명은 이 옵션을 사용하지 않는 것으로 간주하도록 하겠습니다.
(해결 방법을 아시는 분이 계시다면 공유해 주시면 감사하겠습니다.)
Language는 구문 강조할 언어의 종류이고 Theme 부분도 설정할 수 있습니다.
라인넘버를 보이게 할 수도 있고 코드에서 강조할 라인을 설정할 수도 있습니다.
이렇게 설정이 완료되면 가장 하단에 구문 강조의 최종 모습을 확인할 수 있습니다.
결정이 완료되면 아래 보이는 Done! 버튼을 클릭하세요.
그러면 아래 그림과 같이 조금 전 설정한 테마를 위한 .css 파일과 옵션 기능을 수행하기 위한 .js 파일을 다운로드 해야 한다고 알려줍니다.
.css 파일은 어떤 테마를 선택했느냐에 따라서 다른 파일 링크가 표시되므로 참고하시면 될 것 같습니다.
.js 파일은 윗 부분에 말씀드린 것 처럼 일부 옵션 기능이 수행되지 않기 때문에 다운로드 하지 않는 것으로 합니다.
첫 번째 빨강색 부분의 .css 파일만 다운로드 받습니다.
그리고 그 아래 큰 빨강색 부분이 우리가 복사해서 붙여 넣어야 할 구문 강조된 html 소스 코드 입니다.
(이 html 코드는 위에서 선택한 테마와 한 쌍입니다.)
다운로드한 .css 파일을 웹서버에 업로드 하시면 되는데 설명은 티스토리를 기준으로 하겠습니다.
(.css 파일을 업로드 하지 않고 홈페이지 링크를 이용할 수도 있는데 이 경우 아래와 같은 업로드 과정은 건너 뛰셔도 됩니다.)
티스토리에 파일을 업로드 하는 방법은 우선 관리자 페이지에서 HTML/CSS 편집 메뉴를 선택합니다.
HTML/CSS 화면 우측 상단에 파일업로드를 선택하고
우측 하단에 추가 버튼을 클릭하여 파일을 업로드 합니다.
티스토리에 파일을 업로드 할 수 있는 용량은 20MB 제한입니다.
티스토리는 폴더상태로 업로드를 할 수 없고 특정 폴더를 생성하지도 못하므로 파일단위로 업로드 해야 합니다.
다운로드한 .css 파일을 업로드 합니다.
업로드가 완료되면 HTML/CSS 화면 우측 상단에 HTML을 선택합니다.
이제 HTML 소스에 <HEAD> 태그(HEAD 시작 태그)와 </HEAD> 태그(HEAD 마지막 태그) 사이에 아래 코드 한 줄을 추가합니다.
여기서 .css 파일은 shi_default.min.css라고 가정하였습니다. (완성된 html과 한 쌍을 이룬다는 것 다시 한번 기억해 주세요.)
- <link type="text/css" rel="stylesheet" href="./images/shi_default.min.css"/>
홈페이지 링크에 있는 .css 파일을 사용하신다면 아래 코드들을 이용하시면 됩니다. (전부 또는 사용할 테마 .css 파일만)
실제로 티스토리에서 사용하는 방법을 알아 보겠습니다.
코드를 작성할 위치에서 외부컨텐츠를 누릅니다.
syntaxhighlight.in은 붙여 넣어야할 html 코드를 만들어주고 이것을 바로 사용하기 때문에
아래 그림과 같이 외부컨텐츠 창에 그대로 붙여 넣어 주시면 됩니다.
이 때 꺽쇠 즉, "<"과 ">"도 알아서 그에 대응하는 특수 코드 <과 >로 변경된 상태입니다.
그렇게 붙여 넣고 나면 아래 그림의 빨강색 부분처럼 pop-uptext라는 링크가 포함되는데요.
이 링크의 동작 역시 자바 스크립트에서 담당하는 부분이지만 제대로 동작하지 않기 때문에 .js 파일을 다운로드 및 업로드를 하지 않았습니다.
해당 부분은 선택 후 삭제해 주시면 되겠습니다.
이제 미리보기를 해보시거나 발행하여 글을 확인해 보세요.
syntaxhighlight.in이 적용된 모습이 보이시나요 ?
제대로 보이신다면 syntaxhighlight.in 적용에 성공하신 겁니다.
다음 포스팅에서는 https://tohtml.com과 http://hilite.me 사이트를 이용하여 소스 코드 구문 강조를 사용하는 방법을 함께 알아보도록 하겠습니다..