구글 코드 하이라이터 prettyfy를 이용해 코드를 컬러풀하게 바꿔보아요~ - PLUGIN

구글 코드 하이라이터 prettyfy를 이용해 코드를 컬러풀하게 바꿔보아요~

작성일 20-12-03 17:54

페이지 정보

작성자디벨로드 조회 360회 댓글 0건

본문

소스코드를 입력하실 때 어떻게 쓰시나요??
그냥 텍스트로 입력하시나요?

<?php if($a == 1){ echo “안녕하세요.”; } ?>

이렇게요? 그럼 너무 가독성도 떨어지고 뭔가 딱딱해 보이지 않나요??
어렵고 힘들게 느껴질 수 있는 프로그램인데 그래도 컬러감 있게 넣어주면 보기라도 좋잖아요?;;;

제가 소개할 코드 하이라이터는 구글의 Prettify입니다.
구글의 Prettify를 소개하기 전에 몇 개만 소개해드리겠습니다.

저도 예전에는 SyntaxHighlighter를 사용했었는데요.
SyntaxHighlighterPrism Highlighter는 직접 파일을 업로드해서 설치를 해야 하는 번거로움이 있고요
Online Syntax Highlighting은 매번 사이트에 들어가서 변환을 해줘야 해서 번거로운 거 같아서....

저는 구글 Prettify로 변경해서 사용 중입니다.
물론 다른 Highlighter보다는 더 효과적이지는 못한 것 같지만 일단 편리함에서 제일 좋은 것 같아요

제일 편한 거는 설치가 편해요!!

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>

요거 한 줄만 써주면 설치는 끝이에요!!!ㅎㅎㅎ 정말 쉽죠?

두 번째는 다른 Highlighter는 쓸 때 어떤 언어로 구문 강조를 할 것인지 써줘야 하는데요
구글 Prettify는 자동으로 언어를 감지해서 구문 강조를 해준답니다.^^

/* Sytax Highlighter */ <pre class="brush: css;">소스코드</pre> /* Prism Highlighter */ <pre><code class="language-css">소스코드</code></pre> /* 구글 Prettify */ <pre class="prettyprint">소스코드</pre>

차이가 보이시나요? 구글은 PRE 태그나 XMP 태그에 클래스명만 넣어주면 알아서 변환해 준답니다.
사실 저는 HTML, CSS, JavaScript 코드를 같이 쓰는 경우가 많아서 언어를 지정해주는데 선택 장애가 오거든요..ㅠㅠ
근데 구글은 그런 게 필요 없어서 너무 편한 거 같아요~~~
(저 위에 태그에 사용한것도 구글 Prettify 랍니다.^^)

Prettify의 Sunburst테마를 사용한 예 Prettify의 Sunburst테마를 사용한 예

구글 Prettify를 사용해 구문 강조를 사용해 본 결과입니다.

자 그럼 Prettify를 어떻게 사용하는지 사용법에 대해 알려드리겠습니다.
일단 아래 Script 소스코드를 <head></head> 사이에 넣어주세요~

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst&"></script> /* 주소 뒤에 파라미터를 이용해서 설정을 해줄수 있습니다. lang=css // 다른 highlighter와 마차가지로 강제로 언어를 지정해줄 수 있습니다. skin=sunburst // 테마를 선택해 줄 수 있는데 입력을 안 할 경우 default 테마로 적용됩니다. linenums=1 // 줄번호를 표시해줍니다. 이 옵션은 pre태그에 class명으로 linenums:1 이라고 입력해주어도 됩니다. */

그리고 에디터에서 입력하고 싶은 소스코드를 입력한 후에 HTML 편집 모드로 가서 입력한 소스코드를 <pre class="prettyprint">...</pre>로 감싸주면 끝!!!

자 그럼 이제 테마를 구경해 볼까요?
테마를 볼 수 있는 주소는~~~~~~
https://rawgit.com/google/code-prettify/master/styles/index.html

위의 주소를 가셔서 볼 수도 있고요...
제가 친절하게 스크린샷을 찍어왔습니다.^^

구글 Prettify 테마 목록 구글 Prettify 테마 목록

저기 보이는 테마명을 skin 값으로 넣어주시면 적용이 된답니다.
비록 많은 테마가 있는 건 아니지만 이 정도면 간단하게 쓸만하지 않나요??

궁금하신 점이 있으시다면 "댓글"로 남겨주시면 돼요!~^^


추천0

댓글목록

등록된 댓글이 없습니다.

Road to Deveropment
Road to Deveropment
상단으로