[티스토리]/블로그 꾸미기 팁4 블로그 인라인 코드 Notion처럼 만들기 2018.06.27 - [[티스토리]/블로그 꾸미기 팁] - highlight.js 사용하기 highlight.js 사용하기 개요 코드 에디터 테마는 개발자의 아이덴티티이다. 내 블로그의 독립성과 주체성을 나타내기 위해 highlighter는 꼭 필요하다. 1. highlight.js 그냥 이걸 쓰면 된다. 간편성부터 테마 개수까지 넘사이 haawron.tistory.com 개요 이전 글에서 `highlight.js` 세팅하는 법을 알아봤다. 하지만 얘는 코드 블럭만 칠해주고 인라인 코드는 신경을 안 쓴다. 따라서 `` 태그 없이 ``로 감싸져 있는 부분을 따로 칠해줘야 한다. `highlight.js`가 사용하는 class 이름(`hljs`)을 붙여도 되긴 하지만 얘는 폰트 등 스타일 일부를 ``에 넣.. 2024. 1. 26. 티스토리 홈 버튼 메뉴바 만들기 티스토리 기본 스킨 중에는 홈 버튼 메뉴바가 있는 것이 많지가 않습니다. 홈 버튼을 위해서 디자인을 포기하는 분도 계시다고 합니다. 하지만 메뉴바를 간단하게 만들어주는 사이트를 찾았습니다. http://www.dynamicdrive.com/ 여기에 들어가서 저기로 들어가면 됩니다. 지금 제 블로그에 적용된 건 http://www.dynamicdrive.com/style/csslibrary/item/css_animated_underline_menu/ 이거입니다. 들어가서 css의 필요한 부분(모르면 전부 복사)과 html 전부 복사해서 넣고 싶은 곳에 붙여넣어줍니다. 현재 제 스킨에서는 최상단에 붙여넣으면 카테고리 이름과 겹치기 때문에 Home About 여기에 붙여 넣었습니다. html 122번 줄에 있.. 2018. 6. 27. highlight.js 사용하기 개요 코드 에디터 테마는 개발자의 아이덴티티이다. 내 블로그의 독립성과 주체성을 나타내기 위해 highlighter는 꼭 필요하다. 1. highlight.js 그냥 이걸 쓰면 된다. 간편성부터 테마 개수까지 넘사이다. 아래 단 세 줄을 추가해주면 된다. 위 스크립트를 직전에 추가해주기만 하면 된다. 사용은 "Hello World"와 같이 태그 안에 코드를 삽입 해주면 된다. 언어는 unknown으로 설정해놓으면 알아서 인식한다는데 인식 성능은 그렇게 좋진 않다. 어차피 티스토리에 언어 설정 기능 있으니까 크게 문제는 없다. 테마는 여기에서 테마를 고른 뒤 여기에서 테마의 파일이름을 찾아 default 자리에 넣어주기만 하면 된다. 참고로 이름 앞에 base16이 붙은 애들은 데모에서는 `base16-어.. 2018. 6. 27. 카테고리 메뉴 겹침 방지 메뉴 이름이 길어지게 되면 사진과 같이 다음 메뉴와 겹치게 됩니다. 해당 요소에 inline-block을 적용해서 해결할 수 있습니다. 2018. 6. 27. 이전 1 다음
