티스토리의 코드블럭
대부분의 개발자들은 티스토리, Velog, GitHub 또는 워드프레스로 개인 사이트를 구축하여 개발 자료를 공유한다.
카카오 계정만 있으면 바로 운영할 수 있는 티스토리의 점유율이 제일 높지 않을까(?)라고 생각하는데 티스토리의 문제점은 기본으로 제공하는 코드블럭의 디자인이 매우 밋밋하다는 것이다.
아래는 티스토리의 기본 스킨인 오디세이에서 코드블럭을 사용했을 때 화면이다. 한눈에 봐도 디자인이 별로다.
기본 코드블럭의 디자인이 별로라서 능력 있는 개발자들은 기본 코드블럭의 디자인을 커스텀해서 사용하고 있다.
아래 스크린샷은 가장 많이 사용하고 있는 carbon이라는 커스텀 코드블럭이다. 서농님의 블로그에서 확인할 수 있다.
다음은 개발자가 직접 커스텀한 것으로 추측되는 코드블럭이다.
아래 코드블럭은 webclub님의 블로그에서 확인할 수 있다.
아래 코드블럭은 WEBDIR님의 블로그에서 확인할 수 있다.
본 포스팅은 티스토리에서 제공하는 코드 문법 강조 사용 방법과 highlight 라이브러리를 적용하여 코드블럭의 테마를 변경하는 방법을 설명한다.
티스토리에서 제공하는 코드 문법 강조
티스토리에서 기본적으로 제공하는 '코드 문법 강조' 플러그인을 사용하여 코드의 테마를 변경할 수 있다.
관리자 페이지에 접속 후 아래 스크린샷처럼 [플러그인 > 코드 문법 강조]를 클릭한다.
기본을 포함한 8가지 테마를 제공하며 원하는 테마를 선택한 뒤 적용 버튼을 클릭하면 해당 테마가 적용된다.
변경된 테마가 적용되지 않았다면 '자세히 보기'를 클릭한 다음 티스토리 가이드를 읽어보자.
테마 직접 추가(highlight.js) - CDN
티스토리 가이드에서 언급했듯이 블로그 관리자가 코드 하이라이터를 추가할 수 있다.
highlight.js
Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.
highlightjs.org
highlight 사이트를 접속한 뒤 '197 languages and 248 styles'을 클릭한다. 197개의 프로그래밍 언어와 248개의 스타일을 지원한다는 뜻이며 highlight의 버전이 업데이트될 때마다 표시되는 숫자는 달라질 수 있다.
좌측에서 원하는 테마와 프로그래밍 언어를 선택할 수 있으며, 우측에 적용된 테마를 확인할 수 있다.
마음에 드는 테마를 골랐으면 테마 이름을 기록한다. 아래부터는 'Stackoverflow Dark' 테마를 티스토리에 적용하는 방법이다.
highlight 메인 페이지로 접속한 다음 'Get version 11.7.0'을 클릭한다.
cdnjs의 밑에 있는 코드를 복사한다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
복사한 코드에서 'default'라는 문자열이 작성된 부분을 기록해둔 테마 이름인 'Stackoverflow Dark'로 변경한다. 테마 이름을 입력할 때, 주의할 점은 대문자는 소문자로 입력해야 하고 띄어쓰기 대신 하이픈(-)을 입력해야 한다는 것이다.
따라서, 'Stackoverflow Dark'가 아닌 'stackoverflow-dark'로 입력하고 highlight를 불러오는 코드를 추가한다. 아래는 테마 이름이 변경되었으며 highlight를 불러오는 수정된 코드다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/stackoverflow-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
수정된 코드를 복사한 다음 [티스토리 관리자 페이지 > 스킨 편집] 페이지를 접근한다. 스킨 편집 페이지를 접근하였으면 우측 상단에 'html 편집'을 클릭한다.
그다음 복사한 코드를 <head> ~ </head> 사이에 붙여 넣기하고 '적용'을 클릭한다.
아래와 같이 'Stackoverflow Dark' 테마가 적용된 것을 확인할 수 있다.
만약, highlight 테마가 적용되지 않았다면 [티스토리 관리자 페이지 > 플러그인 > 코드 문법 강조]를 선택한 다음 '해제'를 클릭한다.
테마 직접 추가(highlight.js) - 파일 업로드
이번에는 CDN이 아닌 파일을 업로드해서 highlight 라이브러리를 적용할 수 있는 방법을 설명한다. CDN이란 쉽게 설명하자면 외부 정적 파일(css, js 등)을 가져와서 코드에 적용하는 방식을 말한다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/stackoverflow-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>코드를 보면 알겠지만, href 애트리뷰트에 작성된 URL을 호출하여 css 파일을 적용하고 src 애트리뷰트에 작성된 URL을 호출하여 js 파일을 적용한다는 것을 추측할 수 있다.
아래 스크린샷은 웹 브라우저에서 cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js를 입력한 결과다.
CDN 방식은 한 가지 문제점이 있는데, 서버에 정적 파일(css, js 파일 등)이 존재하지 않으면 코드가 비정상적으로 실행될 수 있다는 것이다.
이번에는 CDN 방식이 아닌 css와 js 파일을 티스토리에 업로드해서 highlight 라이브러리를 적용하는 방법을 설명한다.
highlight 메인 페이지로 접속한 다음 'Get version 11.7.0'을 클릭한다.
스크롤을 내리다 보면 Custom package라는 목차를 볼 수 있는데, 'Common'은 대중화된 프로그래밍 언어를 나타내며 기본적으로 체크되어 있다. 'Other는 그 이외의 것들을 말하며 기본적으로 체크가 해제되어 있다.
스크롤을 더 내려보면 'Download' 버튼이 존재한다. 'Download' 버튼을 클릭하면 'highlight.zip'파일을 다운로드할 수 있다.
압축을 풀면 체크된 코드블럭에 테마를 적용할 수 있는 js, css 파일들이 존재한다.
티스토리에 업로드할 파일은 'highlight.min.js' 파일과 'styles' 폴더에 있는 파일이다. 'highlight.min.js' 파일은 highlight 코드블럭을 적용하는 JavaScript 코드가 존재하는 파일이며 'styles' 폴더에는 테마별로 css 파일이 존재한다.
이제 파일을 업로드하기 위해 [티스토리 관리자 페이지 > 스킨 편집 > html 편집 > 파일업로드] 페이지를 접근한다.
하단의 '+ 추가'를 클릭해서 'highlight.min.js'파일과 적용하려는 테마 css 파일을 업로드하자. 이번에는 'Tokyo Night Dark' 테마를 적용하기 위해 'tokyo-night-dark.min.css' 파일을 선택했다. 두 개의 파일을 추가했으면 우측 상단의 '적용'을 클릭한다.
이제 CDN 방식이 아닌 티스토리에 업로드된 파일을 불러오기 위해 HTML 코드를 수정한다. href 애트리뷰트에는 css 파일의 경로를 작성하고 src 애트리뷰트에는 js 파일의 경로를 작성한다.
<link rel="stylesheet"
href="./images/tokyo-night-dark.min.css">
<script src="./images/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
코드를 수정한 다음 '적용'을 클릭한다.
아래와 같이 'Tokyo Night Dark' 테마가 적용된 것을 확인할 수 있다.
정리
이번 포스팅은 티스토리에서 기본적으로 제공하는 코드 문법 강조 기능과 highlight 라이브러리 적용 방법을 설명하였다. 본 포스팅에서 설명하는 내용이 많기 때문에 코드 라인 추가, 폰트 변경 방법, 열기 및 닫기, 복사 기능, 프로그래밍 언어명 적용 방법은 다음 포스팅에서 설명한다.
'티스토리 > 티스토리 스킨 제작' 카테고리의 다른 글
| [티스토리]카테고리 클릭시 접기/펼치기 (0) | 2022.06.30 |
|---|
댓글