다시 블로그 활성화 전 꾸미고 싶어
제가 알아보게 된곳은 hELLO 라는 곳입니다.[https://pronist.tistory.com/5]
우선 hELLO 스킨 적용법 , 코드박스변경까지 이어서 알아보도록 하겠습니다.
해당스킨이 가장 깔끔하고 마음에 들며 심지어 무료라는 점에서 메리트가 있어 더 고민없이 선택하였습니다.
우선 스킨을 입히기 전에 먼저 설정할것이 있습니다.
1.우선 프로필 상단에 운영중인 블로그 톱니바퀴를 눌러주시고
2. 관리자 페이지 입니다. 왼쪽에 플러그인을 눌러주시고
3. highlight 를 검색하면 여러플러그인중에 코드 문법 강조가 나옵니다. 눌러주시고
4. 해제를 눌러 비활성화를 시킵니다 !
(Hightlight.js) 를 사용하기 위함입니다.
자 이러면 초기 설정을 끝났습니다. 이제 스킨을 사용하러 가볼까요
1. 자 이제 스킨 설명입니다.
아래 링크를 모두 다운로드 받아주세요
이는 원작자 님이 만들어주신 zip 파일입니다
원작자님 블로그링크:https://pronist.tistory.com/5?category=844785
링크 : https://github.com/pronist/hello/releases/download/4.10.3/hELLO-dist.zip
우선 마찬가지로
1. 우측 상단에 프로필을 눌러 운영중인 블로그 톱니바퀴를 누릅니다.
2. 이번엔 왼쪽 꾸미기에 스킨 편집 으로 들어갑니다.
3. 스킨 목록이 보이시나요 ? 오른쪽 스킨 등록 + 버튼을 눌러주세요
처음엔 티스토리에서 제공해주는 기본 스킨들이있습니다.
사용중인 스킨이 여러분한텐 안보일텐데 저는 이미 Hello 스킨을 등록하여서 사용중인 스킨으로 나오고있습니다.
4. 그후 아까 받았던 zip 파일을 올려주세요 안타깝게도 티스토리에선 폴더가 올라가지않아서 파일들을 올려주셔야합니다.
5. 그다음 적용을 눌러주면 스킨 적용은 끝납니다.간단하죠?
2. 그다음 highlight 적용 시키기 입니다. ( 코드블럭 사용하시는 분들에 해당됩니다.)
저는 이렇게 코드블럭을 사용하고있습니다 !
console.log(Hello)hightlight 는 티스토리에서 제공되는 코드블럭이 가독성이 떨어진다고 생각하거나 마음에 들지 않는 경우 혹은 수정하고 싶은데 내가 직접하기보단 되어있는 것을 가져다쓰고싶을때 사용합니다. 저 또한 가독성을 높히기 위해 사용을 시도하게되었습니다.
https://highlightjs.org/
highlight.js
Usage highlight.js can be used in different ways such using CDNs, hosting the bundle yourself, as a Vue plug-in, as ES6 modules, with Node.js, and web workers. See our README on GitHub for more details. As a Module Highlight.js can be used with Node on the
highlightjs.org
우선 아래에 들어가게되면
이와 같은 화면이 나오는데 여기서 우리는 DEMO 와 Download 를 누를겁니다.
1. DEMO 입니다. 여기서 Theme 과 그아래 code 를 활용 할건데 이것은 내가 원하는 스타일이 실제로 어떤식으로 나오는지 미리 확인해볼수있습니다. Theme을 이리 저리 만져보세요 ! 저는 rose-pine-moon 이 보라보라 해서 이것을 선택해서 확인해봤습니다 !
2.Download 로 들어가서 사용하는 언어 체크후 다운로드를합니다 저는 Common 을 체크하였습니다.
3. 다시 티스토리로 넘어와서 우리 관리자 -> 스킨편집 들어갔었죠 ? 거기서 html 편집을눌러줍니다 ! ( 여기서 헷갈리시면 시간 많이 날립니다 )
4. 이런 화면이 나올텐데 저희는 HTML 과 파일업로드만을 쓸겁니다.
5. 파일업로드에서 추가하고싶은 것을 넣어주세요 hight.js 와 저는 rose-pinemoon.css 를 넣었습니다
다른 Theme 을 원하시면 다른것을 넣으셔도 좋습니다.
6. </head> 를 검색하시고 위에 아래와 같이 입력해주세요 사진은 저는 입력 하여서 그렇습니다.
다른 Theme 을 쓰셨다면 두번재줄 href=""안 부분을 이름에 맞게 수정해주세요 !
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./rose-pine-moon.css">
<script>hljs.initHighlightingOnLoad();</script>
자 이러면 모두 완성입니다 . 개인적으로 무료지만 아주아주 만족스러운 블로그 모양이 안성되었내요
'Any' 카테고리의 다른 글
| 개발자 취업 조언 (2) | 2025.06.23 |
|---|---|
| 백준 허브 사용 방법 (0) | 2025.05.16 |