소개
html 문서를 작성하다 보면 문서 안에 소스코드를 삽입해야 할 때가 있다. 그런데, 소스코드는 본문과 섞이면 읽기가 힘들어지기 때문에 일반적인 문단 흐름과는 독립적으로 편집을 해주는 것이 좋다. 이 목적을 위해서 온라인에서 자동으로 소스에 색을 입혀주는 서비스를 이용해서 코드변환을 한 후에 삽입을 하는 경우도 있지만, 이런 경우 화면의 크기에 따라 소스코드를 읽기 어려워질 수 있다. 때문에, 소스코드를 자주 보여줘야 하는 웹페이지에서는 자바스크립트를 사용해서 소스코드를 표현한다. 이 기능을 하는 자바스크립트를 syntaxhighlighter라고 한다.
아마도 가장 많이 사용되는 syntaxhighlighter는 동일한 이름의 syntaxhighlighter라는 자바스크립트다. syntaxhighlighter라는 자바스크립트가 좋기는 하지만, 마지막으로 발표된 3.0.90은 2016년 초에 나왔고, 버전 4의 발표가 미뤄짐에 따라 디자인이 좀 촌스러워졌다. 그리고, 속도가 좀 느리다. 여기서는 비교적 적은 용량에 사용하기 쉬운 Google Code Prettify를 소개한다.
Google Code Prettify
Google Code Prettify는 구글 코드 아카이브 사이트에 가보면 마지막 공식 발표가 2015년 4월로 적혀 있다. 하지만, 그 페이지에 있는 링크로 깃헙을 가보면 아래와 같이 2015년 12월 4일자 릴리즈를 볼 수 있다. zip이나 tar.gz를 클릭하면 다운로드 받을 수 있다.
Google Code Prettify(이하 GCP)를 쓰는 가장 큰 장점은 설치 없이 사용해도 꽤 괜찮은 속도가 나오고 안정적이라는 것이다. 여기서는 설치없이 사용하는 방법을 다룬다.
GCP는 html문서의 head 태그 또는 body 태그 내부의 아무데나 다음 한 줄을 추가하면 바로 사용이 가능하다.
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
혹시 이전에 GCP를 사용하다가 문제가 생겨서 이 문서를 찾았다면 기존에 스크립트의 링크로 잡았던 주소를 위 주소로 업데이트 해야 할 것이다. 기존에 사용하던 rawgit.com의 서비스가 종료되고 있거나 이미 종료되었기 때문에 생기는 문제다. 혹시 위 주소가 아닌 곳에서 GCP를 사용하고 있다면 2019년 10월 전에는 위 주소로 변경해야 한다.
기본 사용법
소스코드를 <pre class='prettyprint'>...</pre> 또는 <pre class='prettyprint'>...</pre>에 삽입하면 된다. 소스코드의 언어는 GCP가 알아서 판단한다. 여기서 주의할 것은 소스코드의 <는 모두 <로 입력해야 한다. 만약 문단 안에서도 사용하고 싶다면 <code class='prettyprint'>...</code> 또는 <code class="prettyprint">...</code> 안에 코드를 삽입하면 된다. 이것만 알면 사용을 할 수 있는데, 혹시 문제가 생겨서 도움이 필요하다면 다음 링크가 도움이 될 수 있다:
코드 테마
코드블럭의 모양을 바꿀 수도 있는데, 사용 가능한 코드 테마는 다음 링크를 가면 확인할 수 있다.
직접 설치를 한 것이 아니라면 앞서 script에 끼워넣는 옵션에 다음과 같이 이름만 적어주면 사용이 가능하다. (아래 예는 공식 사이트에 소개된 sunburst 테마를 적용하는 것이다.)
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script>
또, 직접 설치했다면 공식 홈페이지의 테마 외에 다음 링크에서 제공하는 테마를 가져다 사용할 수 있다.
Color Themes for Google Code Prettify
코드 줄번호 출력
아래와 같이 pre 태그의 class명에 linenums를 추가하면 된다.
<pre class="prettyprint linenums">
#include <stdio.h>
int main()
{
printf("Hello, world\n");
return 0;
}
</pre>
위와 같이 입력한 결과는 다음과 같다.
#include <stdio.h>
int main()
{
printf("Hello, world\n");
return 0;
}
코드 글꼴 설정
소스코드의 글꼴은 스타일시트에서 font-family를 정해주면 된다. 만약 외부 css 파일을 사용하지 않고 html 파일 안에서 직접 지정한다면 다음과 같은 방식이 될 것이다. (글꼴을 d2coding으로 설정했다.)
<!DOCTYPE html>
<html>
<head>
<style>
pre,
code {
font-family: d2coding;
}
</style>
</head>
<body>
...
</body>
</html>
'HTML CSS etc' 카테고리의 다른 글
| 전자책 출판을 위한 HTML - 05 - 특수문자 입력법 (0) | 2018.10.19 |
|---|---|
| 전자책 출판을 위한 HTML - 04 - align, width (0) | 2018.10.17 |
| 전자책 출판을 위한 HTML - 03 - 주석(comment) (0) | 2018.10.15 |
| 전자책 출판을 위한 HTML - 02 - br, h1, h2, h3, ..., h6, hr (0) | 2018.10.14 |
| 전자책 출판을 위한 HTML - 01 - html, head, title, body, p (0) | 2018.08.20 |