저처럼 개발, 코딩 블로그 운영하시는 분들이나 사이트 운영하시는 분들 많으시죠?
특히 요즘은 티스토리, 블로거 같은 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 코드를 같이 쓰는 경우가 많아서 언어를 지정해주는데 선택 장애가 오거든요..ㅠㅠ
근데 구글은 그런 게 필요 없어서 너무 편한 거 같아요~~~
구글 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 값으로 넣어주시면 적용이 된답니다.
비록 많은 테마가 있는 건 아니지만 이 정도면 간단하게 쓸만하지 않나요??
'Web > Plugin' 카테고리의 다른 글
| 웹페이지 화면 이미지로 저장하기 | html2cavas 플러그인 (0) | 2022.05.11 |
|---|---|
| 스팸글은 이제 그만!! PHP로 구글 reCaptcha v3 사용하기 (0) | 2022.02.16 |
| OWL Carousel로 슬라이드를 간편하게 만들기 (0) | 2021.08.30 |
| jQuery의 Datepicker는 뭔가 아쉬워, 시간이 필요해 | DateTimePicker (0) | 2021.08.27 |