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

작성일 20-12-03 17:54

페이지 정보

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

본문

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

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

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

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

제일 많이 알려져 있는 SyntaxHighlighter
기능과 테마가 많아 보이는 Prism의 Highlighter
온라인에서 바로 변환해서 HTML 코드 그대로 카피해 사용할 수 있는 Online Syntax Highlighting

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

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

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

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

두 번째는 다른 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테마를 사용한 예