본문 바로가기

Highlight.js3

코드블럭 - 줄번호 표시 (라이트 버전) 난 다 필요없고 단순히 줄번호만 표시되면 좋겠다!! 하시는 분들을 위해 준비했습니다. 설치법은 풀버전과 동일합니다. 그저 소스가 매우 짧을 뿐 풀버전과의 기능적 차이는, 줄번호 감추기 불가 줄강조 불가 시작번호 지정 불가 긴 코드가 줄바꿈되었을 시, 들여쓰기(indent)가 유지되지 않음 선별적 적용 안됨 더 많은 기능은 아래 글 참고 2020/08/25 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 (풀버전) 2020. 8. 25.
코드블럭 - SyntaxHighlighter 버리고 highlight.js 로 갈아타기 혹여 SyntaxHighligher (이하 SH) 가 적용되게 써둔 글이 많아서 '코드 문법 강조' 플러그인 (=highlight.js (이하 hljs)) 를 쓰고 싶어도 못쓰는 분들이 계실까 싶어 올립니다. [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래 소스를 넣어 주세요. (제이쿼리는 추가되어 있을 것으로 간주하겠습니다. 아니면 댓글로 알려 주세요.) $("pre").each(function(i, pre) { if (!$(pre).find('code').length) { if (pre.className) { var c = pre.className.replace(/\s/g, ''); var nc = {}; var items = c.split(";"); $.each(it.. 2020. 8. 20.
highlight.js (문법강조) 적용하기 및 설정 코드블럭으로 입력한 소스를 알록달록 예쁘고 보기 쉽게 만들어 주는데는 여러 방법이 있는데... 그중 티스토리와 가장 찰떡궁합인 highlight.js 를 적용하는 방법을 알아보자! (줄번호 추가는 2020/08/16 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 참고) 방법1: '코드 문법 강조' 플러그인 사용 이건 뭐 딱히 설명이 필요 없을듯.. 가장 심플한 방법이라 (아마 다들 알아서 쓰고 계실듯..) 편리함이 장점이라면, 단점으로는 사용가능한 테마가 제한적이고 버전 업데이트가 안되고 탭간격 같은 옵션 적용불가 방법2: '코드 문법 강조' 플러그인 사용을 해제하고 직접 highlight.js 를 스킨에 추가하기 [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래.. 2020. 8. 17.