이곳으로 블로그를 옮기며 jekyll의 코드 하이라이팅 기능을 많이 쓰게 되었다. 기본 코드 하이라이팅은 부족한 것이 많기에 consolas 폰트로 변경할 수 있는 방법과, 테마 변경부터 찾아보던 중.. reanimus 라는 외국 블로거의 포스팅 을 보고 많이 참조했다. :)

먼저 _layout/default.html의 <body>태그 안에 다음 스크립트가 실행되도록 넣어줬다.

<script>
  jQuery("pre code").html(function(index, html) {
    return html.trim().replace(/^(.*)$/mg, "<span class=\"line\">$1</span>")
  });
  $('pre code').each(function( index ) {
    var codetype = $(this).data('lang');
    var hilite = $(this).parent().parent();
    hilite.wrap("<div class=\"codecontainer\"></div>");
    if(codetype)
    {
      hilite.before( "<span class=\"codelabel\">code: <strong>"+codetype+"</strong></span>" );
    }else{
      hilite.before( "<span class=\"codelabel\"><strong>code</strong></span>" );
    }
  });
  $("pre code .line").html(function(index, html) {
    if(!html){
      return "&nbsp";
    }else
    {
      return html;
    }
  });

그리고 codecontainer, pre code .line, codelabel 등의 css 설정을 해준다. 내 지킬 사이트의 css/main.scss파일이 _sass/_syntax-highlighting.scss를 포함하고 있고 이 scss파일들이 스타일에 적용되는 것으로 보이므로, main.scss와 _syntax-highlight.scss 에서 스타일 설정을 해줬다.


main.scss 파일에 다음과 같이 스타일 설정을 추가하고,

.post .highlight pre {
    background-color: transparent;
    border: none;
    padding: inherit !important;
}

// 포스팅을 쓸때, `단어` 안의 단어와 하이라이팅 된 코드 등에 영향.
.post code {
//  border: 1px solid #c0daf2;
  font-family: $code-font-family;
  padding: 0 .25em;
  border-radius:2px;
  background-color: #e9e7f1; color: #180d49;
}

.post pre code {
  border: none;
  background-color: transparent;
  padding: 0;
  color: inherit;
}


_syntax-highlight.scss 파일에 다음과 같은 스타일 설정을 추가했다.

/**
 * Code Container
 */

.codecontainer pre
{
	overflow-x: auto;
}

.codecontainer pre code
{
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-x: visible;
	counter-reset: line-numbering;
	position: relative;
}

.codecontainer pre code .line
{
	padding: 0;
	margin: 0;
	display: inline-block;
	line-height: auto;
}

.codecontainer pre code .line::before
{
	content: counter(line-numbering);
	counter-increment: line-numbering;
	width: 2em;
	text-align: right;
	font-size: small;
	display: inline-block;
	margin-right: 1.0em;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	user-drag: none;
}


.codecontainer .highlight
{
	font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
	font-size: 0.8em;
	margin-bottom: 13px;
}

.codecontainer
{
	background-color: #3085d6;
}

.codecontainer .codelabel
{
	padding: 0.5em;
	color: #FFF;
}

highlight 테마는 _syntax-highlight.scss 파일에 Solarized Dark theme 를 참고해서 대강 맞춰놓았는데, 이 정도만 해도 꽤 괜찮은 코드 하이라이팅이 되었다.