티스토리에 highlight.js 문법강조 적용(syntax highlighting for the web)

이전에 SyntaxHighlighter 를 티스토리에 적용하는 법을 포스팅 한적이 있는데요.

오늘은 highlight.js 라는 프레임워크로 티스토리에 문법강조를 적용해보겠습니다.

↑ 적용된 모습~

1. highlight.js 를 다운받기위해 공식사이트인 https://highlightjs.org 에 접속합니다.

Get version 버튼을 누르면 다운로드 페이지로 이동됩니다.

2. Custom package 를 보면 자주쓰는 언어들이 체크 되어있는데 필요하신 언어들을 체크하거나 뺄 수 있습니다.

원하는 항목들을 체크 완료하였다면 아래의 'download' 버튼을 누르면 'highlight.zip' 파일이 다운로드 됩니다.

highlight.zip 파일의 내용

highlight.zip 파일 -> styles 폴더

이제 사용할 파일을 티스토리나 홈페이지에 업로드하여 적용해야겠죠?

highlight.pack.js 는 필수 자바스크립트 파일입니다.

css 파일은 테마파일인데 원하는것만 쓰셔도 됩니다.

3. 티스토리에 업로드 합니다.

↑ HTML/CSS 편집 클릭

↑ 추가 버튼 클릭

↑ js 파일 선택하여 업로드

↑ css 파일 선택하여 업로드 (난 모두 선택하여 업로드 하였음)

4. HTML 편집 (스킨편집)

head 태그 사이에 아래 코드를 삽입합니다.

<link rel="stylesheet" href="./images/default.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

(사실 script 는 body 태그의 제일 하단에 넣는것이 성능적인면에서 더 좋습니다)

default.css 는 다른 스타일 테마로 변경가능합니다.

(저는 default.css 테마가 아닌 tomorrow-night-eighties.css 테마를 쓰고 있습니다.)

5. 실제 글쓰기에서 코드 적용시켜봅니다.

코드는 이런식으로 쓰면 됩니다. (html 인 경우)

<pre><code class="html">...</code></pre>

- 끝 -

6. 사이트에 업로드 없이 이용하는 법.

둘중 원하는 사이트를 골라 해당 구문을 head 태그 사이에 넣으면 됩니다.

7. 언어 코드 정리 (Language names and aliases)

언어에 따라 class 명을 다르게 해야되는데, 그 class 명을 정리해논것입니다.

Language names and aliases

1C	1c
Access logs	accesslog
ARM assembler	armasm, arm
AVR assembler	avrasm
ActionScript	actionscript, as
Apache	apache, apacheconf
AppleScript	applescript, osascript
AsciiDoc	asciidoc, adoc
AspectJ	aspectj
AutoHotkey	autohotkey
AutoIt	autoit
Axapta	axapta
Bash	bash, sh, zsh
Basic	basic
Brainfuck	brainfuck, bf
C#	cs, csharp
C++	cpp, c, cc, h, c++, h++, hpp
C/AL	cal
Cache Object Script	cos, cls
CMake	cmake, cmake.in
CSS	css
Cap’n Proto	capnproto, capnp
Clojure	clojure, clj
CoffeeScript	coffeescript, coffee, cson, iced
Crmsh	crmsh, crm, pcmk
Crystal	crystal, cr
D	d
DNS Zone file	dns, zone, bind
DOS	dos, bat, cmd
Dart	dart
Delphi	delphi
Diff	diff, patch
Django	django, jinja
Dockerfile	dockerfile, docker
DTS (Device Tree)	dts
Dust	dust, dst
Elixir	elixir
Elm	elm
Erlang	erlang, erl
F#	fsharp, fs
FIX	fix
Fortran	fortran, f90, f95
G-Code	gcode, nc
Gams	gams, gms
GAUSS	gauss, gss
Gherkin	gherkin
Go	go, golang
Golo	golo, gololang
Gradle	gradle
Groovy	groovy
HTML, XML	xml, html, xhtml, rss, atom, xsl, plist
HTTP	http, https
Haml	haml
Handlebars	handlebars, hbs, html.hbs, html.handlebars
Haskell	haskell, hs
Haxe	haxe, hx
Ini	ini
Inform7	inform7, i7
IRPF90	irpf90
JSON	json
Java	java, jsp
JavaScript	javascript, js, jsx
Lasso	lasso, ls, lassoscript
Less	less
Lisp	lisp
LiveCode Server	livecodeserver
LiveScript	livescript, ls
Lua	lua
Makefile	makefile, mk, mak
Markdown	markdown, md, mkdown, mkd
Mathematica	mathematica, mma
Matlab	matlab
Maya Embedded Language	mel
Mercury	mercury
Mizar	mizar
Mojolicious	mojolicious
Monkey	monkey
NSIS	nsis
Nginx	nginx, nginxconf
Nimrod	nimrod, nim
Nix	nix
OCaml	ocaml, ml
Objective C	objectivec, mm, objc, obj-c
OpenGL Shading Language	glsl
OpenSCAD	openscad, scad
Oracle Rules Language	ruleslanguage
Oxygene	oxygene
PF	pf, pf.conf
PHP	php, php3, php4, php5, php6
Parser3	parser3
Perl	perl, pl
PowerShell	powershell, ps
Processing	processing
Prolog	prolog
Protocol Buffers	protobuf
Puppet	puppet, pp
Python	python, py, gyp
Python profiler results	profile
Q	k, kdb
QML	qml
R	r
RenderMan RIB	rib
RenderMan RSL	rsl
Roboconf	graph, instances
Ruby	ruby, rb, gemspec, podspec, thor, irb
Rust	rust, rs
SCSS	scss
SQL	sql
STEP Part 21	p21, step, stp
Scala	scala
Scheme	scheme
Scilab	scilab, sci
Smali	smali
Smalltalk	smalltalk, st
Stan	stan
Stata	stata
Stylus	stylus, styl
Swift	swift
Tcl	tcl, tk
TeX	tex
Thrift	thrift
TP	tp
Twig	twig, craftcms
TypeScript	typescript, ts
VB.Net	vbnet, vb
VBScript	vbscript, vbs
VHDL	vhdl
Vala	vala
Verilog	verilog, v
Vim Script	vim
x86 Assembly	x86asm
XL	xl, tao
XQuery	xpath, xq
Zephir	zephir, zep

그밖에 기능들이나 사용법은 공식사이트 참고  https://highlightjs.org