본문 바로가기

OVERCODE

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

HTML/CSS/JS

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

오버코드 2016. 1. 26. 15:34



이전에 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

1C1c
Access logsaccesslog
ARM assemblerarmasm, arm
AVR assembleravrasm
ActionScriptactionscript, as
Apacheapache, apacheconf
AppleScriptapplescript, osascript
AsciiDocasciidoc, adoc
AspectJaspectj
AutoHotkeyautohotkey
AutoItautoit
Axaptaaxapta
Bashbash, sh, zsh
Basicbasic
Brainfuckbrainfuck, bf
C#cs, csharp
C++cpp, c, cc, h, c++, h++, hpp
C/ALcal
Cache Object Scriptcos, cls
CMakecmake, cmake.in
CSScss
Cap’n Protocapnproto, capnp
Clojureclojure, clj
CoffeeScriptcoffeescript, coffee, cson, iced
Crmshcrmsh, crm, pcmk
Crystalcrystal, cr
Dd
DNS Zone filedns, zone, bind
DOSdos, bat, cmd
Dartdart
Delphidelphi
Diffdiff, patch
Djangodjango, jinja
Dockerfiledockerfile, docker
DTS (Device Tree)dts
Dustdust, dst
Elixirelixir
Elmelm
Erlangerlang, erl
F#fsharp, fs
FIXfix
Fortranfortran, f90, f95
G-Codegcode, nc
Gamsgams, gms
GAUSSgauss, gss
Gherkingherkin
Gogo, golang
Gologolo, gololang
Gradlegradle
Groovygroovy
HTML, XMLxml, html, xhtml, rss, atom, xsl, plist
HTTPhttp, https
Hamlhaml
Handlebarshandlebars, hbs, html.hbs, html.handlebars
Haskellhaskell, hs
Haxehaxe, hx
Iniini
Inform7inform7, i7
IRPF90irpf90
JSONjson
Javajava, jsp
JavaScriptjavascript, js, jsx
Lassolasso, ls, lassoscript
Lessless
Lisplisp
LiveCode Serverlivecodeserver
LiveScriptlivescript, ls
Lualua
Makefilemakefile, mk, mak
Markdownmarkdown, md, mkdown, mkd
Mathematicamathematica, mma
Matlabmatlab
Maya Embedded Languagemel
Mercurymercury
Mizarmizar
Mojoliciousmojolicious
Monkeymonkey
NSISnsis
Nginxnginx, nginxconf
Nimrodnimrod, nim
Nixnix
OCamlocaml, ml
Objective Cobjectivec, mm, objc, obj-c
OpenGL Shading Languageglsl
OpenSCADopenscad, scad
Oracle Rules Languageruleslanguage
Oxygeneoxygene
PFpf, pf.conf
PHPphp, php3, php4, php5, php6
Parser3parser3
Perlperl, pl
PowerShellpowershell, ps
Processingprocessing
Prologprolog
Protocol Buffersprotobuf
Puppetpuppet, pp
Pythonpython, py, gyp
Python profiler resultsprofile
Qk, kdb
QMLqml
Rr
RenderMan RIBrib
RenderMan RSLrsl
Roboconfgraph, instances
Rubyruby, rb, gemspec, podspec, thor, irb
Rustrust, rs
SCSSscss
SQLsql
STEP Part 21p21, step, stp
Scalascala
Schemescheme
Scilabscilab, sci
Smalismali
Smalltalksmalltalk, st
Stanstan
Statastata
Stylusstylus, styl
Swiftswift
Tcltcl, tk
TeXtex
Thriftthrift
TPtp
Twigtwig, craftcms
TypeScripttypescript, ts
VB.Netvbnet, vb
VBScriptvbscript, vbs
VHDLvhdl
Valavala
Verilogverilog, v
Vim Scriptvim
x86 Assemblyx86asm
XLxl, tao
XQueryxpath, xq
Zephirzephir, zep

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



Comments