Rouge는 순수 루비 언어로 만들어진 소스 코드 하이라이터(Syntax highlight)로서 빠른 성능과 다양한 언어 지원으로 인기를 끌로 있는 젬(gem)이다. 이 글에서는 앞서 소개한 마크다운 젬인 Redcarpet과 Rouge를 함께 사용하여 마크다운으로 작성된 소스 코드에 하이라이트 효과를 주는 방법을 소개한다.
설치
vi Gemfile; bundle install

gem 'redcarpet'
gem 'rouge'
셋업
vi config/initializers/redcarpet.rb

require 'ostruct'
require 'rouge/plugins/redcarpet'

AppConfig = OpenStruct.new

renderer_options = {
  # no_links: true,
  hard_wrap: true
}
markdown_options = {
  autolink: true,
  space_after_headers: true,
  no_intra_emphasis: true,
  highlight: true, # ==word==
  quote: true, # "word"
  underline: true, # _word_
  strikethrough: true, # ~~word~~
  footnote: true, # [^1]
  superscript: true, # 2^(nd)
  lax_spacing: true,
  autolink: true,
  tables: true,
  fenced_code_blocks: true, # ```ruby
  disable_indented_code_blocks: true,
}

class MyHTML < Redcarpet::Render::HTML
  include Rouge::Plugins::Redcarpet # yep, that's it.
end

renderer = MyHTML.new(renderer_options)
renderer = Redcarpet::Render::MyHTML.new(renderer_options)

AppConfig.markdown = Redcarpet::Markdown.new(renderer, markdown_options )
여기서 주목할 점은 HTML 렌더러를 지정할 때 Rouge에서 제공하는 Redcarpet 플러그인을 사용한다는 점이다.
스타일링
vi app/assets/stylesheets/_rouge.css.erb

<%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %>
<%#= Rouge::Themes::Colorful.render(:scope => '.highlight') %>
<%#= Rouge::Themes::Base16.render(:scope => '.highlight') %>
기본적으로 Rouge는 몇가지 스타일링을 기본적으로 제공한다. 위의 코드에서 원하는 테마(theme)을 선택하고 아래와 같이 이 파일을 임포트(import) 한다.
vi app/assets/stylesheets/application.scss
@import "rouge";
만약에 Pygments와 호환되는 스타일링을 사용하고 싶다면 다음 절차를 따른다.
cd venor/assets/stylesheets
git clone https://github.com/richleland/pygments-css.git
이렇게 하면 pygments-css/ 디렉토리 아래에 Pygments 호환 *.css 파일들이 설치된다. 이제 초기화 파일에서 HTML 렌더러에 기본 highlight외에 추가적으로 codehilite CSS 클래명을 추가한다.
vi config/initializers/redcarpet.rb

 class MyHTML < Redcarpet::Render::HTML
  include Rouge::Plugins::Redcarpet
  def rouge_formatter(lexer)
    Rouge::Formatters::MyHTML.new(css_class: 'highlight codehilite')
  end
end
마지막으로 application.scss 에서 해당 .css 파일을 임포트하면 그 css 파일의 스타일링이 적용된다.
vi app/assets/stylesheets/application.scss
@import "pygments-css/github";
사용하기: Ruby

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

def show
  @blog = Blog.find(params[:id])
  redirect_to blog_path(blog)
end
```
사용하기: CoffeeScript

```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()
```
사용하기: Markup

```html
<h1 class="foo">h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<header>header. Heading 3</header>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
```
데모