highlight.js
앞서 '코드 강조 스크립트 :: Syntaxhighlight'포스트를 통해
문법 강조 스크립트의 한 종류인 Syntaxhighlight 사용법을 살펴봤었다.
허나.. 개인적으로 테마와 사용법이 맘에 들지않아서
일일이 수정하려다 그냥 highlight.js도 별도로 추가하기로 했다.
그래서 교체하는 김에 사용법도 함께 포스팅해보겠다.
앞으로 본 블로그는 2가지 문법 강조 스크립터를 사용할 것인데,
저 마다 장단점이 있으니 필요에 따라 선택적으로 사용하면 될 것 같다.
이번 포스팅은 1/4분기 봄을 맞이하여 변화를 주기위해 좌측정렬로 작성해본다.
설치방법
역시나 티스토리 기준으로 작성한다.
먼저, 공식홈페이지로 이동하자.
우측에 특징들이 나열되어 있는데 대략적으로 훑어보자.
150개 언어들과 71개 스타일을 제공하고
자동으로 언어를 감지해서 스타일이 적용되며
둘 이상의 언어라도 가능하다.
또한 노트.js도 이용 가능하며 어떠한 마크업(태그)이라도 동작한다.
끝으로 어떠한 자바스크립트 프레임워크라고 하더라도 호환된다며
개발진들이 말하고 있다.
하지만, highlight 스크립트는 줄 번호(line number) 출력기능을 제공하지 않는다.
개발자는 설계당시 가볍고 간단하게 만드는 것이 목표였고
라인번호는 코드 이용에 있어 혼란을 야기할 수 있으며
표시기능을 제공해야할 필요성을 느끼지 못해서 결국 넣지 않았다고 말한다.
차후 말이 많아지면 검토하겠다고 하는데, 원문은 여기서 확인하면 된다.
계속해서 이번엔 좌측 네모난 창에서 언어(language)와 스타일(style)을 변경해가며 원하는 테마를 찾자.
필자는 위 스크린샷과 동일하게 Monokai_sublime 테마를 사용할 것이다.
테마를 보다 자세히 살펴보고 싶다면 데모 사이트에서 확인 가능하다.
이제 테마를 정했다면 우하단 Get version 버튼을 클릭하자.
이동했다면, 크게 2가지 이용법이 있다.
1) 무설치 버전(CDN 주소 활용)
상단에 cndjs라는 항목의 코드 2줄과 별도의 1줄 스크립트만 추가해줘도 원활한 동작이 가능하다.
하지만 사용하지않는 언어도 포함되어 로딩속도에 지연을 줄 수 있기때문에 개인적으로는 비추천이다.
물론 국내 인터넷 환경에선 그 속도를 직접 체감하긴 어려울 것이다.
그래도 좋다면, 이하 과정을 건너 뛰고 적용법으로 이동하자.
2) Custom 버전
입맛에 따라 골라 쓰는 장점과 페이지 로딩효율이 높기때문에 개인적으로 번거롭더라도 이 방법을 추천한다.
많은 체크박스 중, 원하는 언어를 선택하여 다운로드받자.
필자는 위와 같이 선택하여 다운받았다.
압축을 풀면 위와 같을 것이다.
우리가 필요한건 저기보이는 highlight.pack.js 파일과, 사전에 점찍어둔 테마를 styles 폴더내에서 찾으면 된다.
본 블로그에서는 앞서 골랐던 테마인 monokai-sublime.css 파일을 styles 폴더 안에서 택했다.
이제 티스토리 관리 페이지에서 위와 같이 HTML/CSS 편집 메뉴를 통해 파일업로드 탭으로 이동하여,
자신이 원하는 테마 파일.css 1개와 highlight.pack.js 파일 1개,
총 2개의 파일을 업로드한다.
적용법
이제 HTML 탭으로 이동하여 다음 코드를 추가하자.
이미지와 같이, <head></head> 태그 사이에 아래 코드를 넣어 주면 된다.
<!-- CDN을 이용할 경우 -->
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Custom의 경우 -->
<link href="./images/monokai-sublime.css" rel="stylesheet" type="text/css"> //자신의 테마명을 monokai-sublime.css 대신에 넣자.
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
사용법
이제 본문 작성시 HTML 편집모드에서 <pre><code class="언어">코드 명</code></pre> 으로 사용할 수 있다.
사용 언어에 대한 정보는 링크에서 확인할 수 있다.
단, 부등호(꺽쇠) <, > 는 각각 <, > 로 변경해주어야 한다.
lt는 less than의 약자로, ~보다 작다의 의미이고
gt는 greater than의 약자로, ~보다 크다의 의미다.
만약 일일이 바꾸기 귀찮다면, 일반 에디터에 코드를 붙여넣은 후
HTML모드로 보면 자동으로 바뀌게 된다.
마치며
highlight.js 또한 API를 제공하고 있다.
API란 Application Programming Interface의 약자이며 오늘날엔 보다 포괄적인 의미로 사용되고 있다.
본래 프로그램이나 서버, 클라이언트 등의 요청과 응답을 용이하게 할 수 있도록 도와주고 통제하는 출입의 중개자 역할을 했으나,
이제는 빅데이터 시대에 맞게 데이터 공유, 오픈 소스 등이 활성화됨에 따라 설명서, 기술서 역할도 하고있다.
그러니 보다 자세한 정보는 API 문서를 통해 확인할 수 있다.
끝.
오늘은 삼일절
'IT > 꿀팁' 카테고리의 다른 글
| 알아두면 유용한 사이트 10 :: 픽슬러, Adobe Color CC, Pixabay 등등 (0) | 2016.03.22 |
|---|---|
| 텍스트 편집기 :: Sublime Text 2 (0) | 2016.03.21 |
| 알씨(Al See) :: 이미지 크기, 용량 줄이기, 포맷 변경하기, 회전하기 (0) | 2016.03.19 |
| 포토스케이프 :: GIF 움짤, 애니메이션 만들기 (0) | 2016.03.11 |
| 코드 강조 스크립트 :: Syntax Highlighter (2) | 2016.02.20 |