티스토리(Tistory) 코드 하이라이트(Syntax Highlighter) 추천

안녕하세요 기적의 엉터리 개발자 클레인입니다.

블로그를 새로 만들게 되어, 코드 하이라이트를 새로 추가해야 해서... 코드 하이라이트를 다시 찾아보게 되었습니다. Alex Gobatchev의 SyntexHighlighter 4.0.1 버전을 티스토리에 적용시켜 보고 싶어서 이것저것 해봤지만.. 삽질만 하다가 결국 실패했습니다. 기존 블로그에서는 Ace Editor를 사용해서 티스토리에 직접 올려서 테마까지 수정해서 썻었는데... 테마 수정은 나중에 하고... 일단 cdn을 이용하기로 했습니다.

요즘 맥이랑 윈도우 둘 다 Sublime Text를 사용하고 있어서, 1. Monokai 테마가 있고, 2. 왼쪽에 라인 넘버 나오고, 3. Tap Stop이 표시되는 Ace Editor를 다시 사용하게 되었습니다. 다른 코드 하이라이트도 셋 다 되는지는 모르겠습니다..

아래 순서는 제 개인적인 추천 순서이고, 세가지 전부 티스토리에 적용 가능합니다. 개인의 취향에 맞게 골라서 사용하시면 됩니다. ^^

1. Ace Editor (Syntax Highlighter)

		<script src="./images/script.js"></script>

		<!-- Ace Editor -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js"></script>
		<script>
			$("#content .article_desc pre[class]").each( function() { try {
				var mode = String( $(this).attr("class") ).match(/brush\: ([ a-zA-Z_]*)\;?/)[1];
				mode = mode.trim().replace( /^js$/i, "javascript" );
				var editor = ace.edit(this);
				editor.getSession().setMode( "ace/mode/" + mode );
				editor.setOptions({
					theme: "ace/theme/monokai",
					maxLines: Infinity
				});
				editor.setShowPrintMargin(false);
				editor.setReadOnly(true); 
			} catch(ex) { console.info (ex); } });
		</script>
		<!-- / Ace Editor -->

	</s_t3>
</body>
</html>

  37가지 테마 (monokai 있음) / 라인 넘버 표시 됨 (접기도 가능) / Tap Stop 표시 가능

2018년 8월 7일자 1.4.1 버전 기준

Ace Editor는 AWS Cloud9에서 사용하고 있다는 군요.. 저는 사용해 본 적이 없어서 Cloud9은 Pass

  

원래는 Editor인데 ReadOnly설정을 활용해서 코드 하이라이트로 사용합니다. ^^

위에 예시는 지금 제가 사용하고 있는 설정이고요... 스킨 맨 하단에 </s_t3> 바로 위에 넣어 주시면 됩니다...

2. highlight.js

89가지 스타일 (monokai-sublime 있음)

2018년 10월 16일자 9.13.1 버전 기준

간단한 코드 표시 할 때 좋아 보입니다. 스타일도 굉장히 많네요... demo페이지에서 다양한 언어와 다양한 스타일 확인해 보실 수 있습니다.

3. SyntaxHighlighter 3.0.83 (Alex Gobatchev)

7가지 테마 / 라인 넘버 표시 됨

예전부터 티스토리에 많이 사용하던 코드 하이라이트면서, 지금도 가장 많이 사용하는 코드 하이라이트 같습니다. 하지만 전 Ace Editor로~~~