오늘은 prism.js 소스 코드 하이라이트에 대해서 살펴보겠습니다.
소스 코드 하이라이트는 말그대로 소스 코드의 문법을 강조 구분해서 사용자들에게
보기 좋게 표시를 해주는 것입니다.
이런식으로요!!
<!DOCTYPE html>
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ko" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="robots" content="ALL" />
<meta name="copyright" content="https://cocosoft.kr/">
<meta name="keywords" content="cocosoft, it, social, media">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>prism.js 소스코드하이라이트(문법 강조기) 사용법 및 소개</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="author" content="COCO Media">
<meta name="description" content="코코소프트(COCOSOFT), 최신IT동향, 게임, html/css등 양질의 콘텐츠 제공.">
<meta name="generator" content="cocosoft on tistory">
<link rel="author" href="./images/humans.txt">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="코코소프트" href="https://cocosoft.tistory.com/rss">
<link rel="apple-touch-icon-precomposed" href="./images/apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="./images/reset.css">
<link rel="stylesheet" href="./style.css">
사실 기존에는 SyntaxHighlighter 를 사용 했었는데..
이건 언어마다 스크립트파일과, 템플릿css가 각각 나눠져있어서...
이런식으로... 전부 선언을 해줘야 했습니다..
혼세!혼세!
HTTP 요청도 많으니.. 페이지 로드에도 치명적이겠죠??
그래서 가볍고 예쁜 소스코드하이라이트를 찾던중 최근에 많은 분들이
갈아탄 소스코드 하이라이트인 prism.js를 찾게 되었습니다.
코어파일이 5.31KB 밖에 안되는!! 매우 가벼운 소스코드하이라이트입니다.
그런데 예뻐!! 기존 사용하는 SyntaxHighlighter의 코어 파일의 1/3밖에 안되네요.
본격적으로 설치를 해보자
우선 스크립트 파일과 스타일리시트 파일을 받아서 스킨에 업로드를 해야합니다.
http://prismjs.com/download.html
특이하게 미리 사이트해서 필요한 언어와 플러그인,테마를 선택을 할 수 있습니다.
우선 Minified version을 선택해주고 테마는 본인에게 맞는 테마를 고를 수가 있습니다.
우측의 테마 선택 화면에서 선택하면 테마 모습을 미리보기 할 수 있습니다. 클릭 후 스크롤을 가장 아래로 내려보면
테마들이 보입니다.
모든 프로그래밍 언어들이 있습니다.
티스토리의 스킨 수정 및 소스코드에 관련한 웹언어는 기본 선택 언어로도 가능합니다!
그외에 필요한 언어들만 선택을 하고 스크롤을 내려줍니다.
플러그인을 선택 할 수 있습니다.
다양한 플러그인이 있습니다.
저는 그중에서 Line Numbers 와 Show Language를 선택했습니다.
Line Numbers는 소스코드하이라트 옆에 줄 숫자를 표시해주는 것이고 Show Language는 지금 코드의 언어명을 우측 상단에 표시를 해줍니다.
그 이외에도 필요한 플러그인들은 예시를 확인하시고 선택 하시면됩니다.
자기가 입맛대로 고르면 아래의 파일도 자동으로 수정이 되어 집니다.
좌측 스크립트 파일을 다운로드를 해줍니다.
DOWNLOAD JS
그리고 파일을 추가시켜준다음
아래 코드를 </hody> 을 찾은 다음 그 위에 입력 시켜줍니다.
HTML영역에 붙혀 넣기 해야할 코드
<script src="./images/prism.js"></script>
</body>
스크립트 파일은 <head> 또는 <body> 부분에 붙혀 넣기 하면 되고 보통 외부 스크립트 파일은 <head>안에 위치하라고 하는데
스크립트 위치는 크게 상관이 없는 것 같습니다. 다만 코드를 한 곳에 모아두는 습관을 가지는 것이 좋고 페이지에 영향을 주는
외부 스타일 이나 스크립트 파일을 우선 배치시키는 것이 페이지의 내용을 정확하게 표시되고 동작한다는 이론이 있습니다.
자그리고 이제는
스타일시트 CSS 파일을 등록시켜야하는데
크기도 작고 따로 외부스타일시트 파일을 많이 추가요청을 따로 하기 싫어서
그냥 기존 style.css 에 prism.css 파일의 내용을 붙혀넣기 했습니다.
이렇게 드래그해서 Ctrl + C한 다음에
CSS 가장 마지막에 붙혀넣기!!!!!!
CSS 편집을 조금 할 수 있으신 분들은 소스코드의 박스나 라벨의 디자인의 변경도 쉽게 가능합니다.
이게 귀찮다고 하시는 분들은 그냥 ㅠ prism.css 파일도 업로드후 아래처럼 붙혀넣기 하면 됩니다.
<!DOCTYPE html>
<html>
<head>
...
<link href="./images/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="./images/prism.js"></script>
</body>
</html>
자 이렇게 하면 설치는 끝난 것입니다.
이제 사용법에 대해서 알아보자
<pre class="line-numbers"><code class="language-xxxx">...여기에 코드...</code></pre>
사용법은 간단합니다. line-numbers 플러그인을 선택 했기 때문에
<pre class="line-numbers"> 값을 주고
사용할 코드 언어를 고르면 됩니다.
language-xxxx
- Markup - markup
- CSS - css
- C-like - clike
- JavaScript - javascript
예를들어 일반 html 코드를 표시한다면 <code class="language-markup">; 이 되겠죠?
단, <,> 부등호는 엔티티코드인 <와 >로 바꿔줘야합니다. 소스코드하이라이트도 결국 태그로 작성하는 것이기 때문에 태그 안에 태그로 표시되어 제대로 표현이 도지 않습니다.
자꾸 작성하다보면 편법이 생기길 마련인데 저같은 경우는
HTML 에디터에서 해당 소스 코드 하이라이트 태그를 작성을 해놓은 다음
그다음 위지윅 모드로 빠져나와서 저기에 바로 붙혀넣기를하면
엔티티코드로 일일히 바꾸지 않아도 쉽게 사용이 가능합니다.
결론 마무리~~~~~~
소스 코드 하이라이트는 어떻게 생각하면 필수플러그인은 아닙니다.
아직도 많은 웹디자인이나 개발자 분들의 블로그에 가면 아무런 하이라팅없이 소스코드를 올려주시는 분들도 많습니다.
물론 그게 잘못 된 것은 아니라고 생각합니다.
솔찍히 말하면 HTML 마크업 언어 작성이 손에 익지 않으면 일일히 수정하기도 매우 힘듭니다.
그렇기 때문에 필수적으로 권장하지는 않지만
그래도 소스코드 하이라이팅이 적용이 되어있으면 방문객으로 하여금
더 보기 좋은 콘텐츠를 제공을 할 수 있다고 생각합니다!!^^
