개발 일지

글에 내용을 한눈에 볼 수 있는 목차가 우측에 있었으면 해서 알아보던 중에 괜찮은 라이브러리가 있어서 오늘은 티스토리에 자동으로 목차를 띄우게 해 보려고 합니다. + 티스트리를 커스텀하기 위해서는  HTML 코드와 CSS 코드를 수정해야 합니다. 코드를 수정하는 방법은 `블로그 관리 > 스킨 편집 > html 편집`으로 들어가면 됩니다 0. 사용할 라이브러리https://github.com/tscanlin/tocbothttps://tscanlin.github.io/tocbot/ TocbotTocbot builds a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or lo..

티스토리의 디자인을 하나씩 바꾸는 것에 재미가 들어서 여러 부분을 자잘하게 수정했었는데, CSS나 HTML의 어디를 잘못 건드렸는지 홈 화면의 블로그 스킨이 깨져서 결국 스킨을 초기화를 하였습니다... 그러고 나서 다시 세팅을 하려고 했는데 어떤 것을 어떻게 수정했는지 기록해 놓지 않아 다시 적용하는 데 많은 시간이 소요되었습니다. 앞으로는 스킨을 수정하면서 변경 사항을 여기에 정리해 두려고 합니다.   들어가기 전에한번 날리면서 깨달은 팁은 스타일을 적용시킬 범위를 잘 선정해야 한다는 것이다.스타일을 바꾸고 싶은 범위를 확실하게 선정해서 범위를 최소한으로 하자 Ex) h2 태그를 변경하고 싶을 경우 잘못된 예h2 { font-size: 40px;}범위가 너무 넓기 때문에 본문밖에 요소들까지 변경되어 깨..

이전 글에서 티스토리의 인라인코드를 기본 모드에서도 쉽게 사용할 수 있도록 바꾸었습니다. 하지만 인라인 코드 자체가 노션에 비해 너무 밋밋한 느낌이 있어서 이번 글에서는 인라인 코드의 스타일을 커스텀하여 노션의 인라인 코드와 비슷한 느낌으로 바꿔보겠습니다. 적용하기이번에도 방법은 아주 간단합니다. 인라인 코드는 태그를 사용하기 때문에 태그에 대한 CSS값을 설정해 주면 됩니다! 블로그 관리> 스킨 편집에 들어가서 html편집으로 들어갑니다.  CSS 설정을 추가할 것이기 때문에 CSS창으로 가서 Ctrl + F를 이용해 code 태그를 찾아줍니다.  저는 code태그가 다른 태그들과 함께 있는데 code에 스타일만 바꿔줄 것이기 때문에 여기에서 code를 지우고 아래와 같이 밑에다가 새로 정의해 줍니..

기본적으로 티스토리에서 인라인 코드를 사용하는 방법은 두 가지입니다마크다운 모드에서 백틱(`)으로 감싸기HTML 모드에서 로 감싸기이 둘 다 모드를 바꾼 뒤에 수정해야 하는 불편함이 있습니다. 좀 더 쉽게 사용할 수 있는 방법이 있을까 해서 찾아보다가 모드의 변환 없이 기본모드에서도 백틱(')을 활용한 인라인 코드를 사용하는 방법이 있어서 정리해 보도록 하겠습니다. 적용하기방법은 아주 간단합니다 블로그 관리> 스킨 편집에 들어가서 HTML 편집으로 들어간 후 아래 자바스크립트 코드를 복사하여    태그를 찾고(Ctrl + F)  바로 위에 복사한 코드를 붙여 넣어준 후 저장해 주면 끝입니다.  여기까지 완료하고 저장하면 인라인 코드를 기본모드에서도 `백틱`을 사용해서 적용할 수 있습니다!코드 내용 자세히..

글을 작성하다 보니 코드블럭을 dark로 설정하고 싶어서 알아봤는데 테마 종류가 엄청 다양했다. 테마를 바꾸고 싶을때 내가 볼려고 작성한 글이다. 코드블럭 테마들은 여기에서 확인 할 수 있다. https://highlightjs.org/static/demo/ highlight.js demo highlightjs.org 테마를 티스토리에 적용하는 방법은 티스토리 설정 > 스킨 편집 > html 편집으로 들어가서 html 태그 사이에 아래 코드를 넣으면 된다. [원하는 테마 이름]에는 위에 highlightjs 사이트에서 원하는 테마를 찾아 넣어주면 된다. (아래 주의할 점 확인하기) 주의 할 점 테마이름은 모두 소문자, 띄어쓰기는 - 로대체하여 넣어줘야 한다 티스토리 설정 > 플러그인 창에서 아래와 같이 ..