PRISMJS 라이브러리란 코드의 가독성을 높여주는 일종의 CSS 스타일 자동화 라이브러리로 이해하면 된다. 이 라이브러리는 이식성도 좋기때문에 tinymce(최신버전 기준) 에디터에서도 사용이 가능하다. 다만 tinymce 같은경우 설정이 필요하기때문에 이부분은 이번편에서는 패스하도록 하자
PRISMJS 사이트는 아래와 같다. (메타데이터가 없어서 링크 미리보기가 이상하다..)
내가 적용한 방식은 크게 2가지로 직접 DOWNLOAD 하여 적용하는 방식과 CDN을 이용하는 방식인데 둘다 결과는 동일하며 이번편에서는 DOWNLOAD 하여 적용하는 방식을 소개한다.
설명하자면 1번의 경우 파일 유형을 선택하는 부분으로 압축된 코드를 다운로드할지 아니면 원본 코드를 다운로드할지로 쉽게 이해하면 된다. 여기서는 압축 방식인 Minfied version 을 선택하면된다.
그리고 2번의 경우 적용된 테마선택하는 부분으로 스타일 적용된 CSS 를 고르는 부분이다. 테마를 변경하게 되면 해당 페이지에서 가장 하단에서 적용된 스타일을 미리 볼 수 있다.
3번의 경우 적용할 코드 언어를 선택하는 란으로 다수개 선택이 가능하니 필요한 언어를 선택해 주면 된다.
선택이 완료된 해당 페이지 가장 하단으로 오면 아래의 이미지와 같이 JS파일과 CSS 파일을 다운로드 할 수 있는데 해당 두파일을 모두 다운로드 해준다.
다운로드 받은 후 서버에 두 파일을 올려서 아래와 같이 예제 코드를 넣어주면 된다. 아래 예제의 경우 (PHP + HTML + CSS ) 언어 컴포넌트가 필요하다.
<link rel="stylesheet" href="https://도메인/public/prism/prism.css?v=1" />
<script src="https://도메인/public/prism/prism.js?v=1"></script>
<pre>
<code class="language-php"><?php
$denyPostGet = array('_SESSION','_SERVER','COOKIE','_FILES');
foreach($denyPostGet as $key){ unset($_GET[$key],$_POST[$key],$_REQUEST[$key]);}</code>
</pre>
<pre>
<code class="language-html"><div class="test">안녕하세요</div></code>
</pre>
<pre>
<code class="language-css">body{background-color:#95afc9;}</code>
</pre>위의 예제를 보면 pre 태그로 시작해서 code 태그의 class 명을 통해 적용할 언어 스타일을 지정한것을 볼 수 있다. 이처럼 language-언어 로 class 명을 지정하여 적용이 가능하니 참고 바란다.
PRISMJS 가 적용된 모습은 아래와 이미지와 같다.
위와 같이 간단하게 나마 적용하는 방법을 알아 보았고 다음편에서는 CDN 방식으로 적용하는 방법에 대해 알아보도록 하자.
Comment