관리 메뉴


Kinesis´s Open Document

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

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

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

꿈을 그리는 Kinesis 2016.05.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>[##_page_title_##]</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. 풀어서 설명하자면 사용자가 요청하게 될 콘텐츠를 분산된 서버에 저장해두었다가 요청이 발생 할 때 서버중 가장 가까이 있거나 빠르게 응답할 수 있는 서버 및 네트워크를 통해 사용자에게 콘텐츠를 전달하는 서비스라고 할 수 있겠네요. [본문으로]
신고


24 Comments
  • 프로필사진 Weltall 2016.08.10 19:53 신고 cpp는 하이라이트가 안되네요..? 어떻게 해결가능한지 궁금합니다
  • 프로필사진 꿈을 그리는 Kinesis 2016.08.10 21:47 신고 위의 소스코드 중 다음 내용을

    var lang = String($(this).attr("class")).match(/brush\:([ a-zA-Z]*)\;?/)[1]

    다음과 같이 바꾸시고

    var lang = String($(this).attr("class")).match(/brush\:([ a-zA-Z_]*)\;?/)[1]

    class="brush: c_cpp" 로 해주시면 사용가능하실겁니다. (정규식에서 _ 부분을 추가한 것외에 차이점은 없습니다) 이 부분은 제가 놓쳤던 부분인데 말씀하셔서 알게 되었네요.피드백 주셔서 감사합니다.

    문제해결에 도움이 되셨길 바랍니다 ^^
    좋은 하루 되세요~!
  • 프로필사진 Grandpassion 2016.10.31 09:11 신고 좋은 정보 감사합니다^^
  • 프로필사진 꿈을 그리는 Kinesis 2016.10.31 10:08 신고 좋은정보가 되셨다니 다행입니다 ^^
    방문해주시고 댓글까지 남겨주셔서 감사 또 감사드리고 언제나 즐겁고 행복한 하루되세요~
  • 프로필사진 Excelsior-JH 2016.11.15 17:18 신고 좋은 정보 감사합니다!!^^
  • 프로필사진 꿈을 그리는 Kinesis 2016.11.16 09:48 신고 좋은정보로 봐주시고 댓글도 남겨주셔서 감사합니다 ^^
    언제나 즐겁고 행복한 하루 되세요~
  • 프로필사진 Chans P. 2016.12.11 16:05 신고 안녕하세요~ 좋은 정보 감사합니다.
    알려주신대로 적용해 보았는데요, 블로그 테마가 틀린 탓인지 html모드가 적용이 안되네요. (CSS 등 다른 언어 적용해 보았습니다)
    예를 들면 <h1>text</h1> 이런 방식으로 코드를 작성하면 에디터에는 text 라는 글만 나오네요. html이 그대로 적용된 상태인거 같은데 Kinesis님 블로그에서는 html모드도 예쁘게 잘 나오더라구요.. 어떻게 하셨는지 알려주시면 감사하겠습니다!
  • 프로필사진 꿈을 그리는 Kinesis 2016.12.11 22:44 신고 css 부분을 적용하신 것은 보았는데 html 이라고 brush 부분을 바꿔보아도 안되신다는 것인가요? 혹, brush 부분을 html로 작성하신다음에 태그안에는 임의의 글자를 넣으시고 다시 에디터 모드로 돌아가셔서 코드를 작성해 넣어보셨나요? 한번 확인 후 다시 답변 부탁드리겠습니다~
  • 프로필사진 Chans P. 2016.12.13 09:30 신고 답변 감사합니다!
    말씀해 주신데로 해보니 잘 작동합니다. 많은 도움이 되었습니다. 좋은 하루 되세요~
  • 프로필사진 꿈을 그리는 Kinesis 2016.12.13 10:08 신고 잘 해결되셨다니 다행입니다.
    언제나 행복한 하루 즐거운 하루 되시길 기원드립니다 ^^
  • 프로필사진 Daru\0 2017.01.08 21:14 신고 글에 나와있는 대로
    c_cpp 로 변경해도 적용이 되질 않아요.
    js이외에 아무것도 적용이 안되네요 어떻게 해야하죠?
  • 프로필사진 꿈을 그리는 Kinesis 2017.01.09 10:29 신고 스킨 제공 페이지에서 최신버전을 설치하셨다면 brush:c_cpp 로 값을 주시면 정상작동 될 것입니다. 확인 부탁드리겠습니다.

    그 외 별도로 github syntaxviewer로 조치를 하신 것 같은데 github syntaxview를 사용하시는 것도 괜찮은 방법입니다.

    감사합니다 :)
  • 프로필사진 짱가용 2017.02.16 13:57 신고 저는 스킨색깔적용이 모든플러그인에서 안되는데.. 이번ace꺼도 적용이안되네요 그냥 회색바탕에 문법색이 적용안되는데 무슨 문제가 있나요...?
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.08 10:25 신고 우선적으로 문법색에 대해 기본적으로 CDN을 로드하거나 또는 플러그인을 업로드한 뒤 로드한 상태에서 pre 태그를 쓸때 문법에 맞춰 어떠한 언어를 사용하는지 명시적으로 선택을 해줘야 합니다. 그 외 스킨 색 자체만으로 보았을 때는 올바르게 테마 설정을 하지 않으신 것이 아닌지 사료됩니다.
  • 프로필사진 devpassion 2017.02.23 02:57 신고 좋은 글 감사합니다.

    저는 아래에서 mArticle이 오류가 나네요.
    $("#mArticle .area_view pre[class]").each(function() { try{

    그래서 아래로 고치니 오류가 없어졌네요.
    $("pre[class]").each(function() { try{
    물론 pre를 전부 처리하면 문제가 될 수도 있겠죠.

    그리고 jQuery 추가해야 한다는 것도 정리하시면 퍼펙트해 지실 것 같네요.
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.08 10:27 신고 본문 내용이 시작되는 것이 id="mArticle" 속성을 갖는 엘리먼트에서 시작되어서 그렇습니다. 이는 jquery 의 selector 에 따른 적용 차이인데요. 사용하시는 스킨이 다른경우 또는 커스터마이징을 한경우 해당 selector 값은 그 환경에 맞게 변경해주시는 것이 맞습니다.

    또한 해당 내용은 예제 코드 중 주석으로 "/* jQuery 를 이용한 Selector 부분입니다.
    위의 제 블로그 스크린샷에서 사용한 스킨과 같은스킨일땐 문제가 없는데, 다른 경우에는 수정을 해주셔야 할겁니다." 라고 서술하고 있으니 참고부탁드립니다.
  • 프로필사진 Allg 2017.04.17 23:47 신고 좋은 정보 감사합니다!! 많은 도움이 되었어요
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.08 10:28 신고 도움이 되셨다니 다행입니다. ^^
  • 프로필사진 희망의돌고래 2017.05.06 15:53 신고 안녕하세요.
    글 참고하는동안 애로사항이 발생해서 문의드립니다.

    작성자분과는 다른 스킨을 사용하여 글대로 진행하였으나 에디터가 추가가 되지 않습니다.
    자바스크립 콘솔창에서는 Uncaught TypeError: $(...).load is not a function 의 오류만을 받아내고요.
    (다른 스킨을 사용했기때문에 핵심 스크립트의 element도 수정하였습니다.)

    참고로 f12에서 no domain아래에 있는 ace/css/ace-monokai가 <scripts src=""> </script>을 통해 넘어오지 않는듯합니다. 제 티스토리에서는 ace/css/ace-monokai가 없네요!

    당최 이유가 뭔지를 모르겠네요. 혹시 도움 주실 수 있나요?
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.08 10:31 신고 $(...) 와 같은 사용 구문은 jQuery Selector 처리 부분으로 javascript library 로드 순서가 jQuery 를 먼저 로드하시고, 해당 스크립트가 동작하게 하셔야 합니다.

    가급적이면 jQuery Library 를 로드하신 뒤, CDN 을 통한 Library 로드 후, 신텍스 처리를 위한 javascript 작성하신 부분을 넣어주시면 정상적으로 처리 될 것 같습니다.

    그 외 만약에 환경을 살펴봐주길 원하시면 적용하시고자 하는 사이트의 url 을 말씀해주시면 시간날때 확인해보고 추가 답변 달아드리도록 하겠습니다. 감사합니다.
  • 프로필사진 희망의돌고래 2017.05.08 10:46 신고 댓글의 댓글이 안되는군요
    궁리를 하였지만, 가장 적합했던 결론은 다른 library를 활용하기로 했습니다.
    해보니까 왜 안되는지 알것같더라구요.

    1. 핵심코드의 JS component 전환에 유의..
    2.
    작성자분의 <script src="ace.js"></script> 위에
    링크태그로로 monokai url을 호출하면 되더라구요! (이때 링크마크로 반드시 닫아줌)

    좋은 포스팅에 감사드립니다. :)
  • 프로필사진 꿈을 그리는 Kinesis 2017.05.11 18:09 신고 그럼 해결이 되신걸까요? ^^
    좋은 포스팅으로 봐주셔서 감사합니다~
  • 프로필사진 NoirStar 2017.05.30 19:34 관리자의 승인을 기다리고 있는 댓글입니다
  • 프로필사진 꾸준히.좀 2017.08.09 11:46 관리자의 승인을 기다리고 있는 댓글입니다
댓글쓰기 폼