오늘의 스킨제작: highlight.js 가지고 놀기

콘솔에서 가지고 놀기

highlight.js

highlight.js는 웹 문서에 있는 코드 블록의 프로그래밍 언어에 맞춰 문법 강조를 할 수 있도록 해주는 자바스크립트와 스타일시트입니다. 웹페이지에 불러오면 hljs라는 이름의 오브젝트를 사용하여 기능을 사용할 수 있습니다.

지원하는 기본 언어

별다른 옵션 없이 지원하는 언어는 hljs.listLanguages()를 통해 알 수 있습니다. 크롬 웹브라우저를 사용하는 경우에는 개발자도구(

F12

)의 Console 탭을 이용하여 사용할 수 있습니다. highlight.js의 9.16.2 기준으로 다음 내용을 출력합니다.

(34) ["apache", "bash", "coffeescript", "cpp", "cs", "css", "diff", "go",
"http", "ini", "java", "javascript", "json", "kotlin", "less", "lua",
"makefile", "xml", "markdown", "nginx", "objectivec", "perl", "php",
"plaintext", "properties", "python", "ruby", "rust", "scss", "shell",
"sql", "swift", "typescript", "yaml"]

이 내용은 실제 언어의 이름과 표기법이 아니라 그 언어를 담당하는 클래스의 이름이므로 실제로 사용하는 이름과 차이가 있습니다. 가령 cpp의 정식 명칭은 C++, cs의 정식 명칭은 C#입니다.

허용하는 별명

명칭을 모두 타이핑하기에는 시간이 걸리므로 highlight.js는 별칭으로 언어를 지정할 수 있습니다. 어떤 언어의 별칭을 알고 싶다면 hljs.getLanguage(이름이나 별칭)으로 얻은 요소의 aliases을 살펴볼 수 있습니다.

지원하는 모든 언어의 별칭을 출력하는 아래 스크립트를 활용하는 것도 방법입니다.

hljs.listLanguages().forEach((elem)=>{
    let lang = hljs.getLanguage(elem);
    if(lang.aliases){
        console.log(`| ${elem} | ${lang.aliases.join(', ')} |`);
    } else {
        console.log(`| ${elem} | |`);
    }
});

크롬의 콘솔에서 줄 바꿈을 하려면

shift + Enter

를 사용합니다. 출력물의 형태가 어색한 것은 원래 이 스크립트의 목적이 마크다운 양식의 표를 만드는 것이기 때문인데, 필요하다면 출력양식을 원하는 대로 바꾸시면 됩니다.

CDN으로 가져오는 9.16.2 버전의 highlight.js가 지원하는 언어와 별명은 다음과 같습니다.

언어	이름과 별칭
APACHE	apache, apacheconf
BASH	bash, sh, zsh
CoffeeScript	coffeescript, coffee, cson, iced
C++	cpp, c, cc, h, c++, h++, hpp, hh, hxx, cxx
C#	cs, csharp, c#
CSS	css
Diff	diff, patch
Go	go, golang
HTTP	http, https
INI(TOML)	ini, toml
Java	java, jsp
JavaScript	javascript, js, jsx
JSON	json
Kotlin	kotlin, kt
Less	less
Lua	lua
Makefile	makefile, mk, mak
XML	xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, wsf, svg
Markdown	markdown, md, mkdown, mkd
NGINX	nginx, nginxconf
Objective-C	objectivec, mm, objc, obj-c
Perl	perl, pl, pm
PHP	php, php, php3, php4, php5, php6, php7
TEXT	plaintext
.properties (Java)	properties
Python	python, py, gyp, ipython
Ruby	ruby, rb, gemspec, podspec, thor, irb
Rust	rust, rs
SASS(SCSS)	scss
Shell	shell, console
SQL	sql
Swift	swift
TypeScript	typescript, ts
YAML	yaml, yml, YAML, yaml

오늘 한 스킨 작업

문법 강조 작업을 끝낸 코드 블록에 어떤 언어로 작성되었는지를 표시하기 위해 기본 지원 언어의 로고를 모았습니다. 어떤 언어의 로고를 모을지는 위의 방법을 사용했습니다.

변환 작업이 끝나면 해당하는 코드블럭에 language-{이름}클래스가 붙는다는 사실을 발견하였기에 각각을 language-{이름}.png으로 저장했습니다. 별칭으로 문서를 만들어도 이름(상단 표에 이름과 별칭 열 첫 번째 요소)으로 클래스명이 정해집니다.