01) https://highlightjs.org/ 접속
02) Get version 9.12.0 버튼 클릭
03) 필요한 언어의 체크박스를 선택해주고 Download 클릭
(페이지 하단에 아주 작게 있음)
04) 압축파일 풀기
압축파일을 풀면 highlight.pack.js 파일과 style폴더안에 zenburn.css 파일이 있을것
05) 이제 드디어 티스토리에 적용시켜봅시다
블로그관리 > 꾸미기 >스킨편집 >html 편집
(굳이 이렇게 안와도 됨 . 모로가도 서울로만 가면 된다고 html 편집까지 알아서 잘 찾아오심 됩니다)
파일업로드 클릭
06) 하단에 +추가 버튼 클릭해서
04에서 찾아뒀던 highlight.pack.js 파일과 zenburn.css 파일을 업로드 합니다
07) HTML 로 컴백 하신 다음에
<head> </head> 사이에
<!-- highlight -->
<link rel="stylesheet" href="./images/zenburn.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
위 코드를 넣어주세요
이렇게 하셨나요?
자 그럼 끝났네요
이제 적용시키려면
1.글쓰기
2.에디터에 소스코드 쓰기
3.html 체크박스클릭 >
4.내가 쓴 코드를 <pre><code> 내가쓴코드 </code></pre> 형식으로 감싸주기
5.발행
ㅋㅋ 저는 처음에 할때 적용이 왜 안되나 했더니
css코드, jquery 코드만 그냥 썼더라구요
----------------------------------------------------------
<style> css 코드 작성 </style>
<script> 자바스크립트 코드작성 </script>
----------------------------------------------------------
이런식으로 했었어야했는데.. ㅎㅎㅎ
이런 html 태그와 같이 쓰지 않으면 그냥 단순 메모장에 쓰는것과 다름 없기에 하이라이터가 적용 안된다는 깨달음을 얻었습니다
<script>
console.log("Hello world");
</script>
에디터에서 글쓸때는 하이라이터가 적용안된것처럼 보여도 미리보기를 하셨거나 발행을 누르시면 적용된걸 확인할 수 있습니다
댓글