제 블로그에 게시하는 소스 코드를 보기 좋게 할 목적으로 highlight js 를 설치 했습니다. 그런데 문제가 있더군요.
보시면 아시겠지만 뭔가 이상합니다. 주석문인 # 이후로 하이라이트 기능이 제대로 동작하지 않고 있습니다.
검색을 해 본 결과 html 태그의 br 때문이라고 합니다.
블로그에 소스를 복사해 넣을때 html 모드에서가 아닌 일반모드에서 복사해 넣으면 줄바꿈인 br 태그가 붙는데 그것 때문에 생기는 문제입니다.
해결 방법은 2가지 인데 ....
1. 소스코드를 붙여 넣을때 html 모드로 전환해서 붙여넣는 방법
2. highlight js 의 설정을 바꾸는 방법
일반 에디트 모드에서 소스코드를 붙여 넣는 방식을 사용하려면 2번째 방법을 써야 합니다.
저는 2번째 방식을 쓰기로 했습니다. 이 경우는 블로그 스킨의 html 소스 수정기능을 이용해서 다음 문장을 추가 해 넣어야 합니다.
<script>hljs.configure({useBR: true});</script>
대충 내용은 줄바꿈 태그인 br 을 사용하겠다는 겁니다.
제 경우는 아무래도 일반 에디터 상태에서 편집을 하는게 더 쉬울거 같아서 이 방법을 쓰기로 했습니다.
추가 하는 곳은 highlight js 를 로드하기 전에 넣어주면 됩니다.
<script>hljs.initHighlightingOnLoad();</script>
블로그 스킨 html 소스에서 위의 문장 앞에 복사해 넣으시면 됩니다.
결과는 다음과 같습니다. 하이라이트 기능이 잘 작동되고 있습니다.
>
참고로....
위와 같이 br 태그를 사용하게 설정하면 1번과 같이 html 상태에서 복사해 넣은 소스는 줄바꿈 없이 1줄로 나오기 때문에 두 방법은 공존해서 사용할 수가 없습니다. 한가지를 선택해야 합니다.
댓글
댓글 쓰기