Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴


Kinesis´s Open Document

티스토리(Tistory)에 소스코드를 표현하기(Ace - SyntaxHighlighter) 본문

Tip & Tech/일반 : 블로그 꾸미기

티스토리(Tistory)에 소스코드를 표현하기(Ace - SyntaxHighlighter)

Kinesis 2016. 5. 29. 03:08

티스토리(Tistory) 또는 워드프레스(Wordpress) 등을 이용해 블로그 또는 웹사이트를 운영하시는 분들이라면 간혹 소스코드를 공유할 일이 생기기도 합니다. 이 때 단순히 소스코드만 올릴경우 가독성이 매우 저하되서 알아보기 힘들고 방문자도 발길을 돌려버리게 되죠. 그래서 많은 분들이 소스코드를 보여주기 위해서 일부 플러그인을 추가해서 사용합니다. 이 때 사용되는 플러그인으로 "SyntaxHighlighter"가 대표격으로 많이 사용되고 있습니다.



이미 구글에 "티스토리 소스코드" 라는 검색으로 검색을 해봐도 "SyntaxHighlighter"를 이용한 출력 방법이 많이 알려져 있으므로 같은 내용을 다루지는 않고 조금은 색 다른 플러그인을 소개할까 합니다.


Ace 플러그인이 적용된 화면 이미지


바로 Ace 라는 이름의 플러그인(Plugin)인데요. 제 블로그에서 위의 스크린샷과 같이 소스코드가 삽입된 부분이 바로 Ace 라는 플러그인(Plugin)을 이용해 SyntaxHighlight 를 적용한 모습이라고 할 수 있겠습니다.


Ace는 기능이 매우 다양하고 강력한데요. 그 중에서도 몇 가지 특색을 소개시켜드리자면 첫번째로 알림기능이 있습니다. 자바스크립트나 일부 언어에서 문법상 틀린부분이나 수정해야 할 부분이 있다면 노란 삼각형 아이콘의 경고나, 소소한 부분은 i 라는 아이콘을 이용해 정보를 알려줍니다. 보는 방법은 간단해서 아이콘에 마우스를 가져다 대면 내용을 알려줍니다. 두번째로는 주요 단락에 대해 접기와 펼치기가 가능합니다. 함수단위로 접었다 펼쳤다 할수도 있고, 작게는 if문이나 for문 등과 같은 데서 부분적인 접기와 펼치기가 가능해 소스코드가 긴 경우 접어서 살펴보는 것이 가능합니다.



이미 Github를 포함하여 Cloud9 IDE, 프로그래밍 언어를 익힐 수 있는 Codecademy 등에서 이용하고 있는 명실상부 강력한 플러그인으로 인정받고 있는 녀석이라고 할 수 있겠습니다.



그럼 티스토리(Tistory)에 반영은 어떻게 해야 할까요? SyntaxHighlight을 적용하는 많은 자료는 찾아보면 HTML/CSS 편집화면에서 파일을 업로드하여 해당 URL의 링크를 이용하는 형태를 띄고 있는데요. 여기서 Ace를 적용할때는 CDN(Contents Delivery Network)을 이용해 별도의 파일업로드 없이 적용하는 방법으로 다뤄보려 합니다. 왜냐하면 마침 Ace 는 CDN(Contents Delivery Network)[각주:1] 서비스를 제공하고 있거든요. 사이트는 https://cdnjs.com/libraries/ace/ 로 접근하면 되시겠습니다.



우선 https://cdnjs.com/libraries/ace/ 페이지에서 ace.js 파일의 URL을 복사하고, 관리자 페이지에서 HTML/CSS 편집 메뉴를 클릭합니다.



위와 같이 편집화면이 떳다면, <head>...</head> 사이에 <script src="복사한URL"></script> 를 입력해 넣습니다. 다음의 내용을 참고합니다.

<!doctype html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<!--...생략...-->
	<title>티스토리(Tistory)에 소스코드를 표현하기(Ace - SyntaxHighlighter)</title>
	<!--...생략...-->

	<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script><!-- 이렇게 추가 -->
	
</head>
<!--...생략...-->


상단에 <script></script> 구문을 넣고나면 이제 하단에 작동하는 스크립트 부분을 넣을 차례입니다. SyntaxHighlight 를 사용할때와 비슷하게 사용하기 위해서 제가 별도로 작성해둔 스크립트 입니다. 참고하셔서 필요에 맞춰 변경해서 쓰시면 되겠습니다.

<!-- 앞의 내용은 생략합니다 -->

<!-- 여기서부터의 내용을 추가해주세요 -->
<script>
$(window).load(function() {

  /* jQuery 를 이용한 Selector 부분입니다. 
  위의 제 블로그 스크린샷에서 사용한 스킨과 같은스킨일땐 문제가 없는데, 다른 경우에는 수정을 해주셔야 할겁니다. 
  SyntaxHighlighter를 추가하시는 분이라면 그정돈 하실줄 아는걸로 판단하고 자세한 설명은 생략합니다. */
  $("#mArticle .area_view pre[class]").each(function() { try{
    // 언어식별자를 SyntaxHighlight 처럼 "brush: 언어" 형태로 쓸때 식별을 위한 처리부분
    var lang = String($(this).attr("class")).match(/brush\:([ a-zA-Z_]*)\;?/)[1]
    lang = lang.trim().replace(/^js$/i, "javascript");
    // Ace 플러그인 반영 부분
    var editor = ace.edit(this);
    editor.setOptions({ maxLines: Infinity }); // maxLines: Infinity 가 없으면 코드가 다 안보여요
    editor.setTheme("ace/theme/monokai");      // 테마설정 부분이에요. 원하는걸로 바꾸세요
    editor.getSession().setMode("ace/mode/"+ lang); // 앞서 "brush:언어" 부분으로 언어 세팅
    editor.setShowInvisibles(true);            // 탭이나 공백, 엔터 기호를 보여줍니다.
    editor.setReadOnly(true);                  // 읽기전용으로 보여줍니다.
    editor.setShowPrintMargin(false);          // 프린트 가이드라인을 보여줍니다 (비활성화)
  } catch(ex) { console.info (ex) } })

});
</script>

여기 스크립트 부분이 제일 중요합니다. 스킨마다 본문영역을 나타내는 식별자가 다르기 때문에 그에 맞추어 Selector 부분이 바뀌어야 할 수 있습니다. 또는 class="brush: 언어" 외의 방법으로 언어를 식별해서 반영하시려는 분들도 코드를 바꿔야할 필요가 있습니다. 그때 이 부분을 수정해주셔야합니다.


만약 제가 상단에 올린 제 블로그의 스킨과 동일한 테마를 사용하고 계신다면, 문제가 될거 같지는 않습니다. 다만, 소스코드를 나타내기 위해 이 글을 참고하고 보고 계신 분들이라면 별도로 문제를 해결하실 수 있으리라 판단해서 Selector를 변경하기 위한 자세한 내용은 생략하겠습니다.



이제 마지막입니다. 게시물을 작성할때 소스코드를 나타내기 위해서는 <pre class="brush:언어">코드내용</pre> 구문을 이용해 작성해주시기만 하면됩니다. 다음의 예제 코드를 참고해주세요.

<!-- 상단의 본문내용 -->
<pre class="brush: js">
/* Javascript Sample */
console.info("hello world");
</pre>
<!-- 하단의 본문내용 -->

Ace 플러그인이 적용된 화면 이미지

모든 과정이 정상적으로 되었다면 상단에서도 보았듯 위와 같이 소스코드가 이쁘게 보여지면 성공한 것입니다.

수고하셨습니다.



  1. 풀어서 설명하자면 사용자가 요청하게 될 콘텐츠를 분산된 서버에 저장해두었다가 요청이 발생 할 때 서버중 가장 가까이 있거나 빠르게 응답할 수 있는 서버 및 네트워크를 통해 사용자에게 콘텐츠를 전달하는 서비스라고 할 수 있겠네요. [본문으로]

'Tip & Tech > 일반 : 블로그 꾸미기' 카테고리의 다른 글

티스토리(Tistory) 스킨 제작 관련 내용 정리  (0) 2016.10.26
티스토리(Tistory) : 반응형 #2 스킨 커스터마이즈 버전 배포  (171) 2016.06.11
공유하기 링크
'Tip & Tech/일반 : 블로그 꾸미기' Related Articles more


Comments