이 글에서는 hELLO 스킨을 사용하는 티스토리 블로그에서 기본 글쓰기 모드에서도 백틱을 이용해 인라인 코드 블럭을 노션 스타일로 손쉽게 변경하는 방법을 소개한다. 간단한 코드 추가만으로 블로그의 가독성을 한층 더 높일 수 있다. 왜 인라인 코드 블럭을 노션 스타일로? 코드를 포함하는 기술 블로그나 개발 관련 글에서 코드 블럭의 `가독성`은 매우 중요하다. 특히 문장 중간에 짧게 들어가는 인라인 코드의 경우, 주변 텍스트와 잘 구분되어야 독자가 내용을 쉽게 파악할 수 있다. 노션 스타일의 `인라인 코드 블럭`은 배경색과 텍스트 색상을 다르게 하여 시각적으로 명확하게 구분해 주고, `둥근` 모서리와 적절한 `패딩`으로 깔끔하고 보기 좋은 디자인을 제공한다. 이는 독자가 코드와 일반 텍스트를 빠르게 구분하고..

[티스토리] hELLO 스킨에 코드 블럭 복사 버튼 추가하기현재 블로그 스킨으로 `hELLO` 스킨을 사용하고 있다. 개인적으로 티스토리 스킨 중 완성도가 가장 높다고 생각한다. 이 스킨은 다크 모드를 완벽히 지원하며 디자인이 너무 미니멀해서 보는 순간deploylife.tistory.com지난번 "[티스토리] hELLO 스킨에 코드 블럭 복사 버튼 추가하기" 글에 이어, 이번에는 hELLO 스킨의 코드 블럭에 라인 번호를 추가하는 방법을 소개한다. 코드에 라인 번호가 있으면 특정 줄을 지칭하거나 코드의 흐름을 파악하는 데 훨씬 용이하여 가독성을 크게 높일 수 있다.hELLO 스킨은 `highlight.js`를 사용하여 코드 블럭을 렌더링하는데, 여기에 `highlightjs-line-numbers.js..

현재 블로그 스킨으로 `hELLO` 스킨을 사용하고 있다. 개인적으로 티스토리 스킨 중 완성도가 가장 높다고 생각한다. 이 스킨은 다크 모드를 완벽히 지원하며 디자인이 너무 미니멀해서 보는 순간 이 스킨을 이용하여 블로그를 만들어야겠다는 생각을 했다. 제작자 분이 개발자라서 그런지 코드 블럭에 `highlight.js`가 이미 적용되어 있는 점도 맘에 들었다.`highlight.js`는 웹에서 코드 구문을 강조해주는 강력한 JavaScript 라이브러리로, 다양한 언어의 코드를 시각적으로 보기 좋게 만들어준다. 하지만 아쉽게도 hELLO 스킨의 기본 코드 블럭에는 코드를 간편하게 복사할 수 있는 기능이 없어 코드 복사가 필요한 방문자에게는 다소 불편함이 있었다. 이 글에서는 hELLO 스킨의 코드 블럭에..