오늘의 스킨제작: highlight.js, 소스코드 하이라이팅
highlight.js는 다양한 언어, 다양한 테마를 제공하는 자바스크립트 기반 문법 강조 도구입니다. 오늘은 스킨에 highlight.js을 적용하는 방법과 제게 필요한 몇 가지 응용을 해볼 생각입니다.
highlight.js 불러오기
스타일시트나 라이브러리를 제공하는 CDN
CDN(콘텐츠 전송 네트워크; Content Delivery Network)는 많은 사람들이 사용하는 콘텐츠를 미리 여러 지역의 네트워크에 저장해놨다가 접속자가 요청하면 콘텐츠를 가장 빠르게 보내줄 수 있는 곳과 자동으로 연결하는 서비스입니다. 스킨의 파일크기 20MB 제한도 있으니 유명한 스타일시트나 자바스크립트 라이브러리 등은 CDN을 이용하는 것을 추천합니다.
CDN을 통해 highlight.js 적용하기
우선 데모페이지를 통해 어떤 테마를 사용할지 결정해야 합니다. 물론 간단한 방법으로 바꿀 수 있으니 스킨과 잘 어울릴지 너무 고민하지 말고 일단 적당히 하나 골라봅시다.
<head>
...
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
...
</head><head>태그 안에 테마 스타일시트와 자바스크립트 라이브러리를 불러오는 태그를 추가합니다. 이 태그는 jsdelivr라는 CDN 서비스를 이용합니다. 예시는 default테마를 불러옵니다. 바꾸고 싶다면 jsdelivr에서 제공하는 스타일 목록을 참고하여 원하는 테마의 이름을 찾아 <link> 태그의 href속성을 변경하면 됩니다.
highlight.js 사용하기
가장 간단한 사용법
<script>hljs.initHighlightingOnLoad();</script>위의 내용을 skin.html의 <head>나 <body>태그 어디든 붙여 넣으면 작동합니다. 단, pre태그 안에 code태그가 있는 형태의 코드블록이어야 하고, 가급적 클래스로 어떤 언어인지 알려주는 게 좋습니다. 마크다운을 사용한다면,
```javascript
console.log('hi!');
이렇게 코드블록 문법을 시작하는 곳에 언어를 지정하는 간단한 방법으로 조건을 만족합니다.
## 블록을 변환 할때마다 뭔가 하기
```js
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
// 변환 직전 하고 싶은 무언가
hljs.highlightBlock(block);
// 변환 직후 하고 싶은 무언가
});
});요소.addEventListener(이벤트, 함수(e)): 요소에 이벤트리스너를 추가합니다. 이벤트는 예약어로 지정되어 있습니다. 지정한 이벤트가 발생하면 함수를 실행합니다.요소.querySelectorAll(선택자): 요소 내부에 CSS 문법으로 쓰여진 선택자에 해당하는 모든 요소를 찾아냅니다.요소들.forEach(함수(개별요소)): 묶인 요소를 하나씩 넣어가며 함수를 실행합니다.
지금 만들고 있는 스킨은 이 방식을 활용하여 코드블록 상단에 어떤 언어로 작성되어 있는 코드인지를 표시합니다.
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| 오늘의 스킨제작: highlight.js, 구문강조 박스 꾸미기 (0) | 2019.11.17 |
|---|---|
| 오늘의 스킨제작: highlight.js 가지고 놀기 (0) | 2019.11.16 |
| 오늘의 스킨제작: 라이트박스수정하기 (0) | 2019.11.14 |
| 오늘의 스킨제작: 자바스크립트로 목차 생성하기 (0) | 2019.11.13 |
| 스킨 제작: CSS 이름규칙 (0) | 2019.11.12 |
댓글