글
티스토리에 소스코드 표현하기 (Ace Pugin)
1. [TISTORY 관리 - HTML & CSS 편집 _HTML]으로 이동
2. <body> 부분에 추가
<!doctype html>
<body>
<!-- 생략 -->
<script>
$(window).load(function()
{
$("span.imageblock").width("100%").find("span[data-lightbox] > img").width("100%");
/* jQuery 를 이용한 Selector 부분입니다.
스킨마다 본문 영역을 나타내는 식별자가 다르기 때문에 그에 맞추어 변경해야합니다. */
$("#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 }); // 코드라인 설정
editor.setTheme("ace/theme/xcode"); // 테마 설정
editor.getSession().setMode("ace/mode/"+ lang); // 언어 세팅
editor.setShowInvisibles(false); // 탭이나 공백, 엔터 기호 표시 유무
editor.setReadOnly(true); // 읽기전용 유무
editor.setShowPrintMargin(false); // 프린트 가이드라인 표시 유무
}
catch(ex) { console.info (ex) } })
});
</script>
</body>
# 사용법
<pre class="brush: 언어">
.... 코드...
</pre>
# Theme :
https://github.com/ajaxorg/ace/tree/master/lib/ace/theme
# Mode(lang) :
'블로그 꾸미기' 카테고리의 다른 글
| Highlight.js 적용 / 사용법 (0) | 2017.01.17 |
|---|---|
| 티스토리 복사 방지 설정하기 (0) | 2016.10.25 |
