웹 개발/웹&프로그래밍
티스토리 에디터 마크다운에 코드 하이라이트 적용하기
희랍인 조르바
2019. 4. 6. 17:44
이번 티스토리 에디터 업데이트로 티스토리에서 바로 마크다운을 작성하게 됐는데, 코드가 진한 초록색으로만 나와서.. 이유를 찾아보니 유저의 자유로운 선택 을 위해 따로 적용하진 않았다고 한다.
출처 : 티스토리 공식 사이트
그래서 코드 하이라이트를 어떻게 적용하느냐. 이 포스팅에서 사람들이 많이 사용하는 Highlight.js로 코드 하이라이트 적용하는 법을 소개하려한다.
이 곳을 들어가면 Hightligt.js를 어떻게 적용하는지 안내가 되어있는데 티스토리 마크다운에 코드 블럭만 어떻게 적용하는지만 소개해보겠다.
아래의 코드를 html에 붙이라고 하는데, 스킨 에 계속 적용해서 쓰기 위해 cdn방식으로 적용해보겠다.
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
먼저 관리자 창으로 들어가서 스킨편집 창에서 아래처럼 html의 <head></head> 사이에 코드를 붙여준다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
위처럼 하면 일단 기본적인 코드 하이라이트 적용이 끝난다. 하지만 여기서 또 입맛대로 코드 하이라이트 스타일을 골라서 사용할 수 있는데, 여기 에 들어가서 본인이 원하는 코드 하이라이트 스타일을 고른다.
원하는 스타일을 골랐다면 위에서 작성한 아래의 코드 부분에서
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">default.min.css 자리에 원하는 스타일의 css 이름을 default 대신에 바꿔서 기입한다. 스타일의 css 파일명은 이 곳을 참고하여 적용하면 된다.