구글 코드 하이라이터 prettyfy를 이용해 코드를 컬러풀하게 바꿔보아요~
작성일 20-12-03 17:54
페이지 정보
작성자디벨로드 조회 806회 댓글 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는 자동으로 언어를 감지해서 구문 강조를 해준답니다.^^
소스코드/* Prism Highlighter */
소스코드
/* 구글 Prettify */
소스코드
차이가 보이시나요? 구글은 PRE 태그나 XMP 태그에 클래스명만 넣어주면 알아서 변환해 준답니다.
사실 저는 HTML, CSS, JavaScript 코드를 같이 쓰는 경우가 많아서 언어를 지정해주는데 선택 장애가 오거든요..ㅠㅠ
근데 구글은 그런 게 필요 없어서 너무 편한 거 같아요~~~
(저 위에 태그에 사용한것도 구글 Prettify 랍니다.^^)
Prettify의 Sunburst테마를 사용한 예
구글 Prettify를 사용해 구문 강조를 사용해 본 결과입니다.
자 그럼 Prettify를 어떻게 사용하는지 사용법에 대해 알려드리겠습니다.
일단 아래 Script 소스코드를 <head></head> 사이에 넣어주세요~
그리고 에디터에서 입력하고 싶은 소스코드를 입력한 후에 HTML 편집 모드로 가서 입력한 소스코드를 <pre class="prettyprint">...</pre>로 감싸주면 끝!!!
자 그럼 이제 테마를 구경해 볼까요?
테마를 볼 수 있는 주소는~~~~~~
https://rawgit.com/google/code-prettify/master/styles/index.html
위의 주소를 가셔서 볼 수도 있고요...
제가 친절하게 스크린샷을 찍어왔습니다.^^
구글 Prettify 테마 목록
저기 보이는 테마명을 skin 값으로 넣어주시면 적용이 된답니다.
비록 많은 테마가 있는 건 아니지만 이 정도면 간단하게 쓸만하지 않나요??
궁금하신 점이 있으시다면 "댓글"로 남겨주시면 돼요!~^^
추천0
댓글목록
등록된 댓글이 없습니다.