소스코드 테마 SytaxHiglighter 설치

728x90

소스코드 테마 SytaxHiglighter는 최근에 프로그램 소스를 소개하는 블로그에서 많이 사용하고 있습니다. 현재 버전 4까지 제공하고 있으며 개발 사이트에서 무료로 다운로드 받을 수 있습니다.

아래의 사이트에 접속하면 그림과 같은 초기 화면을 볼 수 있습니다.

http://alexgorbatchev.com/SyntaxHighlighter/

여기서 오른쪽에 "download"를 클릭하시면 소스를 제공하는 github 사이트로 이동합니다.

현재 날짜 기준으로 버전 4를 제공하고 있습니다. 버전 4는 직접 소스를 컴파일 해야 하며 Download.ZIP 버튼을 클릭하여 소스코드 테마의 소스를 다운로드 할 수 있습니다. 여기서는 버전업되면서 변경된 부분을 적용하고 싶지 않아 이미 컴파일이 완료된 이전 버전을 설치하도록 하겠습니다. 해당 파일은 첨부했습니다.

syntaxhighlighter_3.0.83.zip

해당 파일을 적당한 위치에 복사하시고 압축을 해제하시면 아래와 같습니다. 여기서 필요한 폴더는 scripts 폴더와 styles 폴더입니다.

블로그 관리에서 [꾸미기-스킨편집]을 클릭하여 스킨편집 페이지로 이동합니다. 이 페이지에서 [html 편집] 버튼을 클릭하여 스킨편집 화면을 띄웁니다. 상단에 [파일업로드]를 선택하고 이동한 페이지의 하단에 [추가] 버튼을 누르면 파일선택 다이얼로그가 나타납니다.

먼저 scripts 폴더에 있는 자바스크립트 파일들을 업로드 합니다.

다음은 styles 폴더에 있는 스타일 파일들을 업로드 합니다. 테마와 관련된 파일만 업로드 해도 됩니다.

테마관련 내용은 아래의 링크를 참조하시기 바랍니다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

업로드가 완료되면 HTML/CSS 화면 우측 상단에 HTML을 선택합니다.

다음 단계로 <HEAD> 태그와 </HEAD> 태그 사이에 아래 코드를 추가하시기 바랍니다. 추가하는 자바스크립트는 사용하고자 하는 언어를 정의한 것입니다. 불필요한 부분은 제거하셔도 됩니다. 하단 3, 2 번째 줄은 원하는 테마의 스타일을 정의하고 있습니다.

.css 파일명은 Core나 Theme가 붙은 것이 있습니다. 각각은 폰트나 크기가 조금 다르지만 비슷한 형태를 제공합니다. 티스토리에 적용하는 스킨에 따라 잘 보이는 스타일을 사용하시기 바랍니다. 마지막 라인은 위에서 설정한 내용을 기준으로 초기화를 수행하게 됩니다.

여기까지 진행하시면 SyntaxHighlighter를 사용할 준비가 완료되었습니다. 다음은 티스토리에서 어떻게 사용하는 알아 보도록 하겠습니다.

코드를 작성할 위치에서 [외부컨텐츠] 버튼을 누릅니다.

소스입력창에 아래의 소스를 복사하시기 바랍니다.

CPaintDC dc(this); // 그리기를 위한 디바이스 컨텍스트

CDC MemDC;

CBitmap bmp;

CRect rct;

this->GetClientRect(&rct);

CString fname;

MemDC.CreateCompatibleDC(&dc);

HBITMAP hBitmap;

fname.Format(_T("bkimg2.bmp"));

hBitmap = (HBITMAP)LoadImage(NULL, fname, IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE | LR_CREATEDIBSECTION | LR_DEFAULTSIZE);

bmp.Attach(hBitmap);

MemDC.SelectObject(&bmp);

</pre>

결과는 아래와 같습니다.

CPaintDC dc(this); // 그리기를 위한 디바이스 컨텍스트

CDC MemDC;
CBitmap bmp;

CRect rct;
this->GetClientRect(&rct);

CString fname;
MemDC.CreateCompatibleDC(&dc);

HBITMAP hBitmap;

fname.Format(_T("bkimg2.bmp"));

hBitmap = (HBITMAP)LoadImage(NULL, fname, IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE | LR_CREATEDIBSECTION | LR_DEFAULTSIZE);
bmp.Attach(hBitmap);

MemDC.SelectObject(&bmp);

만약 테마를 변경하고 싶으면 원하는 테마의 스타일 파일을 다운로드 하시고 아래의 그림과 같은 위치에서 값을 수정해 주시기 바랍니다.

다음은 몇가지 옵션설정에 대해서 알아보겠습니다.

시작 행번호를 바꾸고 싶을 경우 <pre class="brush: cpp; first-line: 10">으로 수정하면 됩니다. 또한 특정 행번호를 강조할 경우 highlight: [11, 14]과 같은 구문을 추가할 수 있습니다. 툴이 오른쪽 상단에 보이게 하기 위해서는 toolbar: true 을 추가하면 됩니다.

CMenu* pSysMenu = GetSystemMenu(FALSE);

if (pSysMenu != NULL)

{

BOOL bNameValid;

CString strAboutMenu;

bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);

ASSERT(bNameValid);

if (!strAboutMenu.IsEmpty())

{

pSysMenu->AppendMenu(MF_SEPARATOR);

pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);

}

</pre>

	CMenu* pSysMenu = GetSystemMenu(FALSE);
	if (pSysMenu != NULL)
	{
		BOOL bNameValid;
		CString strAboutMenu;
		bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);
		ASSERT(bNameValid);
		if (!strAboutMenu.IsEmpty())
		{
			pSysMenu->AppendMenu(MF_SEPARATOR);
			pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
		}
	}

자세한 세부항목 설정에 관한 것은 아래의 블로그를 참조하시기 바랍니다.

https://kkamikoon.tistory.com/116

728x90

'기타' 카테고리의 다른 글

재미있는 물리 이야기 (0)	2021.01.23
CCZ-CROSS 스킨에 인용구 편집 (2)	2018.07.03
소스코드 하이라이터 프리즘(Prism) 적용 (0)	2018.07.02
CCZ-CROSS 스킨 - 수정 I (0)	2018.07.01
CCZ-CROSS 스킨의 사이드바 왼쪽 배치 (0)	2018.07.01

MakingRobot