티스토리 뷰

현재 mobile 버전에서는

HTML/CSS 편집 기능을 제공하지 않으므로

해당 syntax highlighting이 적용되지 않습니다.


소스코드에 대한 학습/예제를 일부 작성하기 위해서

먼저 내 블로그에서 소스코드가 어떻게 보이는지 체크가 필요!


적용할 코드 에디터 ( code editor ) 는 

ace 라는 이름의 에디터이다.

자세한 내용은 Ace 홈페이지 참고


앞서 웹폰트를 적용한 것처럼 

Ace 역시 직접 파일을 올리지 않고

적용할 예정 ( CDN )


아, 그리고 혹시라도 

파일을 업로드 한 후 적용하는 형태가

익숙하신 분은

Embedding Guide 를 참고


또한, 에디터를 직접 수정할 수 있는 상황이 아닌지라,

Ace 설정은 HTML / CSS 편집 에서 적용할 것이고,

티스토리 글쓰기에서 HTML Markup 형태로 코드를 적용할 것이다.


그럼 먼저 HTML / CSS 편집 메뉴로 이동!



그다음 스크롤을 가장 아래쪽으로 내려서

</body> 태그가 보일 때 까지 이동한다.

( 참고 )

javascript 코드를 <head></head> 사이에 넣거나, 

<body></body> 어디에 넣어도 작동하는데 지장은 없을테지만,

페이지 로딩과 관련이 없는 스크립트 구문은

나중에 추가해줄 수록

사용자가 봐야할 화면이 0.1초라도 빨리 로딩된다.


버전명은 그때그때 달라질 수 있으며, 1.x.x 버전을 사용한다면

호출할 함수명이 크게 바뀌진 않을 것이다.

혹시라도 이 글의 작성시점보다

최신 버전을 사용하고자 한다면, 

cdn 사이트 를 참고


<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>



그다음 티스토리 본문 내에서

에디터를 이용해서 변경할 부분을 지정해줘야하는데,

현재 티스토리에서는 jQuery를 사용하고 있기 때문에, 

jQuery selector 를 이용하여 설정을 해주자.




현재 제공되고 있는 테마 목록은

여기에서 확인하고


미리보기를 원한다면 

여기로 들어가서

상단에 있는 Theme 를 이것저것 눌러보면 된다. 

mode의 언어를 선택하면

적용가능한 목록 및 미리보기를 확인할 수 있다.

나의 경우 대부분 'javascript' 혹은 'html' 정도 사용할 예정이다.


이렇게까지 적용하면 코드는 작동하는데

스킨에 적용된 css와 ace-theme 에 적용된 css 값이 달라서

게시물의 코드가 깨질 수 있다.


여러 방법으로 해결할 수 있겠지만,

여기서는 #1 스킨의 css 에서 

본문 <pre> 태그에 적용된 background-color 만 제거할 것이다.


적용 완료된 모습


늘 그렇듯, 궁금한건 언제든 물어보세요 ^^


오늘도 좋은 하루 되세요~~

신고
댓글
댓글쓰기 폼