Monday, November 19, 2012

Automatyczne kolorowanie i stylizacja <code>

poniedziałek, listopad 19, 2012 Dodany przez Miłosz Osiński #RUBY ON RAILS ##
Artykuł wyjaśni jak w prosty sposób dodać gem i skonfigurować go aby kod prezentowany wygladał profesjonalnie
Gemów oferujących taką możliwość jest kilka ja w artykule wykożystam i polecam CodeRay
dodajemy więc go do Gemfile musimy również dopisać RedCloth dlaczego wyjaśnie w dalszej części artykułu
gem 'coderay'
gem 'RedCloth'
teraz należy dodać kolory do naszego CSS'a oczywiście można je dowolnie zmieniać wedle swoich upodobań
table.CodeRay { width: 100px; margin-top:-80px; border-style: solid; border-width: 1px;}
.CodeRay {
font-family: 'Courier New', 'Terminal', monospace;
color: #E6E0DB;
padding: 3px 5px;
overflow: auto;
font-size: 12px;
margin: 0px 0;
}
.CodeRay pre { margin: 0px; padding: 5px;}       /* tu bedzie znajdował się kod */
.CodeRay .an { color:#E7BE69 }                      /* html attribute */
.CodeRay .c  { color:#BC9358; font-style: italic; } /* comment */
.CodeRay .ch { color:#509E4F }                      /* escaped character */
.CodeRay .cl { color:#FFF }                         /* class */
.CodeRay .co { color:#FFF }                         /* constant */
.CodeRay .fl { color:#A4C260 }                      /* float */
.CodeRay .fu { color:#FFC56D }                      /* function */
.CodeRay .gv { color:#D0CFFE }                      /* global variable */
.CodeRay .i  { color:#A4C260 }                      /* integer */
.CodeRay .il { background:#151515 }                 /* inline code */
.CodeRay .iv { color:#D0CFFE }                      /* instance variable */
.CodeRay .pp { color:#E7BE69 }                      /* doctype */
.CodeRay .r  { color:#CB7832 }                      /* keyword */
.CodeRay .rx { color:#A4C260 }                      /* regex */
.CodeRay .s  { color:#A4C260 }                      /* string */
.CodeRay .sy { color:#6C9CBD }                      /* symbol */
.CodeRay .ta { color:#E7BE69 }                      /* html tag */
.CodeRay .pc { color:#6C9CBD }                      /* boolean */
td.line-numbers { display:none;}                      /* ukrycie cyfr po lewej stronie */
td.line-numbers pre{ width:10px; font-size:12px; background:#339999;}
td.line-numbers pre a { color:black; font-weight:bold;}
td.code pre{ width:750px; font-size:12px; }
Następnym krokiem jest edycja helpera który będzie wyciągał tekst ze znaczników < code > i go odpowiednio formatował. Zależnie od tego czy chcemy formatować Artukuł czy Komentarz do odpowiedniego helper'a dodajemy kod. U mnie jest to helper artykułu
#app/helpers/articles_helper.rb
module ArticlesHelper
  def coderay(text)  
    text.gsub(/\<code( lang="(.+?)")?\>(.+?)\<\/code\>/m) do  
      CodeRay.scan($3, $2).div(:line_numbers => :table) 
    end  
  end  
end
pozostało nam już tylko wyświetlenie sformatowanego i pokolorowanego < code > odbywa się to w następujący sposób. do użycia metody textilize był nam własnie potrzebny wymieniony na początku artykułu drugi gem
#/app/views/articles/show.html.erb
<%=raw textilize(coderay(@article.body)) %>
dodatkowo napisze jak poprawnie pisać podczas tworzenia artykułu. aby używać poprawnie rozpoznawania języków programowania przed CodeRay trzeba użyć znacznika w następujący sposób
< code lang="ruby" > tu kod ruby < /code >
Możliwe języki w lang"":
  1. HTML
  2. CSS
  3. C,C++
  4. JAVA
  5. Delphi
  6. JavaScript
  7. PHP
  8. Python
  9. SQL
  10. Ruby
  11. ERB