1. 새로운 편집기에서 기본 텍스트로 나오는 코드블럭에 스킨 적용시키기
티스토리에 새로운 편집기가 생겨 난 후, 추가된 코드블럭으로 소스코드 작성이 쉽고 유용해질것 같았습니다.
아래처럼 코드블럭에 코드를 삽입한 후에, 말끔하고 이쁜 스킨의 코드가 적용되는가 싶더니...
막상 발행되는 글을 통해선 그 스킨이 전혀 적용 되지 않았습니다.
여기까지만 해도 소스코드가 이쁘게 적용될것만 같았으나...
전혀 적용되지 않고 단순 텍스트로만 보여서 낙담하고 있는 찰나.. 소스코드 스타일을 적용시킬 수 있는 방법을 찾았다!
highlight.js 에서 CDN방식을 통해 스킨을 적용하는 것이다.
티스토리 관리자 창에서 "꾸미기 > 스킨 편집 > HTML 코드 수정"을 통해서 해당 코드를 삽입해준다.
<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>
※코드 삽입시 아래처럼 </head> 위쪽에 삽입 해준다.
위와 같이 적용하면 이제 새로운 편집기를 통해서도 손쉽게 코드를 이쁘게 적용시킬 수 있습니다.
2. 스타일 바꾸기
https://highlightjs.org/static/demo/ 에 들어가면 스타일 적용 여러 예시를 볼 수 있는데 이 중 하나를 마음에 드는 것을 골라 stylesheet 영역의 default를 원하는 스타일로 수정해주면 됩니다.
(만약 스타일이름이 띄어쓰기가 있는 경우, - 를 통해 구분 지어주세요. 그리고 소문자로 써주세요!)
위와 같이 설정하면 아래처럼 이쁜 소스코드를 삽입할 수 있습니다.
