티스토리 뷰

IDE에서 제공하는 구문 강조 기능을 블로그에도 적용해보자

우리는 대부분 소스 코드를 작성할 때 IDE에서 제공하는 미려한 화면에서 코드를 작성한다. 하지만 블로깅 또는 위키 문서 작성시 구문 강조(Syntax Highlighting) 기능이 적용되지 않아 가독성이 심각하게 떨어진다. 이번 글에서는 Prism이라는 초경량의 강력한 기능을 가진 구문 강조(Syntax Highlighter) 라이브러리를 이용하여 티스토리 블로깅시 소스 코드에 문법 강조 기능을 적용하는 방법을 설명하고자 한다.

라이브러리 다운로드

  • 여기를 클릭하여 Prism 홈페이지에 접속한 후 DOWNLOAD 버튼을 클릭한다.
  • 테마 및 지원 언어를 커스터마이징하는 화면이 나온다. 테마는 본인의 취향에 따라 고르고 (나는 어두운 계열의 Okadia 테마를 선택했다.) 본인이 자주 포스팅하는 언어를 선택한다.(나는 Java, Bash, C#을 추가 선택했다.)
  • 추가 플러그인 또한 필요에 따라 선택한다.(나는 Line Numbers만 추가했다.)
  • 커스터마이징을 완료하였으면 DOWNLOAD JS, DOWNLOAD CSS 버튼을 차례로 클릭하여 생성된 라이브러리 파일을 다운로드한다. prism.css, prism.js 2개 파일이 다운로드되었다.

티스토리 적용

  • TISTORY 관리 화면으로 이동한다.
  • 꾸미기 > HTML/CSS 편집 > 파일업로드 화면으로 이동하여 앞서 다운로드한 2개 파일을 업로드한다.
  • HTML/CSS 화면으로 이동하여 skin.html 파일에 아래 내용을 추가한다.

    <link href="./prism.css" rel="stylesheet">
    <script src="./prism.js"></script>
  • 글 포스팅시 HTML 코드를 아래와 같이 작성하면 구문 강조 및 라인 출력 기능이 적용된다.

    <pre class="line-numbers">
    <code class="language-markup">
    // 코드 입력
    </code>
    </pre>
    
  • HTML일 경우 클래스명에 language-markup, CSS일 경우 language-css, JavaScript일 경우 language-javascript을 입력한다.


댓글
댓글쓰기 폼