-
티스토리 highlight JS 코드 복사 플러그인컴퓨터/HTML & JS & TS 2020. 7. 23. 14:48728x90반응형
highlight JS Badge
https://github.com/RickStrahl/highlightjs-badge
RickStrahl/highlightjs-badge
Addon component to highlightjs that lets you copy code snippets to the clipboard and displays the active syntax - RickStrahl/highlightjs-badge
github.com
소개 : @RcikStrahl라는 분의 highlight JS badge를 티스토리에 적용하는 방법을 소개하겠습니다.
우선 아래 처럼, 코드 우측 상단에 배지가 생기고, 클릭하면 코드가 복사되는 플러그인입니다.
<pre> 클래스 안에 codebadge를 추가하고, clickevent를 추가하고, 누르면 복사하는 방식
우측 상단에 언어와 복사 버튼이 생긴다. 1. 사전 준비
우선 티스토리 플러그인 중, 저작권자 표시를 해제해야만 사용할 수 있다.
코드 복사 시, 블로그 URL 옵션을 넣을 수 있게 수정했으니, 코드를 복사하면 출처 표시가 나온다.
font-awesome과 highlightJS가 필요하다.
2. HTML 수정
2차 수정 사항 : blogURL option, icon change, 티스토리 codeblock에 맞게 수정, 버그 수정
위 파일을 업로드하고, 아래처럼 수정한다.
blogURL은 자신의 링크를 넣는다.
<body> .... <!--HightlightJS --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script> <script src="./images/highlight.badge.js"></script> <script> setTimeout(function () { var pres = document.querySelectorAll("pre>code"); for (var i = 0; i < pres.length; i++) { hljs.highlightBlock(pres[i]); } var options = { loadDelay: 0, copyIconClass: "far fa-clipboard", checkIconClass: "fa fa-check text-success", blogURL: "https://choiseokwon.tistory.com/" }; window.highlightJsBadge(options); },10); </script> .... </body>3. 결과
blogURL을 지정했을 시, 붙혀넣을 때 출처 표시가 아래처럼 생기게 수정했다.
... 코드...
[ 출처: https://choiseokwon.tistory.com/ ]
<script> AOS.init(); $("img[src*='cfile'][src^='http']").attr("data-aos", "애니메이션이름"); // 글에 있는 사진만 애니메이션 추가 </script>class Node: def __init__(self, parent=None, position=None): self.parent = parent # 이전 노드 self.position = position # 현재 위치 self.f = 0 self.g = 0 self.h = 0func main() { ch := make(chan int) ch <- 1.0e10 // magic number x, ok := <- ch ok = true defer fmt.Println(`exiting now`) go println(len("hello world!")) return }728x90'컴퓨터 > HTML & JS & TS' 카테고리의 다른 글
JS Lodash 튜토리얼 (0) 2020.08.15 티스토리 Fira Code 폰트 적용하기 (0) 2020.05.11 Electron 시작 설정 및 패키징 튜토리얼 (0) 2018.05.25