티스토리에서 마크다운을 지원해 주면 제일 좋고 편하지만, 지원해 주지 않는 고로 티스토리 블로그에서 소스코드를 표시하는 방법을 이리저리 찾아보고 시행착오를 해 본 결과 현재 시점에서는 개인적으로 제일 마음에 드는 Ace editor를 티스토리에 도입하는 방법을 간단히 소개합니다.
Ace - The High Performance Code Editor for the Web
도입 전제조건
- 적용할 스킨은 TISTORY 제공의 Letter
- CDN으로 도입
- 가급적 깔끔하게 소스의 수정은 최소한으로
- 소스 코드내에 HTML태그도 포함
1. 스킨편집 - HTML편집
하기 링크에서 사용할 ace.js의 주소를 복사해서 <head>~</head>의 사이에 삽입합니다.
https://cdnjs.com/libraries/ace
다음으로 소스코드를 보여줄 부분에 대해서 ace editor가 적용되도록 설정합니다.
또한 2번째 줄의 부분은 Letter스킨 외에는 각자 스킨 설정에 맞춰서 수정할 필요가 있습니다.
$(function(){
$('div.area_view_content div.article_content div.article_view pre[class]').each(function(){
try{
var lang = String($(this).attr("class")).match(/brush\:([ a-zA-Z_]*)\;?/)[1];
lang = lang.trim().replace(/^js$/i, "javascript");
// Ace Editor Setting
var text = this.innerHTML;
var editor = ace.edit(this); // ace.edit는 this의 textContent를 사용
editor.session.setValue(text); // HTML태그를 포함하는 innerHTML 정보를 표시하고 싶을 경우엔 innerHTML 값을 별도로 설정
editor.setOptions({
maxLines: Infinity, // 줄 전체를 표시
highlightActiveLine: true, // 현재 행에 하이라이트 표시
theme: 'ace/theme/tomorrow' // 표시 테마
})
editor.getSession().setMode("ace/mode/"+ lang); // 언어설정(brush에서 설정한 언어를 적용)
editor.setShowInvisibles(false); // 탭, 공백 표시
editor.setReadOnly(true); // 읽기 전용(소스코드를 공개만 하고 싶을 경우)
editor.setShowPrintMargin(false); // 프린트 가이드라인 표시 설정
} catch(ex) { console.info (ex) }
});
});그외 옵션은 공식 사이트를 참고해 주세요.
https://ace.c9.io/#nav=howto
테마 종류는 하기 링크에서 확인 가능합니다.
https://github.com/ajaxorg/ace/tree/master/lib/ace/theme
각자 기호에 맞춰서 CSS를 수정합니다.
(밑의 CSS는 제가 적용한 내용)
.ace_editor {
border: 1px solid lightgray;
}
2. 스킨편집 - CSS편집
각자 기호에 맞춰서 CSS를 수정합니다.
저는 기존의 CSS의 .article_view pre의 하기 부분이 불필요 해서 삭제처리 하였습니다.
.article_view pre {
/* padding: 20px; */
/* background: rgba(0, 0, 0, 0.05); */
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
}
3. 티스토리에서 소스코드를 표시
아래와 같이 <pre class="brush : {사용언어}">~</pre> 안에 표시하고 싶은 소스코드를 넣어 사용합니다.
.ace_editor {
border: 1px solid lightgray;
}
마지막으로 사용 가능한 언어(mode)는 아래에서 확인 할 수 있습니다.
https://github.com/ajaxorg/ace/tree/master/lib/ace/mode
2019/01/21 추가
며칠 블로그를 쓰면서 괄호 "<"와 ">" 표시에 골머리를 앓았는데 현재로선 아래 설정으로 정했습니다.
$(function(){
$('div.area_view_content div.article_content div.article_view pre[class]').each(function(){
try{
var lang = String($(this).attr("class")).match(/brush\:([ a-zA-Z_]*)\;?/)[1];
lang = lang.trim().replace(/^js$/i, "javascript");
// Ace Editor Setting
var editor = ace.edit(this); // ace.edit는 this의 textContent를 사용
editor.setOptions({
maxLines: Infinity, // 줄 전체를 표시
highlightActiveLine: true, // 현재 행에 하이라이트 표시
theme: 'ace/theme/tomorrow' // 표시 테마
})
editor.getSession().setMode("ace/mode/"+ lang); // 언어설정(brush에서 설정한 언어를 적용)
editor.setShowInvisibles(false); // 탭, 공백 표시
editor.setReadOnly(true); // 읽기 전용(소스코드를 공개만 하고 싶을 경우)
editor.setShowPrintMargin(false); // 프린트 가이드라인 표시 설정
editor.session.setUseWorker(false);// 코드에 대한 경고표시 여부(false시에 경고표시 비표시)
} catch(ex) { console.info (ex) }
});
});설정 이유는 innerHtml의 정보를 기반으로 ace editor를 입혔을때 문제없이 원문이 표시되기는 하지만, XML이나 C#내의 <T>정보를 티스토리 내부의 HTML정보로 티스토리가 착각(?)하여 </tag>와 같은 닫힘 태그를 자동으로 삽입시키기 때문입니다.
그래서 innerHtml을 셋션에 설정하는 부분을 없애고 오직 텍스트 정보만 가지고 설정하기로 했습니다.
상기와 같이 설정하시고 <pre class="brush: csharp">~</pre>안에 들어갈 소스코드의 [<]을 [<]로 치환한 뒤 발행하면 문제없이 표시됩니다.([<]로 치환하지 않으면 <>를 가진 xml이나 html, C#내의 <T>와 같은 부분은 화면상에서 아예 표시가 되지 않습니다)
ace editor는 소스코드의 표시 뿐만 아니라 실시간 코딩도 가능한 에디터 기능이 있기 때문에 소스코드가 바람직하지 않을 경우에는 경고표시가 뜨는데 저는 소스 일부만 공유하거나 할 경우에 경고 마크가 표시 되는것은 원치 않기 때문에 [editor.session.setUseWorker(false);] 설정을 추가하였습니다. 해당 설정은 false로 지정하지 않을 경우엔 자동으로 표시되는 것이므로 딱히 감추고 싶지 않을 경우엔 그대로 두셔도 됩니다.
'개발 > Tools' 카테고리의 다른 글
| 크롬 확장 프로그램 Word Replacer II (0) | 2019.02.02 |
|---|
댓글