prism.css과거에 무언가 설정해 놓고, 아무 생각없이 스킨을 변경해버렸더니 모든 수정 내용이 날아가 버렸다.
그 덕에 예전에 다 설정해놓고 써 놓았던 코드 하일라이트 기능은 모두 날아가 버렸다.
그래서 부랴부랴 highlight 기능의 대명사인 http://alexgorbatchev.com/SyntaxHighlighter/ 사이트에서 적용하려고 했는데 git에 담긴 소스를 받아보니, css를 scss로 변경해서 적용하고 뭔가.... 좀 많이 달라진 느낌.
게다가 설치 방법을 이해 못해서 헤매다가... 포기했다.
그러다가, prism http://prismjs.com/ 이라는 곳을 알게 되서 그곳의 소스를 받아왔다.
특이한 건, 소스파일 유형(C#, Java, C++ 등등) 을 선택하면 그에 맞게 알아서 합쳐서 두개의 파일만 등록하면 되게 해놓았다. 두개의 파일안에 선택한 모든 소스 코드들이 담기는 것 같다. 더욱이 압축형으로 만들어준다.
지금 첨부파일에 등록한 파일이 그 파일들이다.
이 파일들을 티스토리 적용하는 방법을 기록한다.
- 먼저 Tistory에 접속해서 관리자 모드로 접속한다.
- 왼편 메뉴의 꾸미기 -> HTML, CSS 편집을 선택한다.
- 파일 업로드 탭으로 들어가 하단의 "추가" 버튼을 눌러 해당 js와 css 파일을 올린다.
- 정상적으로 올라가면 images/prism.js 와 images/prism.css가 보일 것이다.
- 이제 HTML 탭에 들어가서 HTML 소스를 연다. 상단의 <head> ~ </head> 상이에 다음과 같은 코드를 입력한다.
<link type="text/css" rel="stylesheet" href="./images/prism.css"/> - 좀 더 아래로 이동해서 <body > 부분 아래에 다음과 같은 코드를 입력한다.
<script type="text/javascript" src="./images/prism.js"></script> - 이제 상단의 저장 버튼을 눌러 저장한다.
자 이제 Highlight 하기 위한 모든 준비가 완료되었다.
이제 다음과 같이 코드를 입력하면 된다.
<pre>
<code class="lang-html">
코드~~~~~~~
</code>
</pre>소스 유형에 따라 class = "lang-xxxxx" 부분, xxxx 에 자신의 소스 유형을 넣어주면 된다.
다음 표의 내용이 바로 각 소스코드 유형별 이름이다.( 붉은색 부분이 이름 )
- Markup -
markup - CSS -
css - C-like -
clike - JavaScript -
javascript - ABAP -
abap - ActionScript -
actionscript - Ada -
ada - Apache Configuration -
apacheconf - APL -
apl - AppleScript -
applescript - Arduino -
arduino - AsciiDoc -
asciidoc - ASP.NET (C#) -
aspnet - AutoHotkey -
autohotkey - AutoIt -
autoit - Bash -
bash - BASIC -
basic - Batch -
batch - Bison -
bison - Brainfuck -
brainfuck - Bro -
bro - C -
c - C# -
csharp - C++ -
cpp - CoffeeScript -
coffeescript - Crystal -
crystal - CSS Extras -
css-extras - D -
d - Dart -
dart - Django/Jinja2 -
django - Diff -
diff - Docker -
docker - Eiffel -
eiffel - Elixir -
elixir - Erlang -
erlang - F# -
fsharp - Flow -
flow - Fortran -
fortran - Gherkin -
gherkin - Git -
git - GLSL -
glsl - Go -
go - GraphQL -
graphql - Groovy -
groovy - Haml -
haml - Handlebars -
handlebars - Haskell -
haskell - Haxe -
haxe - HTTP -
http - Icon -
icon - Inform 7 -
inform7 - Ini -
ini - J -
j - Java -
java - Jolie -
jolie - JSON -
json - Julia -
julia - Keyman -
keyman - Kotlin -
kotlin - LaTeX -
latex - Less -
less - LiveScript -
livescript - LOLCODE -
lolcode - Lua -
lua - Makefile -
makefile - Markdown -
markdown - MATLAB -
matlab - MEL -
mel - Mizar -
mizar - Monkey -
monkey - N4JS -
n4js - NASM -
nasm - nginx -
nginx - Nim -
nim - Nix -
nix - NSIS -
nsis - Objective-C -
objectivec - OCaml -
ocaml - OpenCL -
opencl - Oz -
oz - PARI/GP -
parigp - Parser -
parser - Pascal -
pascal - Perl -
perl - PHP -
php - PHP Extras -
php-extras - PowerShell -
powershell - Processing -
processing - Prolog -
prolog - .properties -
properties - Protocol Buffers -
protobuf - Pug -
pug - Puppet -
puppet - Pure -
pure - Python -
python - Q -
q - Qore -
qore - R -
r - React JSX -
jsx - Ren'py -
renpy - Reason -
reason - reST (reStructuredText) -
rest - Rip -
rip - Roboconf -
roboconf - Ruby -
ruby - Rust -
rust - SAS -
sas - Sass (Sass) -
sass - Sass (Scss) -
scss - Scala -
scala - Scheme -
scheme - Smalltalk -
smalltalk - Smarty -
smarty - SQL -
sql - Stylus -
stylus - Swift -
swift - Tcl -
tcl - Textile -
textile - Twig -
twig - TypeScript -
typescript - VB.Net -
vbnet - Verilog -
verilog - VHDL -
vhdl - vim -
vim - Wiki markup -
wiki - Xojo (REALbasic) -
xojo - YAML -
yaml
물론 완전하지는 않다. 다음과 같은 조건이 붙는다.
- 코드 부분은 HTML 인코딩이 되어있어한다.
웹을 좀 다뤄보신 분들은 단박에 이해 될 것이고, 아닌 분들은 아마도 이게 뭔가 싶을 것이다.
즉 HTML 내 소스 중 중요한 부분인 "<" 와 "/>" 부분인데, 코드를 그대로 입력하게 되면,
십중 팔구는 소스 안에 있는 "<" 와 "/>" 부분 때문에, 소스 코드 하일라이트는 안되고 소스가 사라져 보이거나
전혀 다른 화면이 표시될 수 있다. 최소한 소스들이 HTML 인코딩이 필요한지 여부는 판단해야 한다.
다행히 (물론 인터넷이 되는 환경에서) 많은 사이트들 중 무료로 HTML 인코딩을 해주는 사이트들이 많다.
그 사이트에 자신의 소스를 한번 넣어보면 변환되서 표시해주는 내용으로 가져다 쓰면 된다. - XHTML 기반 HTML 5 지원 웹브라우저에서나 된다.
현재 이 코드를 만드는 로직은 <code> ~ </code> 라는 독특한 태그 안에서 처리된다.
웹브라우저에서 인식할 수 있는 태그가 아닌데, XHTML 즉, XML 기반의 HTML 파싱이 되고,
HTML5 특성을 잘 수용할 수 있어야 한다는 것이다.
사실 대부분 웹브라우징을 할 때는 HTML5가 잘 지원되는 크롬, 엣지, 파이어폭스 등 메이저 웹브라우저를 이용하기 때문에 큰 문제는 아닐 듯 싶다.
뭐... 소스 안보인다고 할 사람도 없을 것이고 ㅋ
이번 스킨 변경 후 날려 먹은 경험 때문인지, 기록의 중요성이 다시금 새록 새록하고 해서 글로 남긴다.
아... 이제 나머지 소스 부분을 위의 내용 처럼 변경해야 하는데... 좀 많이 귀찮다.
728x90
