wulfsek: 2024

https://www.jsdelivr.com/?query=hilightjs

접속해서 hilight js의 설치 위치를 확인한다.

이 포스팅에서는 4개의 기능을 설치 예정이다.

코드블럭, 다크테마, 코드라인, 복사

이 모든 작업은 blogger설정의 theme -> my theme -> edit HTML 에서 이루어진다.

각 블로거나 블로그들에 js를 import 할 수 있다면 사용할 수 있다고 생각한다. 알아서 잘해봐라

1. hilight.js 설치.

ref : https://highlightjs.org/

https://www.jsdelivr.com/package/npm/highlight.js

제시되는 파일은 2개이다.


<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/lib/index.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/styles/night-owl.min.css" rel="stylesheet"></link>

그리고 실행코드

<script>hljs.highlightAll();</script>

<head></head> 사이에 코드들을 넣어주면 작동한다.

2. 다크테마

자신이 원하는 테마를 설치하자.

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css' rel='stylesheet'/>

1번의 기본으로 제공되는

을 대체한다.

3. 라인넘버

<script src='https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'/>

실행코드 부분에 추가해준다.

hljs.initHighlightingOnLoad();

hljs.initLineNumbersOnLoad();

4. 복사버튼

https://www.jsdelivr.com/package/npm/highlightjs-copy

<script src='https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.5/dist/highlightjs-copy.min.js'/>

<link href='https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.5/dist/highlightjs-copy.min.css' rel='stylesheet'/>

실행코드에 추가해준다.

hljs.addPlugin(new CopyButtonPlugin());


<script>

  hljs.highlightAll();

  hljs.initHighlightingOnLoad();

  hljs.initLineNumbersOnLoad();

  hljs.addPlugin(new CopyButtonPlugin());

</script>

완성되는 코드는 다음과 같다.



<!--<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/default.min.css' rel='stylesheet'/>-->



<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css' rel='stylesheet'/>



<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js'/>

<script src='https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'/>

    

<script src='https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.5/dist/highlightjs-copy.min.js'/>

<link href='https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.5/dist/highlightjs-copy.min.css' rel='stylesheet'/>

    



<script>

  hljs.highlightAll();

  hljs.initHighlightingOnLoad();

  hljs.initLineNumbersOnLoad();

  hljs.addPlugin(new CopyButtonPlugin());

</script>

<pre><code>코드 영역</code></pre> 사이에 넣어주자.

wulfsek

2024년 7월 23일 화요일

블로거 코드 블럭 만들기