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

안녕하세요
공부하는 웅이입니다.

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

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

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

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

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

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

1. 접속합니다.

https://highlightjs.org/

highlight.js

Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.

highlightjs.org

2. download를 받습니다.

https://highlightjs.org/download/

Getting highlight.js

Hosted A prebuilt version of highlight.js with 34 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlig

highlightjs.org

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

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

highlight.js demo

highlightjs.org

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

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 만 본인이 적용하고자 하는 스타일 테마명에 따라 변경해주면 적용이 끝납니다.

위의 코드

<!--코트 하이라이트 -->
<link href="./images/qualia.min.css" rel="stylesheet" type="text/css">
<script src="./images/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

변경전

변경후

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

저작자표시

'🧩일상 > 📰테크' 카테고리의 다른 글

차량을 타게될 미래의 나에게 쓰는 정비 관련 글 (0)	2022.02.22
한양 공대에서 배운 공학 지식들 Part2. (0)	2022.02.12
포르쉐 자전거를 서울에서 탈 수 있다고? (0)	2021.11.18
아이패드 듀얼모니터(윈도우) (0)	2021.11.06
미래에는 우리 모두 가면을 쓰는 모습? (0)	2021.11.02

'🧩일상 > 📰테크' 카테고리의 다른 글

티스토리툴바