Clipboard.js를 활용하여 코드 블럭에 복사하기 버튼을 추가하고자 한다 사이트 설정 티스토리 설정에서 꾸미기 > 스킨 편집을 클릭한다 html 편집 버튼을 클릭해서, html 편집 화면으로 진입한다 HTML 메뉴에서 앞에 Clipbaord.js CDN 스크립트를 추가한다 앞에 다음의 코드를 추가한다 CSS 메뉴에서 다음의 코드를 추가한다 pre {text-align: start; position: relative; overflow: visible; } pre .copy-button { opacity: 0; position: absolute; right: 2px; top: 4px; padding: 2px 6px; color: #aaa; background: rgba(0,0,0,.6); border-..
코드의 가독성을 높이기 위해, highlight.js를 이용하여 코드 강조 및 라인 수 활성화 기능을 설정한다 기본 플러그인 비활성화 티스토리 사이트 설정의 플러그인에서 코드 문법 강조를 비활성화한다 (스타일 충돌 방지) highlight 데모 살펴보기 아래의 링크로 접속한 뒤, 맘에 드는 컬러 테마를 선택한다. highlight.js demo highlightjs.org 폰트 정하기 아래의 링크로 접속한 뒤, 코드 스타일에 적용할 폰트를 탐색해본다 (Ubuntu mono, IBM Plex Mono, Nanum Gothic Coding 추천) Google Fonts Making the web more beautiful, fast, and open through great typography fonts.g..
JQuery TOC JS 다운로드 다음의 링크에서 Download 버튼을 클릭해서 파일을 다운받는다 Table of Contents jQuery Plugin — jquery.toc Table of Contents jQuery Plugin A minimal, tiny jQuery plugin that will generate a table of contents, using semantic, nested lists with hash-link anchors to headings. Download Version 0.4.0 · GitHub Project Live Example Table of contents, auto-generated f ndabas.github.io HTML 설정 티스토리 설정에서 꾸미기 > ..
