티스토리 뷰

한때는 퍼블리셔

티스토리에 소스코드 플러그인 설치하기

마룬마로 2018. 12. 12. 10:14
반응형

(수정)

리소스 파일을 올리는 대신 다른 방식이 있을 것 같아 찾아보니 CDN 방식으로 Syntax highlighter를 보여주는 플러그인이 있어 이걸 사용하려고 한다.

마침 설치 방법을 참고한 블로그에 sublime에서도 사용중인 monokai theme가 적용되어있어 더 쉽게 설치할 수 있었다.


(190911 추가)

이 포스트가 제 블로그에서 꽤 많은 유입을 발생시키고 있는 포스트다보니 설명이 불친절할까봐 3번 항목을 추가했습니다.

설치하시다 막히는 부분이 있으시거든 댓글로 언제든 질문해주세요! :D


1. script 추가하기

블로그 스킨 편집 화면에서 <head> 영역 안에

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script> 구문을 추가한다.


2. 1번에 추가한 줄 바로 아래에 다음 코드블록 내 내용을 붙여넣는다.

이 코드의 출처는 키네시스님의 블로그이다. 복붙한 코드는 원문을 그대로 가져왔지만 실제 내 티스토리에 적용할때는 이대로 적용이 안되어 일부를 수정했다.

수정한 내용은 다음과 같다.

2-1.

2번 행 : $(window).on('load', function(

$(window).load(function(){ 방식은 이전 방식이다보니 현재 내 티스토리에서 사용중인 jQuery 버전과 맞지 않는 것 같다.

소스코드를 바르게 적용했는데도 실행이 되지 않기에 검토하다 저 부분을 수정하니 적용 되었다.

2-2.

배경색 : monokai의 css 코드에 작성된 내용 중 pre 요소에서 배경색을 연한 회색으로 지정하여 흰색 글자가 보이지 않았다.

.skin_view .area_view pre {background-color:#272822;} 코드를 추가했다.


3. 사용하기

티스토리 글 작성 화면 우측 상단의 HTML 체크박스를 선택하고

<pre class="brush:언어"></pre> 사이에 코드블록 내용을 넣으면 된다.

언어는 html, css, js 등으로 적으면 자동으로 그 syntax에 맞게 변환된다.

반응형
저작자표시

'한때는 퍼블리셔' 카테고리의 다른 글

모바일에서 연속터치 막는 스크립트  (2) 2018.12.05
Sublime text3에서 콘솔창이랑 터미널 사용하기  (4) 2018.11.20
페이지 별로 SNS 공유이미지(og:image) 다르게 적용하기  (6) 2018.10.10
SNS 공유 오픈그래프(og:image) 캐시 삭제 링크 모음  (6) 2018.10.08
적응형 홈페이지의 SEO는 어떻게 해야할까?  (6) 2018.09.28
댓글