highlight.js수정하기 2

[Blog] highlight.js 소스 복사 기능 추가(복사 버튼 추가)

highlight.js에 적힌 소스코드를 클릭 한번에 복사해보자.필자가 이전 Syntax Highlight에서 제일 애용했던 기능은 더블클릭시 소스 전체 선택이였다.필자가 올린 소스를 다시 사용하는데 복사 붙혀넣기가 안되면 그것만큼 불편한것도 없기때문이다.(몇몇 소스는 너무 길기도 해서 드래그하기도 힘들다.. ㅠㅠ)아쉽게도 highlight.js에는 그런기능이 없으니 Copy버튼을 하나 만들어서 버튼 클릭시 소스를 클립보드에 복사하도록 해보자.CSS 추가우선 아래 CSS부터 추가 해주자. /*/////////////////////////*/ /*코드 Copy 버튼*/ /*/////////////////////////*/ div.highlightTopDiv > .toolbar { /*위치 고정..

Blog 2025.01.10

[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

highlight.js에 적힌 소스코드가 어떤 언어인지 제목 라벨에 표시해주자.현재 필자의 블로그를 보면 소스강조구문(highlight.js)위에 해당 소스코드가 어떤 언어인지 표시가 되어있다.필자와 같이 해당 기능을 추가해도록 해보자.CSS 추가우선 아래 CSS부터 추가 해주자..highlightTopDiv { /*텍스트 관련*/ font-size: 16px; font-weight: bold; text-transform: uppercase; /*대문자로 표시해주기*/ /*색상 관련 - 각자 자기가 결정한 스킨에서 색을 추출하길 추천함*/ color: #FFB871; background-color: #222222; /*그림자 효과 관련*/ margi..

Blog 2025.01.09