맨땅에 헤딩하는 사람

HTML/CSS 수정에 대한 기초적인 글은 아래 글에서 참고바란다. 2020/05/03 - [정보] - 티스토리 HTML/CSS 수정하기 Color Scripter를 사용하던 중 디자인적으로 불만이 하나 생겼다. 그것은 바로 코드의 최대 line 길이에 따라 코드블럭의 width가 결정된다는 점이다. 글로 풀어쓰려니 설명이 잘 안되는 느낌인데 아래 그림을 보면 이해가 쉽게 될 것이다. 글 작성 시 여러 코드를 삽입하는 경우 최대 line의 길이는 제각각이다. 따라서 위와 같이 표현되기 일쑤인데 이는 개인적으로 일관성을 헤치고 심미성을 저해시킨다고 생각한다. Color scripter는 HTML 코드를 제공하므로 이에 대한 CSS 구문을 추가하면 다른 코드블럭처럼 포스트 화면의 최대 길이로 일관되게 설정할..

지난 번에 썼던 하이라이트 적용에 이어 코드 블럭 Line number 적용하는 방법을 소개한다. Highlight 스타일 적용하는 방법은 아래 글을 참고바란다. 2020/04/24 - [정보] - 티스토리 코드블럭 하이라이트(Highlight.js) 스타일 및 Line number 적용하기 (1) 하이라이트 스타일 적용 티스토리 코드블럭 하이라이트(Highlight.js) 스타일 및 Line number 적용하기 (1) 하이라이트 스타일 적용 티스토리에는 프로그래밍 코드를 삽입하기 위한 코드블럭이라는 도구가 있다. 다만, 기본적으로 제공하는 코드블럭의 경우 아래와 같이 겉보기에 굉장히 밋밋하다. 코드블럭에 스타일을 적용하는 방법과 Line num.. purplechip.tistory.com Line n..

티스토리에는 프로그래밍 코드를 삽입하기 위한 코드블럭이라는 도구가 있다. 다만, 기본적으로 제공하는 코드블럭의 경우 아래와 같이 겉보기에 굉장히 밋밋하다. 코드블럭에 스타일을 적용하는 방법과 Line number를 추가하는 방법을 소개하는 블로그 글들이 많은데, HTML, CSS를 하나도 모르는 나에겐 조금 헷갈리는 작업이었다. 따라서 이 글에서 조금 더 쉽게 설명하고자 한다. 하이라이트 스타일 적용하기 하이라이트 스타일을 적용하는 방법은 두 가지가 있다. 1. 티스토리 제공 플러그인 사용 2. Highlight.js 사용 (HTML 수정) 1.의 경우 굉장히 간단하지만, 스타일이 몇가지 없고 2.의 경우 아주 살짝 귀찮은 작업이 수반되지만, 스타일 개수가 많다. 하나씩 보도록 하자. 1. 티스토리 제공..