-
[설정] 개발자를 위한 글쓰기 설정을 해보자 -코드 하이라이트-일상/티스토리 2018. 11. 5. 21:55반응형
블로그를 작성하는 이유중에 나중에 참고하기 위한 코드를 정리하는 목적도 있습니다. 하지만 티스토리는 아쉽게도 글쓰기 기본기능에서 코드 하이라이트 기능을 제공하지 않습니다. 전에 잠깐 사용했던 네이버 블로그에서는 글쓰기 기본기능으로 소스코드 포맷 입력을 지원하지만 아직까진 티스토리에서는 지원하지 않습니다.
추후에 있을 에디터 개편에서는 소스코드 입력에 대한 개편이 있을것으로 보이지만 언제 개편될지 기약도 없는 상황입니다. 페이지 기능 업데이트 당시 새로운 에디터 기능으로 페이지를 작성할 수 있게 되었지만 1년이 넘도록 아직 글쓰기 기능 개편에 대한 소식은 없는 상황입니다.
참고 : 티스토리 새로운소식/업데이트 소식 [업데이트] 페이지 기능 소개
그렇다고 그냥 올리면 가독성이 떨어지기 때문에 외부 스크립트를 이용해서 코드 하이라이트를 사용해 보도록 하겠습니다.
코드 하이라이트를 위해 검색해 보니 2가지 정도의 스크립트 검색이 되었는데. 그중에서 별도의 설치 없이 간단하게 쓰기 위해 'highlight.js'를 사용하도록 하겠습니다. 이 스크립트도 설치 방식이 제공이 되긴 하는데. 나중에 스킨변경시 마다 새로 스크립트파일을 업로드 하고 하는게 번거롭기도 해서 html페이지에 스크립트만 추가하면 사용할 수 있는 방식으로 쓰려고 합니다.
highlight.js
홈페이지로 이동하면 강렬한 붉은색의 배경에 'Syntax highlighting for the Web'이라는 부제와 사이트명이 제일먼저 눈에 들어오며 화면에는 데모 페이지와 간단한 스펙이 나와있습니다.화면에 보이는 language와 style을 클릭하면 랜덤으로 다른 개발언어와 스타일로 변경되기 때문에 간단하게 훑어보기에 좋습니다. 오른쪽에 보이는 지원 언어와 스타일 링크를 클릭하면 좀더 상세하게 데모를 볼수 있는 페이지로 이동합니다.
참고 : highlight.js demo
language categories에서는 언어들이 분류가 되어있고, styles에서는 지원가능한 스타일이 정의 되어있습니다. styles에서 항목을 선택하면 오른쪽의 데모코드가 해당스타일로 변경이 됩니다. language categories에서 본인이 주로 사용하는 언어를 선택하고 styles에서 원하는 것을 선택하면 될것 같습니다. 스타일명은 직접 입력을 해야하기때문에 잘 기억해 두도록 합니다.
참고로 java는 common 카테고리에 있었고 kotlin, gradle은 misc 카테고리에 있습니다.
이제 선택을 위한 고민은 끝났고 원하는 언어와 스타일을 선택했으면 적용을 해보도록 합시다. 우선 사용법을 확인해 보기 위해 첫화면에서 'usage'를 클릭합니다. 'Get version' 버튼 아래에 있습니다.
이 페이지에서는 코드 하이라이트를 사용할 수 있도록 스크립트를 적용 및 로딩하는 방법과 실제로 하이라이트가 적용되도록 작성하는 방법에 대해서 안내하고 있습니다. 맨 처음 화면의 설명에 따르면 class를 지정해 주지 않아도 자동으로 감지하는듯 하지만 이걸 찾아서 직접 적용할 정도의 정성과 고집이 있다면 class까지 직접 작성하지 않을까 싶습니다. 적용가능한 클래스는 화면의 'class reference'를 클릭하면 안내 페이지로 이동합니다. 해당 페이지에서는 클래스 뿐만 아니라 <code> 태그에서 사용할 수 있는 기능도 안내하고 있으니 참고하시면 됩니다.
하이라이트 적용법은 간단합니다 <pre>태그 사이에 <code>태그를 넣고 그 사이에 하이라이트 적용을 원하는 코드를 입력하면 됩니다. 물론 html 태그를 입력해야 하니 글 작성시 html 쓰기 모드를 왔다갔다 해야 해서 번거롭긴 하지만 감수할만 한거 같습니다.
글 작성화면의 우측을 보면 'html' 체크박스 항목이 있습니다. 이걸 체크하면 모드가 활성/비활성 되기 때문에 적절히 전환해 가면서 작성하게 됩니다.
다시 첫화면으로 돌아가서 'Get version'버튼을 클릭합니다.
참고 : getting highlight.js
하단으로 스크롤을 하면 원하는 항목만 선택해서 커스텀해서 다운로드도 가능하지만 간편함을 위해 cdnjs를 통해 제공되는 스크립트를 사용하도록 하겠습니다. 기본적으로 cdnjs항목을 그대로 사용하면 되고 styles의 default.min.css만 원하는 항목으로 변경해서 사용합니다.
style명은 앞서 확인한 demo페이지의 스타일항목과 동일하기 때문에 styles directory 페이지로 이동하여 해당하는 css항목을 선택합니다. 여기서 주의 사항은 페이지에도 나와있듯이 css확장자 앞에 min을 빼먹으면 적용이 되지 않습니다.
예를 들어 기본 스타일을 'github' 스타일로 변경하고 싶다면
예시
적용
<link rel="stylesheet"
href="...생략.../styles/default.min.css">
<link rel="stylesheet"
href="...생략.../styles/github.min.css">
이제 실제로 적용을 해보도록 하겠습니다. 블로그 관리페이지의 꾸미기 항목에 있는 스킨편집을 클릭합니다. 그럼 스킨편집 페이지로 이동하게 되는데 화면 우측에 위치한 'html 편집'버튼을 클릭합니다. 그럼 스킨의 기본 html 코드가 표시되는데 여기서 <head>태그 사이에 스크립트를 복사하여 넣습니다.
사용법에 대해서는 이제 충분히 숙지를 했으니 실제로 적용해 보도록 합시다. 스킨편집 페이지에서 html 편집으로 이동합니다.
html 코드에서 <head>태그 아무곳이나 사용법에서 보았던 스크립트 3줄을 입력합니다. 우선 스크립트 자체는 간편하게 적용하기 위해 cdnjs에서 호스팅해주는 스크립트를 사용하였습니다. usage 페이지에서 본 initHighlightingOnLoad()도 잊지 않고 추가해 줍니다. 이렇게 작성한뒤 우측상단의 '저장'버튼을 클릭하면 기본설정이 끝났습니다. 이제 실제 코드를 작성해 봅시다.
fun frozen() { elsa.let { it.go() } }아무런 설정없이 <pre>태그만으로 입력한 kotlin 코드 입니다. <pre>태그의 기능으로 줄바꿈이나 들여쓰기 등이 적용되어 작성이 편하긴 하지만 실제 코드를 보는 느낌이 아니어서 가독성은 떨어집니다. 이제 <code>태그를 이용하여 입력해 보도록 하겠습니다.
fun frozen() { elsa.let { it.go() } }태그 하나만 추가했을뿐인데 실제 개발툴에서 보는것처럼 바뀌었습니다. html 작성을 왔다갔다 해야 해서 번거롭긴 하지만 작성후의 가독성은 비교할 수가 없습니다.
참고로 팁을 하나 적자면 <pre><code> ... </code></pre>를 입력할때 첫줄을 <code>태그와 딱 붙여서 작성하지 않으면 내부적으로 줄바꿈이 들어가게 됩니다. 그 외에 다른 문제점은 없지만 기왕에 신경쓴거 줄바꿈도 신경써주면 좋을것 같습니다.
개발자가 블로그를 쓴다면 거의 반드시라고 할 수 있을정도로 중요도가 높은 글쓰기 기능이 코드 하이라이트 기능이라고 생각됩니다. 전에 네이버 블로그를 쓸때는 당연히 지원이 되어서 별 생각이 없었는데 티스토리에선 사용자가 별도의 스크립트를 적용해야 하는 상황이라 좀 놀랍습니다. 언제가 될지 모르지만 앞으로 글쓰기 기능 개편이 예정되어 있다고 하니 하루라도 빨리 진행이 되면 좋을 것 같습니다. 그때까지는 임시방편으로 이렇게라도 코드 하이라이트 기능을 써야 할 것 같습니다.
반응형
