프리즘(Prism)은 CSS와 js를 블로그에 등록하여 소스코드 블럭을 지정하면 syntax highlight를 표시해줍니다.
프리즘은 가볍고, 여러가지 플러그인 기능 선택 가능, 테마 선택 가능, 적용 언어 선택 가능, 줄번호 표시 가능 등이 가능합니다. 그러나 인라인 코드 블럭에도 code class를 명시해야 하며 테마가 맘에 들지 않으면 직접 CSS를 수정해야 하는 단점이 있습니다. 비록 작은 단점이 있지만 많은 장점으로 인해 요즘 많이 사용하고 있는 syntax highlight입니다.
1. 프리즘(Prism) 다운로드
프리즘 홈페이지에 접속하여 오른쪽 원으로 정의된 테마를 선택하면서 아래 샘플의 변화를 확인해 보시기 바랍니다. 우너하는 테마를 선택하시고 다음을 진행하십시요.
[DOWNLOAD] 버튼을 이용하여 다운로드 페이지로 이동합니다. 다운로드 페이지에서는 여러가지 옵션을 선택한 후 js, css 파일을 다운로드 할 수 있습니다.
먼저 테마를 선택하는 영역이 나오는데 앞에서 선택한 "OKAIDIA"로 선택되어 있습니다. 다른 테마를 선택하시고 싶으시면 해당 위치를 클릭하세요. 다음 단계는 소스코드의 언어종류를 선택해야 합니다. 151개의 다양한 언어코드를 지원합니다. 필요한 언어의 체크박스를 선택하시기 바랍니다.
다음은 플러그인을 선택할 수 있습니다. 다양한 플러그인이 지원됩니다. 각자가 원하는 플러그인을 선택하시기 바랍니다. 플러그인에 대한 자세한 설명과 사용 방법에 대해서는 추후에 설명하도록 하겠습니다. 일반적으로 많이 사용되는 플러그인은 다음과 같은 것들이 있습니다.
- Line Highlight : 특정 라인에 Hightlight를 줄 수 있습니다.
- Line Numbers : 소스코드 왼쪽에 라인번호를 표시하며 <pre class="line-numbers">으로 적용할 수 있습니다.
- Show Language : 소스코드의 언어를 표기합니다.
- Highlight Keywords : Keyword들을 다른 색상으로 표시해서 가독성을 높여줍니다.
- Remove initial line feed : 소스코드의 시작부의 라인피드들을 제거합니다.
- copy to Clipboard button : Copy라고 써있는 버튼을 소스코드의 우측상단에 배치합니다. 이 버튼을 누르면 소스코드가 클립보드에 복사됩니다.
선택을 완료하고 페이지를 아래로 이동시키면 [JS], [CSS] 다운로드 버튼이 있습니다. 이 버튼들을 누르시고 해당 파일을 다운로드 하시기 바랍니다.
2. 프리즘 적용하기
블로그 관리에서 [꾸미기-스킨편집]을 클릭하여 스킨편집 페이지로 이동합니다. 이 페이지에서 [html 편집] 버튼을 클릭하여 스킨편집 화면을 띄웁니다. 상단에 [파일업로드]를 선택하고 이동한 페이지의 하단에 [추가] 버튼을 누르면 파일선택 다이얼로그가 나타납니다.
여기에서 다운로드 받은 prism.js, prism.css을 선택한 후 [열기] 버튼을 눌러 추가하시기 바랍니다.
아래의 페이즌 다운로드 받은 파일을 추가한 결과를 나타낸 것입니다.
[HTML] 페이지로 이동한 후 <head></head> 태그에 <link href="images/prism.css" rel="stylesheet" />를 추가합니다.
<body></body> 태그에는 <script src="images/prism.js"></script>를 추가합니다. 완료하였으면 [저장] 버튼을 눌러 변경된 내용을 저장합니다.
프리즘 적용을 완료하였으면 소스코드가 정상적으로 출력되는지 확인할 차례입니다. 프라임을 글쓰기에 사용하기 위해서는 <pre><code> ... source code ... </code></pre> 태그를 사용해야 합니다. 라인 넘버를 넣고 싶을 때에는 <pre class="line-numbers">를 추가하시기 바랍니다. <code>에 사용하는 언어의 종류를 명시해야 합니다. C언로 작성한 코드는 <code class="language-clike">로 정의합니다. 따라서 전체적인 태그는
<pre class="line-numbers"> <code class="language-clike"> #include <stdio.h> int main() { printf("Hello World") return 0; } </code> </pre> |
위의 소스코드에 프라임을 적용하면 아래와 같은 출력을 얻을 수 있다.
#include <stdio.h>
int main()
{
printf("Hello World")
return 0;
}
프라임의 플러그인에 대한 내용은 별도로 알아보도록 하겠습니다.
'기타' 카테고리의 다른 글
| 소스코드 테마 SytaxHiglighter 설치 (0) | 2018.09.18 |
|---|---|
| CCZ-CROSS 스킨에 인용구 편집 (2) | 2018.07.03 |
| CCZ-CROSS 스킨 - 수정 I (0) | 2018.07.01 |
| CCZ-CROSS 스킨의 사이드바 왼쪽 배치 (0) | 2018.07.01 |
| CCZ-CROSS 스킨 적용 (1) | 2018.06.30 |
