prism.css

prism.js


과거에 무언가 설정해 놓고, 아무 생각없이 스킨을 변경해버렸더니 모든 수정 내용이 날아가 버렸다.
그 덕에 예전에 다 설정해놓고 써 놓았던 코드 하일라이트 기능은 모두 날아가 버렸다.

그래서 부랴부랴 highlight 기능의 대명사인 http://alexgorbatchev.com/SyntaxHighlighter/ 사이트에서 적용하려고 했는데 git에 담긴 소스를 받아보니, css를 scss로 변경해서 적용하고 뭔가.... 좀 많이 달라진 느낌.

게다가 설치 방법을 이해 못해서 헤매다가... 포기했다.


그러다가, prism http://prismjs.com/ 이라는 곳을 알게 되서 그곳의 소스를 받아왔다. 
특이한 건, 소스파일 유형(C#, Java, C++ 등등) 을 선택하면 그에 맞게 알아서 합쳐서 두개의 파일만 등록하면 되게 해놓았다. 두개의 파일안에 선택한 모든 소스 코드들이 담기는 것 같다. 더욱이 압축형으로 만들어준다.

지금 첨부파일에 등록한 파일이  그 파일들이다.


이 파일들을 티스토리 적용하는 방법을 기록한다.

  1. 먼저 Tistory에 접속해서 관리자 모드로 접속한다.

  2. 왼편 메뉴의 꾸미기 -> HTML, CSS 편집을 선택한다.


  3. 파일 업로드 탭으로 들어가 하단의 "추가" 버튼을 눌러 해당 js와 css 파일을 올린다.
  4. 정상적으로 올라가면 images/prism.js 와 images/prism.css가 보일 것이다.
  5. 이제 HTML 탭에 들어가서 HTML 소스를 연다. 상단의 <head> ~ </head> 상이에 다음과 같은 코드를 입력한다.
    <link type="text/css" rel="stylesheet" href="./images/prism.css"/>


  6. 좀 더 아래로 이동해서 <body > 부분 아래에 다음과 같은 코드를 입력한다.
    <script type="text/javascript" src="./images/prism.js"></script>


  7. 이제 상단의 저장 버튼을 눌러 저장한다.

자 이제 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





물론 완전하지는 않다. 다음과 같은 조건이 붙는다.
  1. 코드 부분은 HTML 인코딩이 되어있어한다.
    웹을 좀 다뤄보신 분들은 단박에 이해 될 것이고, 아닌 분들은 아마도 이게 뭔가 싶을 것이다.
    즉 HTML 내 소스 중 중요한 부분인 "<" 와 "/>" 부분인데, 코드를 그대로 입력하게 되면,
    십중 팔구는 소스 안에 있는 "<" 와 "/>" 부분 때문에, 소스 코드 하일라이트는 안되고 소스가 사라져 보이거나
    전혀 다른 화면이 표시될 수 있다. 최소한 소스들이 HTML 인코딩이 필요한지 여부는 판단해야 한다.
    다행히 (물론 인터넷이 되는 환경에서) 많은 사이트들 중 무료로 HTML 인코딩을 해주는 사이트들이 많다.
    그 사이트에 자신의 소스를 한번 넣어보면 변환되서 표시해주는 내용으로 가져다 쓰면 된다.

  2. XHTML 기반 HTML 5 지원 웹브라우저에서나 된다.
    현재 이 코드를 만드는 로직은 <code> ~ </code> 라는 독특한 태그 안에서 처리된다.
    웹브라우저에서 인식할 수 있는 태그가 아닌데, XHTML 즉, XML 기반의 HTML 파싱이 되고,
    HTML5 특성을 잘 수용할 수 있어야 한다는 것이다.
    사실 대부분 웹브라우징을 할 때는 HTML5가 잘 지원되는 크롬, 엣지, 파이어폭스 등 메이저 웹브라우저를 이용하기 때문에 큰 문제는 아닐 듯 싶다.
    뭐... 소스 안보인다고 할 사람도 없을 것이고 ㅋ

이번 스킨 변경 후 날려 먹은 경험 때문인지, 기록의 중요성이 다시금 새록 새록하고 해서 글로 남긴다.

아... 이제 나머지 소스 부분을 위의 내용 처럼 변경해야 하는데... 좀 많이 귀찮다.


728x90
저작자표시

+ Recent posts

티스토리툴바