코드를 이쁘게 표시하는 방법 Prism

demun
퍼블리셔/기술
2018. 12. 20. 10:59

블로그상에서 코드를 이쁘게 보이기 위해서 여러가지 플러그인을 사용해봤습니다.

이전까지만해도 가장 많이 사용했던 플러그인은 highlightjs 였습니다.

구문강조 highlightjs 사용법 -> http://demun.tistory.com/2419?category=388459

블로그상에서 구문강조 할때는 여러가지 유의해야 합니다 막 바꾸다가는 이전 작업물이 제대로 나오지 않는다던가, 또는 다시 작업해야하는 양이 많아질수 있습니다.

저도 이전에 highlightjs 를 사용했기때문에 이번에는 prismjs 로 변경을 해서 작업해야하는 양이 좀 되긴 합니다.

제가 구문강조 플러그인 선택한 이유

용량이 적습니다.(원하는 언어, 기능만 선택해서 사용가능)
기능이 많습니다.(숫자 표시, 하이라이트 기능 등등 이것도 원하는것만 사용가능)
사용법이 무척 간단합니다.

구문강조 Prism 사용하는 법

파일 포함하기. js 와 css 만 포함하면 끝입니다.

<!DOCTYPE html>
<html>
<head>
	...
	<link href="./images/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="./images/prism.js"></script>
</body>
</html>

이렇게 js 와 css 만 포함하면 됩니다.

사용하는 방법은 사용하고자 하는 블럭에 language-xxxx 형식으로 언어만 지정하면 끝입니다.

<pre><code class="language-xxxx">....</code></pre>

html은 language-html 또는 language-markup 으로 css는 language-css 으로 javascript는 language-js 또는 language-javascript 등으로 언어만 지정하면 됩니다.

js 와 css 파일은 prism 다운로드 페이지에서 다운받으면 됩니다.

https://prismjs.com/download.html

기본적으로 압축된 버젼(Minified version)으로 사용하고 1번부분에서 테마를 지정할 수 있습니다.

선택하면 바로 적용되며 우측에 DARK, FUNKY, OKAIDIA .. 등을 클릭하면 어떤 테마인지 미리볼수 있습니다.

2번 언어에서는 기본적으로, html,css,javascript 등이 포함된 버젼이 사용되고, 추가적으로 언어를 선택만하면 추가됩니다.

아래로 스크롤을 하면 플러그인을 선택하는 곳이 있습니다.

저는 대략 Line Highligh 와 Line Numbers 기능을 선택했습니다.

이렇게 원하는 기능을 선택하면 아래에 js 와 css 부분에 자동으로 추가됩니다.

하단에 다운로드를 클릭해서 파일을 사용하면 됩니다.

테마는 https://prismjs.com 나 다운로드페이지 https://prismjs.com/download.html 등에서 미리볼수 있습니다.

플러그인을 어떻게 사용하는지는 각각의 플러그인 페이지에 나와있습니다.

플로그인 리스트가 있으면 좋을텐데 직접 주소창에 적고 확인해야 합니다.

주소에 플러그인 이름을 적으면 해당 페이지로 이동합니다.

line-highlight 기능은 https://prismjs.com/plugins/line-highlight 로, line-numbers 는 https://prismjs.com/plugins/line-numbers 로 이동하면 사용법을 볼 수 있습니다.

추가 링크

구문강조 highlightjs 사용법 -> http://demun.tistory.com/2419

티스토리 치환자 본문에 표시하는 방법 -> http://demun.tistory.com/2027

저작자표시 비영리 변경금지

개 개

demun(대문블로그)