Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

Web/Plugin

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

웹아이 2021. 8. 26. 14:59
반응형

저처럼 개발, 코딩 블로그 운영하시는 분들이나 사이트 운영하시는 분들 많으시죠?

특히 요즘은 티스토리, 블로거 같은 HTML 편집이 자유로운 블로그를 운영하시는 분들이 많은데 소스코드를 입력하실 때 어떻게 쓰시나요?? 그냥 텍스트로 입력하시나요?

 

<?

if($a == 1){

    echo "안녕하세요";

}

?>

 

위처럼 그냥 텍스트로만 입력하게 되면 너무 가독성도 떨어지고 뭔가 딱딱해 보이지 않나요??

어렵고 힘들게 느껴질 수 있는 프로그램인데 그래도 컬러감 있게 넣어주면 보기라도 좋잖아요? 😂

 

제가 소개할 코드 하이라이터는 구글의 Prettify입니다.

구글의 Prettify를 소개하기 전에 몇 개만 소개해드리겠습니다.

 

1. 제일 많이 알려져 있는 SyntaxHighlighter

http:// http://alexgorbatchev.com/SyntaxHighlighter/

 

2. 기능과 테마가 많아 보이는 Prism의 Highlighter

https://prismjs.com/

 

3. 온라인에서 바로 변환해서 HTML 코드 그대로 카피해 사용할 수 있는 Online Syntax Highlighting

https://tohtml.com/

 

저도 예전에는 SyntaxHighlighter를 사용했었습니다.

SyntaxHighlighter와 Prism 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 태그에 클래스명만 넣어주면 알아서 변환해 준답니다.

사실 저는 HTML, CSS, JavaScript 코드를 같이 쓰는 경우가 많아서 언어를 지정해주는데 선택 장애가 오거든요..ㅠㅠ

근데 구글은 그런 게 필요 없어서 너무 편한 거 같아요~~~

 

구글 Pretify 사용 예

 

구글 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

위의 주소를 가셔서 볼 수도 있고요...

제가 친절하게 스크린샷을 찍어왔습니다.^^

 

 

저기 보이는 테마명을 skin 값으로 넣어주시면 적용이 된답니다.

비록 많은 테마가 있는 건 아니지만 이 정도면 간단하게 쓸만하지 않나요??

반응형