아이티-잉

공부하며 정리하는 IT블로그

Today   Total  
2023년! 복 많이 받으세요

  전체보기

  IT

  여행

  운동

  영상

  신기방기

  리뷰

코드 강조 스크립트 :: Syntax Highlighter

2016. 2. 20. 11:34

Syntax Highlighter

 

 

 

씬택스 하이라이터는 소스코드 강조 스크립터다.

즉, HTML 문서상에 코드를 삽입할 경우 보다 보기 좋게 만들어준다.

 

직역하면 문법 강조기라고 할 수 있을 것 같다.

 

 

~ 광고 타임 ~

 

 

티스토리 적용방법

 

티스토리 기준으로 적용방법 및 사용법을 하나씩 살펴보자.

 

 

 

 

우선 공식홈페이지로 이동한다.

간단한 소개와 데모, 소식들을 확인할 수 있다.

 

 

 

 

 

일단 Download 페이지로 이동하여,

빨간 네모로 표시한 링크(Click here to download)를 클릭해 다운받자.

 

 

 

 

~ 광고 타임 ~

 

 

 

 

 

압축을 풀면 scripts 폴더와 styles 폴더가 보일 것이다.

 

scripts 폴더에는 코드 문법에 따라 다양한 브러쉬가 있고,

styles 폴더에는 테마 스타일시트 파일들이 담겨있다.

 
 
 
 

1-A) 전체설치

 

전체설치를 하더라도 전체용량이 0.5mb 내외이므로,

페이지 로딩 속도에 미치는 영향은 체감하기 어려울 것이다.

 

Scripts 폴더 내 모든 파일을 업로드하면 된다.

 

 

 

1-B) 부분설치

 

필요한 파일만 받아서 사용하기 때문에

페이지 로딩 속도가 상대적으로 빠르고, 소모 데이터 또한 절약된다.

 

 

 

Scripts 폴더 내에서 필요한 파일만 선택적으로 업로드하면 된다.

파일명에 해당 문법이 적혀있지만, 보기 쉬운 홈페이지를 참고하자.

 

 

 

~ 광고 타임 ~

 

 

 

2) 테마

 

Styles 폴더에서는 테마를 고를 수 있다.

 

 

 

어떤 테마가 있는지 홈페이지에서 직접 보며 고르자.

 

Styles 폴더에서 shCoreXXX.css 파일과 shThemeXXX.css 파일이 짝이므로

테마당 2개의 파일이 필수가 된다.

 

 

 

 

티스토리 적용

 

필자는 Cpp, CSS, JAVA, JavaScript, SQL, XML, Plain Text, PHP 문법을 위해 Scripts 폴더에서 8개,

style 폴더에서 Midnight 테마를 선택하여 2개까지 총 10개의 파일을 선택했다.

 

그리고 여기에 Scripts 폴더 내 shCore.js 파일은 필수파일이므로

업로드할 파일은 총 11개가 된다.

 

 

이제 관리 페이지로 이동후 HTML/CSS 편집 메뉴를 선택한다.

 

 

 

 

 

 

 

파일업로드 탭에서 하단에 위치한 추가버튼으로

앞서 선택한 파일들을 모두 업로드 한다.

 

 

 

 

~ 광고 타임 ~

 

 

 

 

 

업로드가 잘됐는지 확인 후 저장버튼을 누르자.

 

 

 

 

 

사용 준비

 

이제 HTML 탭으로 이동하자.

<heda></head> 태그 사이에 아래 코드를 넣는다.

 

<pre class="brush:css"><code>  </code></pre>

 

 

그리고 계속해서 <head></head> 태그 사이에

필수파일이었던 shCore.js파일도 아래 코드를 통해 넣어준다.

 

<pre class="brush:javascript"><code></code></pre>

 

앞에 넣는 이유는 Can't find brush for xxx 에러 발생을 막기 위함이다.

해당 에러는 브러쉬 스크립트 파일들보다 코어 스크립트가 늦게 읽혀 발생한다.

 

때문에 브러쉬.js 파일보다 상단에 배치시키거나,

아예 예제처럼 편하게 <head> 태그 부분에 넣어버리자.

 

 

 

 

 

 

 

 

잘 따라오고 있다면, 이번엔 Ctrl + F를 눌러서 </s_t3> 태그를 찾자.

 

 

 

바로 위 코드삽입이라고 적어둔 곳에 아래 코드를 삽입한다.

js 파일 수만큼 계속 적어서 넣어준다.

 

 

 그래서 위와 같은 형태가 된다면 완료다.

 

 

 

끝으로 원활한 실행이 되도록

</s_t3> 태그 아랫부분에 다음 스크립트를 추가하자.

 

      SyntaxHighlighter.all();

 

 

 

~ 광고 타임 ~

 

 

 

 

 

사용법

 

이제 글에 실제로 넣어보자.

 

 

 

글 작성시 상단에 보이는 HTML 박스에 체크하자.

 

원하는 위치에 <pre class="brush:문법 브러쉬 종류"> 코드 내용 </pre> 형태로 넣으면 된다.

단, <html><head><body>와 같은 태그들은 제대로 출력되지 않을 수 있는데,

그럴 땐 꺽쇠(부등호) <, > 대신에 &lt; 와 &gt;로 감싸면 된다.

 

예1) <html>을 입력하고자 할땐, &lt;html&gt;

예) i < 5 일땐, i &lt; 5

 

 

여기서 lt는 less than의 약자로, '~보다 작다'의 의미를 가진 부등호 <를 가리키는 코드이며,

반대로 gt는 greater than의 약자로, '~보다 크다'의 의미를 가진 부등호 >를 가리키는 코드다.

 

 

 

다시 돌아오면, 문법 브러쉬 종류는 앞서 골랐던 css, cpp 등이 해당된다.

사용 가능한 브러쉬 종류는 홈페이지의 Brush aliases 항목과 같고, 파일을 추가한 것만 가능하다.

 

 

 

 

 

결과

 

예)

<pre class="brush:css">

html{ background-color: black; }

</pre>

 

출력)

html{ background-color: black; }

 

 

 

 

 

옵션

 

추가적으로 몇 가지 옵션들을 제공하고 있다.

<pre> 태그 안의 class 속성에 원하는 옵션들을 넣으면 된다.

 

 

옵션 값 설명 예제
auto-links true/false  하이퍼링크를 자동 생성한다. 예제
class-name 사용자정의  사용자정의 클래스를 추가한다. 예제
collapse true/false  펼치기 기능을 제공한다. 예제
first-line 정수  해당 숫자가 첫 줄 숫자가 된다. 예제
gutter true/false  라인 번호를 켜고 끌 수 있다. 예제
highlight [정수, ...]  특정 라인에 강조효과를 준다. 예제
html-script true/false  HTML과 XML 문법을 같이 사용한다. 예제
smart-tabs true/false  들여쓰기로 정렬된다. 예제
tab-size 정수  몇 개의 공백을 들여쓰기로 할지 설정한다. 예제
toolbar true/false   우측에 나타나는 물음표를 켜고 끈다. 예제

 

타이틀을 붙이고 싶다면 <pre title="제목"> 형식으로 사용하면 된다.

 

 

예제

타이틀, auto-link, highlight, toolbar 옵션을 적용해보도록 하자.

 

<pre title="예제" class="brush:css; auto-link:ture; highlight:[1, 3]; toolbar:false;"> 

/* 아이티-잉 홈페이지 :: http://it-ing.tistory.com/ */



html { background-color: rgba(0, 0, 0, .5); line-height: 1.6em; }

body { font-size: 14px; color: #008DFF; }



</pre>

 

 

결과

 

/* 아이티-잉 홈페이지 :: http://it-ing.tistory.com/ */

html { background-color: rgba(0, 0, 0, .5); line-height: 1.6em; }
body { font-size: 14px; color: #008DFF; }

 

 

 

 

만약 테마를 수정하고 싶다면 해당 css 파일을 열어서 직접 수정하면 된다.

 

 

+ 추가

 

Monokai 테마를 적용해봤는데, sublime text 편집기 만큼은 아니지만 얼추 맞는것 같아서 공유해본다.

별도의 라이선스 고지를 찾을 수 없어서 직접 배포해본다.

 

 

<!doctype HTML>
<html>
<head>
<title> 모노카이 테마 </title>
<style>
html{background-color: black; font-size: 18px;}
</style>
<script type="text/javascript">
    alert("Monokai theme TEST!!");
</script>
</head>

<body>
<h2> Hello, World! </h2>
</body>
</html>

 

 

shCoreMonokai.css
다운로드

 

shThemeMonokai.css
다운로드

 

 

자료 출처는 AS/JS Tutorials 홈페이지이며,

링크를 따라가도 별 내용은 없지만 궁금하다면 방문해보자.

 

맥 OS 전용 파일도 있어서 올려본다.

 

 

._shCoreMonokai.css
다운로드

 

._shThemeMonokai.css
다운로드

 

 

 

끝!

 

 

저작자표시 비영리 변경금지

'IT > 꿀팁' 카테고리의 다른 글

알아두면 유용한 사이트 10 :: 픽슬러, Adobe Color CC, Pixabay 등등  (0) 2016.03.22
텍스트 편집기 :: Sublime Text 2  (0) 2016.03.21
알씨(Al See) :: 이미지 크기, 용량 줄이기, 포맷 변경하기, 회전하기  (0) 2016.03.19
포토스케이프 :: GIF 움짤, 애니메이션 만들기  (0) 2016.03.11
코드 강조 스크립트 :: highlight.js  (0) 2016.03.01
댓글   트랙백

티스토리툴바