본문 바로가기

웹 코딩/티스토리27

북클럽 스킨 - 댓글 버그 수정 그간 잘 안써봐서 몰랐는데... 현재 사용중인 북클럽 스킨에서 댓글을 수정/삭제할 때 약간 이상하게 작동하는 것 같은 느낌적인 느낌을 우연히 받아 좀 살펴보았더니 역시 문제가 있네요?! (저만 그런거 아니죠? 제발...) 아무래도 스킨 제작자의 실수라고 보여 집니다만, 그래도 기본 스킨 중 하나인데 좀 꼼꼼히해서 내놓으시지.. 아쉽네요. (설마 Book club 이 혹시 '부끄럽' 웠던건가...ㅡㅡ;) 문제점 댓글을 수정하면 새로 등록되는 것처럼 추가되고 기존 댓글이 화면에 남아 있음 댓글을 삭제해도 페이지를 새로고침하기 전까진 화면에 남아 있음 추가/삭제/수정의 결과가 사이드바의 '최근댓글'에 반영되지 않음 글에 첫 댓글 등록 시 삭제/수정 버튼을 보여지게 하는 '더보기' 버튼이 먹통임 방명록도 사실은.. 2020. 9. 4.
퀵점프 - 본문용 책갈피? 목차? 바로가기? 저와는 달리 글의 내용이 충실한 열정 블로거들을 위한 툴!? ㅋ 본문 내용 중 제목 문단1~3 (h1, h2, h3, h4) 을 썼거나 굵게 태그로 표시한 내용이 있다면 뽑아서 바로 가기를 제공합니다. 글의 키워드 목록이라고나 할까요? 우선, wbluke 님의 ToC (table of contents) 목차 기능을 보고 영감을 받아 만들어 보았습니다. 계층적이고 디테일한 목차가 필요하신 분은 고고! 대신 저는 개인적으로 제목 문단을 잘 사용하지 않고, 글의 구성이 단층적이며, 흐름에 끊김이 없이 쓰면서 구간별 구분을 명확히 하는 그런 스타일이 아니라고 판단해 목차보다는 단순히 키워드 추출의 느낌으로 글 내용중 중요시 되어야 하는 부분으로 바로 이동하는 것을 주목적으로 구성했습니다. 설치법 1. 스킨 편집.. 2020. 9. 2.
코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전) 재미삼아 추가하다보니 기능이 덕지덕지!! ㅋ 단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요. 아마도 이게 마지막이지 싶으나... (뭐 사실 아직 찾는 사람도 쓰는 사람도 없는 것 같아 부담은 없습니다만. ㅋ) 암튼, 제가 사용하고 있는 그대로 공유하는게 맞다 싶어 풀버전 올립니다. 기능 목록 줄 번호 표시 줄 시작번호 지정 가능 줄 강조 가능 ([3,5,7-10]과 같은 배열로 표시, 7-10같이 범위도 지정 가능) 자동 줄바꿈 (pre-wrap) 적용 시 바뀐줄에도 들여쓰기 (indent) 유지 코드상 색상값(예: #FFFFFF, black, rgb(125,125,125) 등)에 어떤 색인지 보여주는 컬러박스 추가 괄호({},[],()) 및 태그 (예.. 2020. 8. 31.
코드블럭 - 줄번호 표시 (라이트 버전) 난 다 필요없고 단순히 줄번호만 표시되면 좋겠다!! 하시는 분들을 위해 준비했습니다. 설치법은 풀버전과 동일합니다. 그저 소스가 매우 짧을 뿐 풀버전과의 기능적 차이는, 줄번호 감추기 불가 줄강조 불가 시작번호 지정 불가 긴 코드가 줄바꿈되었을 시, 들여쓰기(indent)가 유지되지 않음 선별적 적용 안됨 더 많은 기능은 아래 글 참고 2020/08/25 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 (풀버전) 2020. 8. 25.
코드블럭 - 줄번호 표시하기 (미들 버전) 최신버전 업데이트는 alikong.tistory.com/46 으로!! 코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전) 재미삼아 추가하다보니 기능이 덕지덕지!! ㅋ 단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요. 아마도 이게 마지막이지 싶으나... (뭐 � alikong.tistory.com 가급적 최신 버전을 이용해 주세요. 위 글 클릭!! 이하 미들 버전 // 코드블럭 관련 시리즈(?) 1탄 - (뭐..걍.. 내가 필요해서 건드린 부분들? ㅋ) 위에 보이는 코드블럭 삽입하기를 이용해 입력된 소스에 아래와 같이 줄번호를 자동으로 추가해 줍니다. 혹시(아마 대부분일듯) 코드 문법 강조 플러그인을 같이 사용하고 있다면 현 테마에 맞춰 줄번호 스타일도 맞.. 2020. 8. 25.
코드블럭 + SyntaxHighlighter 코드블럭 - SyntaxHighlighter 버리고 highlight.js 로 갈아타기 혹여 SyntaxHighligher (이하 SH) 가 적용되게 써둔 글이 많아서 higlight.js (이하 hljs) 를 쓰고 싶어도 못쓰는 분들이 계실까 싶어 올립니다. [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래.. alikong.tistory.com 위 글을 본 후에도 굳이 굳이 계속 계속 SyntaxHighlighter 를 쓰시겠다면.... 입력하는 방법이라도 편해질 수 있도록 새 에디터의 코드블럭 삽입 기능을 이용할 수 있게 해주는 소스입니다. [스킨 편집] > [html 편집] > [HTML] 내용중 기존 SyntaxHighlighter.all(); 가 실행되기 전 위치.. 2020. 8. 21.
코드블럭 - SyntaxHighlighter 버리고 highlight.js 로 갈아타기 혹여 SyntaxHighligher (이하 SH) 가 적용되게 써둔 글이 많아서 '코드 문법 강조' 플러그인 (=highlight.js (이하 hljs)) 를 쓰고 싶어도 못쓰는 분들이 계실까 싶어 올립니다. [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래 소스를 넣어 주세요. (제이쿼리는 추가되어 있을 것으로 간주하겠습니다. 아니면 댓글로 알려 주세요.) $("pre").each(function(i, pre) { if (!$(pre).find('code').length) { if (pre.className) { var c = pre.className.replace(/\s/g, ''); var nc = {}; var items = c.split(";"); $.each(it.. 2020. 8. 20.
코드블럭 - 접기/펼치기 (+언어명 표시 & 자동 줄바꿈 적용/해제) 흠.. 쓸수록 코드블럭에 자꾸 관심이 가네여...왜지...(?) 코드블럭 공지에 올라온 댓글을 보고 오호 있으면 좋겠는데!? .. 해서 만들어 보았습니다. 뭔가 버튼이 노출되어야 하는김에 코드의 언어 명을 표시했고, 보너스로 줄바꿈 적용/해제 체크박스도 넣었습니다. 예시는 대략 이렇습니다. var wrapper = (code.parentNode.tagName == "PRE")? code.parentNode : code; if (!wrapper.dataset.noindent) { //long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. .. 2020. 8. 19.
코드블럭 - 코드 자동 정렬 추가 (+ 탭간격 조정) 코드블럭 3탄!? ㅋ 색상을 입히는 문법강조와는 별개로 코드블럭으로 입력한 소스의 줄맞춤(들여쓰기?)을 예쁘게 정렬해줍니다. 이용된 auto indent 라이브러리는 매우 가볍고 다른 알려진 넘들처럼 지멋대로 줄바꿈을 추가하는 등의 오버는 떨지하지 않고 오롯이 들여쓰기 부분만 잘 만져 줍니다. (출처: https://github.com/zebzhao/indent.js) 거기에 탭크기 설정을 지원하기 때문에 간혹 너무 크다고 느껴졌던 기존의 탭크기를 줄이는 용도로 쓸 수도 있겠습니다. 이미 문법 강조 플러그인을 사용하고 있어도 잘 작동합니다. (highlight.js 를 직접 추가한 케이스라면 하이라이트 적용 전에만 실행시켜 주면 됩니다.) 준비물: 아래 js 파일 다운로드 받아서 스킨에 업로드 해주세요... 2020. 8. 19.
highlight.js (문법강조) 적용하기 및 설정 코드블럭으로 입력한 소스를 알록달록 예쁘고 보기 쉽게 만들어 주는데는 여러 방법이 있는데... 그중 티스토리와 가장 찰떡궁합인 highlight.js 를 적용하는 방법을 알아보자! (줄번호 추가는 2020/08/16 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 참고) 방법1: '코드 문법 강조' 플러그인 사용 이건 뭐 딱히 설명이 필요 없을듯.. 가장 심플한 방법이라 (아마 다들 알아서 쓰고 계실듯..) 편리함이 장점이라면, 단점으로는 사용가능한 테마가 제한적이고 버전 업데이트가 안되고 탭간격 같은 옵션 적용불가 방법2: '코드 문법 강조' 플러그인 사용을 해제하고 직접 highlight.js 를 스킨에 추가하기 [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래.. 2020. 8. 17.
본문의 모든 링크는 새창으로! 난 내 블로그의 본문안에 있는 링크들은 모두 새창으로 열리는 걸 선호함 그런데 종종 무심코 글을 쓰고나면 링크에 타겟 지정하는 것을 까먹을 때가 있음 (특히 [이전 글 넣기] 플러그인 링크나 복/붙한 링크의 경우...) 암튼, 그것 때문에 다시 수정하기는 귀찮고. 그냥 스킨에 스크립트 한줄 추가해서 해결함 적용방법: [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래 소스를 넣고 [적용]하면 끝 var anchors = document.querySelectorAll('.entry-content p a, .entry-content l a, .entry-content blockquote a, .entry-content div a'); for(var i=0; i < anchors... 2020. 8. 16.