2016년 7월 22일 금요일

블로거(blogger, blogspot)에서 R Code block 추가 및 Syntax highlighting


블로거에서 R Code block 추가 및 Syntax highlighting 


(예시 코드 출처: http://www.rexamples.com/1/R%20Basics)


1. 간단한 방법


STEP 1: http://www.inside-r.org/pretty-r/tool  사이트에 들어가서 R 코드를 입력하고 Go 버튼 클릭. 출력되는 HTML주소를 복사한 후 Blogger에서 글쓰기 모드 -> HTML모드로 전환 후 적당한 부분에 붙여넣기. 다시 글쓰기 모드로 돌아오면 아래와 같이 Syntax highlighting이 적용됨.

a <- 42
A <- a * 2  # R is case sensitive
print(a)
cat(A, "\n") # "84" is concatenated with "\n"
if(A>a) # true, 84 > 42
{
  cat(A, ">", a, "\n")
} 



  STEP 2: Code block 추가를 위해 다시 HTML모드로 이동하여,  R 코드에 해당하는 부분을 찾음(<pre>, </pre>태그가 앞뒤로 붙어있음). R 코드 앞뒤로 
    <div style="background: #f0f0f0; border: none; overflow: auto; width: auto;">
    </div>
위 2줄을 복사해서 <pre> 태그를 감싸면 끝.
a <- 42
A <- a * 2  # R is case sensitive
print(a)
cat(A, "\n") # "84" is concatenated with "\n"
if(A>a) # true, 84 > 42
{
  cat(A, ">", a, "\n")
} 

2. 좀 더 복잡하지만 두고두고 써먹을 수 있는 방법 

블로그의 템플릿 설정을 수정하면 Syntax highlighting을 보다 간편하게 할 수 있음!
http://ddmix.blogspot.kr/2015/11/syntax-highlighter-blogger.html
https://highlightjs.org/static/demo/
(R 언어의 경우 Language categories - scientific 밑에 있으며, Styles - Monokai Sublime 사용)
이 2개 사이트를 참조하여 블로거의 템플릿 수정.
템플릿 수정방법: 블로거에서 템플릿 메뉴 클릭 --> HTML 편집 버튼 누르고
</head> 앞의 부분에 아래와 같은 코드 삽입. (첫번째 링크 참조)
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/monokai-sublime.css"></link>
<script src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js'></script>
<script>hljs.initHighlightingOnLoad();</script>
템플릿 수정 완료 후, 아래와 같이 앞뒤로 <pre><code class="r"> </code></pre>태그 추가
<pre><code class="r">

a <- 42
A <- a * 2  # R is case sensitive
print(a)
cat(A, "\n") # "84" is concatenated with "\n"
if(A>a) # true, 84 > 42
{
  cat(A, ">", a, "\n")
} 

</code></pre>
최종적으로 아래와 같은 결과가 출력.
a <- 42
A <- a * 2  # R is case sensitive
print(a)
cat(A, "\n") # "84" is concatenated with "\n"
if(A>a) # true, 84 > 42
{
  cat(A, ">", a, "\n")
} 

다만 이 방법의 문제점은 글쓰기 모드에서는 Syntax highlighting이 적용되지 않는다는 것. 글쓰기 모드가 아닌 미리보기, 혹은 최종 게시물을 블로그에서 볼 때는 정상적으로 적용되어 보임.

댓글 1개:

  1. 감사합니다~
    덕분에 블로그 잘 꾸밀수있게 되었습니다.
    :0

    답글삭제