티스토리 highlight.js 적용방법 / 코드 색깔 변경 및 이쁘게 하기

티스토리 highlight.js 적용방법 / 코드 색깔 변경 및 이쁘게 하기

반응형

안녕하세요

공부하는 웅이입니다.

티스토리에서는 코드를 작성하는 블로거를 위해, 글을 작성할때 코드를 다양한 방식으로 넣을 수 있도록 스킨 편집 기능을 제공해줍니다.

일반적으로 코드를 입력할때, ... 버튼을 클릭하고, 코드블록 이라는 버튼을 클릭하여 코드를 작성할 수 있습니다.

이때, 기존의 스타일이 아닌 새로운 스타일을 넣기 위해서는 따로 작업을 수행해줘야 합니다.

코드를 넣을 때 이쁘게 보이기 위해서, 기본 코드 말고 css로 이쁘게 하는 방법은 없을까하여 방법을 찾아 공유하고자 합니다.

다른 방법들도 있겠지만, 저는 제가 사용하는 간단한 방법을 알려드리려 합니다.

간단합니다. 5분이면 누구나 따라 할 수 있습니다.

1. 접속합니다.

https://highlightjs.org/

2. download를 받습니다.

https://highlightjs.org/download/

3. 원하는 테마를 찾습니다.

https://highlightjs.org/static/demo/

테마 명만 해도 다음과 같이 많습니다.

Default

A 11 Y Dark

A 11 Y Light

Agate

An Old Hope

Androidstudio

Arduino Light

Arta

Ascetic

Atom One Dark

Atom One Dark Reasonable

Atom One Light

Base16 / 3024

Base16 / Apathy

Base16 / Apprentice

Base16 / Ashes

Base16 / Atelier Cave

Base16 / Atelier Cave Light

Base16 / Atelier Dune

Base16 / Atelier Dune Light

Base16 / Atelier Estuary

Base16 / Atelier Estuary Light

Base16 / Atelier Forest

Base16 / Atelier Forest Light

Base16 / Atelier Heath

Base16 / Atelier Heath Light

Base16 / Atelier Lakeside

Base16 / Atelier Lakeside Light

Base16 / Atelier Plateau

Base16 / Atelier Plateau Light

Base16 / Atelier Savanna

Base16 / Atelier Savanna Light

Base16 / Atelier Seaside

Base16 / Atelier Seaside Light

Base16 / Atelier Sulphurpool

Base16 / Atelier Sulphurpool Light

Base16 / Atlas

Base16 / Bespin

Base16 / Black Metal

Base16 / Black Metal Bathory

Base16 / Black Metal Burzum

Base16 / Black Metal Dark Funeral

Base16 / Black Metal Gorgoroth

Base16 / Black Metal Immortal

Base16 / Black Metal Khold

Base16 / Black Metal Marduk

Base16 / Black Metal Mayhem

Base16 / Black Metal Nile

Base16 / Black Metal Venom

Base16 / Brewer

Base16 / Bright

Base16 / Brogrammer

Base16 / Brush Trees

Base16 / Brush Trees Dark

Base16 / Chalk

Base16 / Circus

Base16 / Classic Dark

Base16 / Classic Light

Base16 / Codeschool

Base16 / Colors

Base16 / Cupcake

Base16 / Cupertino

Base16 / Danqing

Base16 / Darcula

Base16 / Dark Violet

Base16 / Darkmoss

Base16 / Darktooth

Base16 / Decaf

Base16 / Default Dark

Base16 / Default Light

Base16 / Dirtysea

Base16 / Dracula

Base16 / Edge Dark

Base16 / Edge Light

Base16 / Eighties

Base16 / Embers

Base16 / Equilibrium Dark

Base16 / Equilibrium Gray Dark

Base16 / Equilibrium Gray Light

Base16 / Equilibrium Light

Base16 / Espresso

Base16 / Eva

Base16 / Eva Dim

Base16 / Flat

Base16 / Framer

Base16 / Fruit Soda

Base16 / Gigavolt

Base16 / Github

Base16 / Google Dark

Base16 / Google Light

Base16 / Grayscale Dark

Base16 / Grayscale Light

Base16 / Green Screen

Base16 / Gruvbox Dark Hard

Base16 / Gruvbox Dark Medium

Base16 / Gruvbox Dark Pale

Base16 / Gruvbox Dark Soft

Base16 / Gruvbox Light Hard

Base16 / Gruvbox Light Medium

Base16 / Gruvbox Light Soft

Base16 / Hardcore

Base16 / Harmonic 16 Dark

Base16 / Harmonic 16 Light

Base16 / Heetch Dark

Base16 / Heetch Light

Base16 / Helios

Base16 / Hopscotch

Base16 / Horizon Dark

Base16 / Horizon Light

Base16 / Humanoid Dark

Base16 / Humanoid Light

Base16 / Ia Dark

Base16 / Ia Light

Base16 / Icy Dark

Base16 / Ir Black

Base16 / Isotope

Base16 / Kimber

Base16 / London Tube

Base16 / Macintosh

Base16 / Marrakesh

Base16 / Materia

Base16 / Material

Base16 / Material Darker

Base16 / Material Lighter

Base16 / Material Palenight

Base16 / Material Vivid

Base16 / Mellow Purple

Base16 / Mexico Light

Base16 / Mocha

Base16 / Monokai

Base16 / Nebula

Base16 / Nord

Base16 / Nova

Base16 / Ocean

Base16 / Oceanicnext

Base16 / One Light

Base16 / Onedark

Base16 / Outrun Dark

Base16 / Papercolor Dark

Base16 / Papercolor Light

Base16 / Paraiso

Base16 / Pasque

Base16 / Phd

Base16 / Pico

Base16 / Pop

Base16 / Porple

Base16 / Qualia

Base16 / Railscasts

Base16 / Rebecca

Base16 / Ros Pine

Base16 / Ros Pine Dawn

Base16 / Ros Pine Moon

Base16 / Sagelight

Base16 / Sandcastle

Base16 / Seti Ui

Base16 / Shapeshifter

Base16 / Silk Dark

Base16 / Silk Light

Base16 / Snazzy

Base16 / Solar Flare

Base16 / Solar Flare Light

Base16 / Solarized Dark

Base16 / Solarized Light

Base16 / Spacemacs

Base16 / Summercamp

Base16 / Summerfruit Dark

Base16 / Summerfruit Light

Base16 / Synth Midnight Terminal Dark

Base16 / Synth Midnight Terminal Light

Base16 / Tango

Base16 / Tender

Base16 / Tomorrow

Base16 / Tomorrow Night

Base16 / Twilight

Base16 / Unikitty Dark

Base16 / Unikitty Light

Base16 / Vulcan

Base16 / Windows 10

Base16 / Windows 10 Light

Base16 / Windows 95

Base16 / Windows 95 Light

Base16 / Windows High Contrast

Base16 / Windows High Contrast Light

Base16 / Windows Nt

Base16 / Windows Nt Light

Base16 / Woodland

Base16 / Xcode Dusk

Base16 / Zenburn

Brown Paper

Codepen Embed

Color Brewer

Dark

Devibeans

Docco

Far

Foundation

Github

Github Dark

Github Dark Dimmed

Gml

Googlecode

Gradient Dark

Gradient Light

Grayscale

Hybrid

Idea

Ir Black

Isbl Editor Dark

Isbl Editor Light

Kimbie Dark

Kimbie Light

Lightfair

Lioshi

Magula

Mono Blue

Monokai

Monokai Sublime

Night Owl

Nnfx Dark

Nnfx Light

Nord

Obsidian

Paraiso Dark

Paraiso Light

Pojoaque

Purebasic

Qtcreator Dark

Qtcreator Light

Rainbow

Routeros

School Book

Shades Of Purple

Srcery

Stackoverflow Dark

Stackoverflow Light

Sunburst

Tomorrow Night Blue

Tomorrow Night Bright

사용되는 언어별로 어떤식으로 작성되는지 알 수 있습니다 : Bash,HTML, XML, C++, C#,CSS,Markdown,Diff,Ruby,Go,TOML, also INI,Java,JavaScript,JSON

,Kotlin,Less,Lua,Makefile,Perl,Objective-C,PHP,PHP Template, Python 등등

4. 마음에 드는 테마를 고르고, 다운로드 받은 파일의 압축을 풀어줍니다.

5. 압축을 풀어준 파일에서 highlight.min.js 파일만 티스토리 스킨편집 html /css/파일업로드에서 '파일업로드' 를 통해 올려줍니다.

6. 사이트에서 적용하고자 하는 테마를 찾은 후, styles 폴더에서 똑같은 파일을 찾습니다. 그후, 해당 파일을 5번 처럼 파일업로드를 통해 올려줍니다.

7. 마지막입니다, html 단에서 head 태그 위에 다음과 같은 코드를 넣습니다.

여기서 href 만 본인이 적용하고자 하는 스타일 테마명에 따라 변경해주면 적용이 끝납니다.

위의 코드

hljs.initHighlightingOnLoad();

변경전

변경후

횔씬 가독성이 좋고, 이뻐짐을 알 수 있습니다.

반응형

from http://ongbike.tistory.com/521 by ccl(A) rewrite - 2021-12-28 19:01:27