소스 코드 하이라이터(Syntax highlight)는 구현 방식에 따라 크게 서버에서 처리하는 방식과 자바스크립트를 이용해서 브라우저에서 처리하는 방식으로 구분한다. 이 글에서는 PrismJS라는 라이브러리를 사용해서 클라이언트 단에서 소스 코드 하이라이터를 구현하는 방법을 소개한다. 먼저 다운로드 페이지로 가서 패키지 옵션 선택을 한 후 prism.js와 prism.css 파일을 내려 받는다. 우리는 레일즈와 함께 사용할 것이므로 다운로드된 파일을 vendor/assets/javascripts/prism.jsvendor/assets/stylesheets/prism.css에 위치시킨 후 애샛 파이프라인(asset pipeline)을 통해 동작할 수 있게 한다. vi app/assets/javascripts/application.js
//= require prism
vi app/assets/javascripts/application.scss
@import "prism";
Prism은 로딩이 끝나면 자동으로 시작되면서 DOM을 스캔하고 <pre><code>를 찾아서 소스 코드 하이라이트 변환 작업을 수행한다. 사용자가 할 일은 마크업 구성시 <code>에 적절한 language-xxx 형태의 클래스명을 부여하는 것이다.
Ruby


100.times do
  puts "Hello, Prism!"
end

def show
  @blog = Blog.find(params[:id])
  redirect_to blog_path(blog)
end
SCSS


div.blogs {
  div.list {
    margin-top: 24px;
    a {
      color: #333;
      span.title {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }
}
CoffeeScript


$(document).on 'click', 'div.nested_sector a.remove_fields', (e) ->
  e.preventDefault()
  $(@).parents('.nested_sector').find('input[type=hidden].destroy').val('1')
  $(@).closest('.nested_sector').hide()
HTML stripped-off 문제
한편 html 마크업의 경우 <tag> 부분이 제대로 하이라이트 되지 않는 현상이 발생한다. 이때는 <>를 각각 &lt;&gt;로 바꿔주면 된다. 이 작업이 귀찮으면 <code> </code> 사이에 <script> tag를 삽입해서 해결할 수도 있다
동적 DOM에 PrismJS 사용하기
마지막으로 Ajax를 통해 동적으로 로드되는 DOM에 대해 Prism을 적용시키는 방안을 알아본다. Prism은 이런 경우에 사용하도록 highlightAll()과 highlightElement() 함수를 제공한다. 전자는 로드된 전체 DOM에 대해 적용되고, 후자는 특정 DOM 엘리먼트에 대해 선별적으로 사용한다.

Prism.highlightAll()
Prism.highlightElement($('#code_tag_id')[0])