티스토리 뷰

      




웹사이트나 블로그를 다니다 보면 아래처럼 깔끔하게 소스코드가 표시되는 것을

보신적이 있으실 겁니다. 보통 코드 하이라이터라고 불리우는데요.



소스코드를 블로그 편집기에 그대로 붙여 넣으시면 태그 인식등으로 인해 제대로 

표시되지 않을 뿐만 아니라, 들여쓰기 및 예약어 등이 구별되지 않아 가독성이 

떨어지게 됩니다. 


소스코드 하이라이팅을 지원 하기 위해서 여러가지 플러그인들이 존재하는데요.

개인적으로는 가볍고 사용방법이 편리한 SyntaxHighlighter을 선호합니다.


이번에 블로그를 신규 개설하다보니 다시 설치해야 하는 상황이 되어서 겸사겸사 적용방법을

포스팅하게되었습니다. 

설치 과정은 단순합니다. 바쁘신 분들은 아래 설치 과정 요약만 보셔도 될거에요 :)



설치 과정 요약

  1.설치 파일 다운로드 : http://alexgorbatchev.com/SyntaxHighlighter/download/

  2.압축 파일 해제 후 styles 폴더 scripts 폴더안의 파일을 티스토리에 업로드

     - 업로드 경로 : 티스토리 관리 페이지 → HTML/CSS 편집 → 파일업로드 

  3.<head> 태그 안에 코드 넣기 : 하이라이터 스타일 지정 가능

     - 코드형식 : <link rel="stylesheet" =""="" type="text/css" href="./images/원하는스타일.css">

     - Eclipse 스타일 적용 예시


  4.<body> 태그 안에 코드 넣기 : 프로그래밍 언어 선택적 삽입 가능






























  5.편집기에서 HTML 모드로 전환 후 <pre> 태그 안에 소스코드 삽입

     - pre 태그 : <pre class="brush: python"> 소스코드 위치 </pre>








1.설치 파일 다운로드 : http://alexgorbatchev.com/SyntaxHighlighter/download/


2.설치 과정 확인 : http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html


3.다운로드 파일 압축 해제 


4.styles 폴더와 scripts 폴더 내 파일 티스토리 업로드

    - 업로드 경로 : 티스토리 관리 페이지 → HTML/CSS 편집 → 파일업로드 

파일 업로드 전


파일 업로드 후


5.<head> 태그 안에 하이라이터 스타일 지정 코드 넣기

    - 업로드 경로 : 티스토리 관리 페이지 → HTML/CSS 편집 → HTML

    - 코드형식 : <link rel="stylesheet" =""="" type="text/css" href="./images/원하는스타일.css">

     - Eclipse 스타일 적용 예시


코드 삽입 후 저장 버튼 클릭



6.<body> 태그 안에 프로그래밍 언어별 스크립트 코드 넣기

    - 업로드 경로 : 티스토리 관리 페이지 → HTML/CSS 편집 → HTML

    - 코드형식 : <script type="text/javascript" src="./images/언어별 스크립트.js"></script>

    - 전체 언어 코드































코드 삽입 후 저장 버튼 클릭



7.편집기에서 HTML 모드로 전환 후 <pre> 태그 안에 소스코드 삽입




8.미리보기로 정상 출력 여부 확인







홍보배너링크
댓글
최근에 올라온 글
최근에 달린 댓글