본문 바로가기

코드블럭8

코드블럭 - 줄번호 & 추가 기능 (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.