Syntax Highlighter 2.1 코드러너와 연동하기

Syntax Highlighter 2.1

코드러너와 연동하기

Syntax Highlighter는 자바스크립트로 만들어진 웹구문강조기입니다. 국내외 많은 블로거들이 사용하고 있는데요, 블로그에 수록된 코드를 실제로 실행해보고 싶을때 대부분 코드를 복사해봐서 자신의 pc에 설치된 컴파일러나 인터프리터로 실행을 해보게 됩니다. 하지만 코드러너와 연동하게 되면 블로그 상에서 코드의 실행이 가능하게 됩니다. 코드를 수정해서 이런저런 테스트를 해보는 것도 가능하구요. 내 블로그를 이용하는 사람들이 신기해할것만 상상해도 뿌듯해지실겁니다. 그럼 이제 연동하는 방법에 대해 자세히 알아볼까요.

*여기서는 SyntaxHighlighter가 이미 설치되어 있다는 가정하에 설명하겠습니다.


준비물 : 1. 코드러너 연동이 패치된 shCore.js파일(아래 링크에서 다운받으세요.)

                SH2.1용 또는 SH1.5.1용
            

 2. SH2.1의 경우 shCore.css와 run.png파일을 추가로 다운받습니다.(링크에서 다운로드)
    shCore.css , run.png

스텝 1. 코드러너연동이 패치된 shCore.js 파일을 SyntaxHighlighter가 설치된 곳에 덮어씌운다.
         SH2.1의 경우에는 shCore.css와 run.png파일도 함께 
         업로드 한다.

Case A ) 티스토리
관리자 메뉴에서 스킨 > HTML/CSS편집에서 코드러너용 shCore.js, shCore.css, run.png를 업로드 한다.

Case B ) 기타 웹페이지
SH가 설치된 script폴더에 shCore.js를 업로드하여 덮어쓴다.

스텝 2. 페이지에서 확인한다.
확인할때는 Ctrl + F5를 눌러서 페이지를 새로 로딩한다.

SH가 적용된 페이지로 가서 에디터를 띄워본다.
<>버튼을 눌렀을때 다음과 같이 코드러너 에디터가 뜨면 성공

참쉽죠잉