다른 사람들 블로그를 보다 보면 코드에 색깔도 입히고
코드영역만 배경을 지정해서 예쁘게 꾸며놓은 것을 볼 수 있다.
이렇게...
대체 어떻게 다들 저렇게 적용하는거지..
라고 속으로 되뇌면서 검색을 해보니
역시 위대하신 선구자(?)들은
이럴 때를 대비해
다~ 만들어놓으셨더라구요...
지금부터
내 블로그의 코드블럭에도
디자인을 예쁘게 입힐 수 있는 방법을 소개하겠습니다.
따라하시면 10분안에 적용 할 수 있어요~!
1. 티스토리 플러그인을 이용하는 방법
기본적으로 티스토리에서 플러그인이라는 관리 방법을 제공하고
이것을 이용해서 꾸밀 수 있는 방법이 있더라구요?
저는 몰랐어요(...)
블로그 관리페이지로 이동!
여기서 플러그인 이라는 녀석을 클릭! 해줍니다.
검색창에서 syntax 라고 작성 후 검색을 해줍시다
Syntax Highlight 라는 검색 결과가 나올 텐데요
이 녀석을 클릭해 봅시다
그럼 사진과 같은 창이 뜰 텐데요
여기서 적용하고 싶은 코드 테마를 선택하시고
적용 버튼을 클릭하면 돼요!
코드 테마를 선택하시고 적용하셨다면
이제 실제로 어떻게 사용할 수 있는지 볼게요
저는 Atom One Dark 를 골랐어요 ㅎㅎ
시험 삼아 글쓰기를 하나 해줍니다
우측의 ... 표시를 눌러서 코드 블럭을 클릭해 줍니다
어떤 코드를 작성할 건지 골라줍니다.
이건 꼭 선택해서 정해줘야 해요!
안 그러면 다른 언어의 코드 컬러 스타일이 적용될 수 있거든요 ㅎㅎ
저는 Kotlin 코드 스타일로 테스트 코드를 한번 넣어볼게요
자 아래처럼 작성하고 확인을 눌러주면~
글쓰기 에디터 영역에 아래 사진 처럼 들어간 것을 볼 수 있어요!
하.지.만! 여기서 보이는 코드 블럭 디자인은
실제로 글을 작성하고 포스팅을 발행했을 때 보이는 색깔과 동일하지 않아요!
그렇기 때문에 저는 비공개로 두고 발행을 한번 해볼게요
잘 적용되는지 한번 보자구요 ㅎㅎ
짜잔~~~
잘 적용되는 것을 볼 수 있어요 ㅎㅎ
확실히 아무것도 적용되지 않은 무미건조한 코드 블럭 보다는 훨~~~신 낫네요
굿!~~~
잘 적용되었지만 티스토리에서 플러그인으로 제공해 주는
기본 코드 테마의 아쉬운 점이 조금 있는데요~
미리 보기를 할 수 없다는 점?
또 적용할 수 있는 코드 테마가 몇 개 없다는 점?
하지만 이런 아쉬운 점들을 해결할 수 있는 좋은 라이브러리가 있는데요~
그것은 바로...
2. highlight.js 를 이용한 방법
티스토리에서 제공하는 기본 플러그인의 아쉬운 점을 해결할 수 있는 녀석이에요
어느 착하신 분이 테마도 더 다양하고, 미리 보기까지 제공해 주는 라이브러리를 만들어 놓으셨다는 것!
자 이제 highlight.js 를 활용해서 블로그에 적용해 보도록 할게요.
먼저 블로그 관리페이지로 이동합니다!
여기서 스킨 편집을 클릭해 줍니다
우측의 html 편집 버튼을 클릭해 줍니다
그러면 우측에 아래와 같은 화면이 나올 텐데요
이렇게 페이지를 놓고 아래 사이트로 이동해 줍니다
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
여기서 Get version 11.6.0 을 클릭해 줍니다.
다운로드하는 건 아니에요~!!
이후에 나타난 페이지에서
Basic Usage 라는 방법처럼
그냥 <link>, <script> 코드만 복붙해서
내 블로그에 넣기만 하면?
바로 적용 ok!
참 쉽죠???
하.지.만!
적용하기 전에 우리가 궁금했던 것들은
티스토리 기본 플러그인 보다
어떤 종류의 테마들이 있는지
적용 이후에는 어떻게 보여지는지
이런 것들을 보고 싶었다고요....
그건 바로 아래의 URL 로 이동해서 확인이 가능해요~~!!
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
여기에서 어떤 테마는 언어 별로 어떻게 보이는지 확인이 가능하고
마음에 드는 테마도 골라볼 수 있어요 ㅎㅎ
저는 Android Studio 테마를 선택하고
제 블로그에 적용시켜 볼게요
먼저 아래 코드를 복사해 봅니다
<link rel="stylesheet" href="/path/to/styles/default.min.css">
<script src="/path/to/highlight.min.js"></script>
그리고 이전에 열어뒀던 티스토리 스킨 편집 페이지로 이동!
<head> </head> 사이에 복사한 코드를 넣어줍니다
저는 아래처럼 두 곳에 넣었어요
아래 코드도 넣어야 하는데요
html 의 맨 아래쪽에 넣어주도록 할게요
<script>hljs.highlightAll();</script>
사진처럼 맨 아래쪽 <body> 태그가 끝나는 라인에 넣어줬습니다
자 이렇게 해서 이제 적용을 눌러 주...
기에는 아직 할 일이 더 남아 있어요
우리가 선택한 코드 테마를 아직 적용시켜주지 않았어요~
선택한 코드 테마를 적용시켜 볼게요 ㅎㅎ
상단에 선언했던 <link> 태그를 다시 찾습니다
그리고 default 라는 텍스트를 원하는 테마명으로 고쳐줍니다!
저 같은 경우는 androidstudio 테마를 선택했으니
default -> androidstudio 가 되겠네요 ㅎㅎ
이제 적용 버튼을 눌러 적용을 해주고
테마가 잘 적용되는지 확인 한번 해볼게요 ㅎㅎ
테스트용으로 Kotlin 코드 블럭이 들어간 글을 하나 써보겠습니다
"확인" 을 눌러 글을 작성해서 잘 적용되는지 확인해보세요
저는 이전에 작성했던 글을 토대로
잘 적용 되었는지 봐볼게요 ㅎㅎ
잘 적용 되었네요
흡 - 족 :)
마무리
Android Studio 테마 형태로 아주 잘 적용된 것을 볼 수 있습니다.
확실히 기본 플러그인 테마보다 종류도 많고
미리 보기로 골라볼 수 있어서 저는 2번 방법이 더 마음에 드네요 ㅎㅎ
이상으로 포스팅을 마치겠습니다.
봐주셔서 감사합니다~
'Blog' 카테고리의 다른 글
| 내 블로그를 ZUM 검색에 노출시키기 (0) | 2022.08.08 |
|---|---|
| 웹마스터에 사이트맵 등록하기 (0) | 2020.06.23 |
| 내 블로그를 구글 검색에 노출 시키기 (0) | 2020.06.23 |
| 내 블로그를 네이버 검색에 노출 시키기! (0) | 2020.05.18 |
