SyntaxHighlighter v4 설치 방법 - Ubuntu

SyntaxHighlighter v4에 대한 설치하는 법 입니다.

사실 이전에, SyntaxHighlighter v3를 사용하고 있었는데, 문득 v4가 나왔다는 것을 확인했습니다.

아무래도 v3와의 차이점은 크게 javascript 소스의 개수와 CSS 소스의 개수가 획기적으로 줄었다는 것 외에는 큰 차이는 없어보입니다.

다만, 지원되지 않는 기능이 몇 가지 있다는 것일 뿐...

제가 글을 작성하게된 계기는, v3의 기능을 공부해보려 했다가 v4가 흥미로워 넘어가게 되었습니다. 하하.

혹시 이미 SyntaxHighlighter를 설치하셨고, 보다 깔끔하게 활용하고 싶다면, 다음 링크를 살펴보시는 걸 추천합니다.

SyntaxHighlighter 메뉴얼

이제 각설하고, 본격적으로 설치방법으로 넘어가도록 하겠습니다.

01. 설치하기 전에 필요한 목록

먼저 설치를 하기 전에, 환경과 필요한 모듈의 목록을 소개하겠습니다.

설치를 위한 환경은 MAC OS가 아주 적절하지만, 저는 Ubuntu에서 설치를 수행했습니다.

제가 빌드를 수행했던 환경은 Ubuntu 18.04입니다.

운영체제	Ubuntu ( 권장 : Ubuntu 18.04 or Ubuntu 16.04 )
필요한 모듈 목록	Node.js npm git

먼저 우리가 필요한 목록을 설치해주기 앞서 업데이트를 해주도록 합시다.

npm의 경우는 Ubuntu에서 자체적으로 모듈이 설치할 수 있는 목록에 적용되지 않은 상태일 것입니다.

따라서 다음과 같은 설정을 해주셔야 합니다.

# sudo apt-get install curl # curl -sL https://deb.nodesource.com/setup_6.x | bash -

만약 curl을 통해 nodejs에 대한 셋업이 되지 않으신다면 다음과 같이 에러를 체크해주시는 것도 좋은 방법입니다.

# sudo apt-get autoclean $$ apt-get clear cache

혹은

# sudo rm -rf /var/lib/apt/* # sudo apt-get update

저는 아래의 예제인 /var/lib/apt/*를 지워주고 업데이트를 수행해주니 오류가 해결되었습니다.

이제 설치를 위한 모듈들을 설치해보도록 합시다.

# sudo apt-get install -y git nodejs npm

02. Github에서 SyntaxHighlighter v4 다운로드

제가 사용하고 있는 SyntaxHighlighter v4는 사실 원래의 작성자가 아닌 다른 사용자가 수정해준 소스코드를 통해 빌드되었습니다.

원작자 : https://github.com/syntaxhighlighter/syntaxhighlighter.git

수정자 : https://github.com/karljacuncha/syntaxhighlighter.git

저는 두 번째 소스인 수정자의 소스를 이용하여 빌드하였습니다.

먼저 github에서 다운로드 하도록 합시다.

# git clone https://github.com/karljacuncha/syntaxhighlighter.git

이후 syntaxhighlighter라는 디렉토리가 생겼을 것입니다.

이제 여기서 해당 디렉토리에 들어가서 빌드를 시작하도록 합시다.

명령어는 다음과 같습니다.

# cd syntaxhighlighter # ./node_modules/gulp/bin/gulp.js setup-project # ./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default

반드시 setup-project를 수행하고, 이후 build를 수행해주어야 합니다.

여기서 --brushes=all은 여러분께서 SyntaxHighlighter v3에서 사용한 모든 브러쉬 효과를 선택해주겠다는 의미입니다.

또한 --theme=default는 SyntaxHighlighter의 기본 테마를 설정해준다는 것입니다.

만약 빌드가 성공했다면, 이제 dist 디렉토리를 들어가보도록 합시다.

해당 디렉토리에서 다음과 같은 세 가지 파일이 생성되었다면 성공입니다.

theme.css

syntaxhighlighter.js

syntaxhighlighter.js.map

여러분의 티스토리에 혹은 워드프레스에 업로드하시면 됩니다.

03. SyntaxHighlighter v4 적용

여러분의 홈페이지나 블로그에 업로드하셨다면, 이제 적용해야 할 차례입니다.

빌드를 완료하셨다면, 이제 html head 부분에 다음과 같은 코드를 입력해주셔야 적용이됩니다.

아래의 코드를 적용해야 할 위치는 </head> 바로 위에 작성하시면 됩니다.

업로드하셔야 할 소스코드는 다음과 같습니다.

<!-- Syntax HighLighter V4-->
<link href="http://servername/syntaxhighlighter/theme.css" rel="stylesheet" type="text/css">
<script src="http://servername/syntaxhighlighter/syntaxhighlighter.js" type="text/javascript"></script>
<script src="http://servername/syntaxhighlighter/syntaxhighlighter.js.map" type="text/javascript"></script>

여기서 티스토리에 적용하시고자 하시는 분들께서는 조금 헷갈리실 수 있습니다.

servername/syntaxhighlighter/ 와 같은 부분은 티스토리에는 다르게 표현할 수 있습니다.

아래의 소스코드처럼 입력하시면 됩니다.

<!-- Syntax HighLighter V4-->
<link href="./images/theme.css" rel="stylesheet" type="text/css"/>
<script src="./images/syntaxhighlighter.js" type="text/javascript"></script>
<script src="./images/syntaxhighlighter.js.map" type="text/javascript"></script>

이제 SyntaxHighlighter v4가 적용될 것입니다.

보다 깔끔하고 멋진 표현을 위해 SyntaxHighlighter를 사용하고 싶으시면 다음 링크에서 메뉴얼을 살펴보시는 것을 추천합니다.

해당 메뉴얼은 SyntaxHighlighter v3, SyntaxHighlighter v4에서 모두 사용이 가능합니다.

단, collapse와 toolbar, smart-tabs의 기능은 v4에서 사용할 수 없습니다.(사용할 필요가 없는 기능은 삭제하거나 제대로 적용을 안 한 것 같습니다.)

SyntaxHighlighter 메뉴얼

이렇게 해서 설치 방법은 마무리하도록 하겠습니다.