티스토리 블로그에 소스코드를 보기좋게 삽입하는 방법! - 세팅편

 

 

프로그래밍 공부를 하면서,
동시에 블로그에 기록도 하려고 진행 중에
블로그에 소스코드를 보기 좋게 올리는 방법이 있어서 소개합니다. ^^

 

 

 

 

먼저 소스코드를 보기 좋게 올릴 수 있도록 해준 홈페이지에 방문합니다.
주소: http://alexgorbatchev.com/SyntaxHighlighter/

 

 

 

SyntaxHighlighter 홈페이지 메인입니다.
오른쪽 상단을 보면 'download' 메뉴에 들어갑니다.

 

 

 

빨간색 네모로 표시해 둔 곳('Click here to download')을 클릭해서 파일을 다운받습니다.

 

 

 

파일은 적당한 곳 아무데나 다운 받으시면 됩니다.
파일명을 변경하셔도 무관합니다.

 

 

 

파일이 저장된 폴더에 들어갑니다.
압축파일 하나가 보일 것입니다.

 

 

 

압축을 해제합니다.
총 파일 수는 105개 입니다.

 

 

 

압축을 해제하셨다면,
폴더 안에 들어가셔서 'scripts' 폴더와 'styles' 폴더가 있는지 확인합니다.

 

 

 

'scripts' 폴더 안에 있는 파일들입니다.

 

 

 

'css' 폴더 안에 있는 파일들입니다.

 

 

 

파일을 정상적으로 압축해제를 하였고, 모든 준비를 마쳤다면!
이제 티스토리 블로그에 적용하기 위한 과정을 들어가겠습니다.

 

 

 

티스토리 관리자페이지에 들어가서 'HTML/CSS 편집' 메뉴로 들어갑니다.

 

 

 

들어가면 위와 같은 페이지가 나옵니다.
여기서 상단에 있는 '파일업로드' 탭에 들어갑니다.

 

 

 

파일업로드 탭을 클릭하면 위와 같은 페이지가 나옵니다.
여기서 '파일목록' 하단에 있는 '+추가' 버튼을 클릭합니다.

 

 

 

전에 파일이 제대로 들어있는지 확인했었던 폴더인
'scripts' 폴더와 'styles' 폴더 안에 있는 파일들을 모두 업로드 합니다.

 

 

 

업로드를 마쳤다면,
html/css 편집페이지로 돌아옵니다.

 

 

 

그리고 skin.html에 있는 </head> 바로 윗쪽에 코드를 삽입합니다.
삽입할 코드는 아래와 같습니다.

 

 

 

생각보다 어렵지 않죠?
이제 코드를 보기 좋게 삽입할 수 있게 되었습니다.
스크린샷을 찍어 올려서 편집하는 수고를 덜게 되었네요 ^^;

다음에는 어떻게 코드를 블로그 내용에 삽입할 수 있는지,
그리고 어떤 언어들을 사용할 수 있는지 자세하게 설명하겠습니다.

내용이 마음에 드신다면 공감(♡)을 눌러주세요.
로그인 하지 않으셔도 가능합니다. 감사합니다!