테스트 사이트 - 개발 중인 베타 버전입니다

syntax highlighter로 Prism JS가 무난한 것 같습니다.

· 5년 전 · 2203 · 2
prism-20200722-wide-tiny.png

1. Highlight JS

 

Highlight JS 정말 좋습니다.

 

(https://highlightjs.org/) 이하 hljs

 

hljs의 장점은 code 언어를 알아서 찾아서 적용해준다는 것입니다.

 

CDN도 제공해줘서 서버에 무리를 주지도 않구요.

 

다만 코드 Copy 버튼과 라인의 숫자를 표시해주려면 써드파티 플러그인을 써야되는 단점이 있습니다.
 

편한 부분은 편하고, 불편한 부분은 불편하다고 생각합니다.

 

플러그인 필요없이 단순히 표현하는 부분에서는 굉장히 좋다고 생각합니다.

 

다만 아미나 나리야에서는 첫줄이 빈칸으로 표시되는데, 제 실력 부족으로 해결이 안되더라구요.

 

그래서 플러그인을 편하게 쓸 수 있는 PrismJS로 결정했습니다.

 

 

2. PrismJS ( https://prismjs.com/ )

 

PrismJS는 원하는 언어와 플러그인을 선택해서 다운 받을 수 있습니다.

 

지원하는 언어종류는 hljs와 큰 차이는 없는 것 같습니다.

 

특장점은 지원하는 기본 플러그인이 많은데요.

 

라인 숫자 표시기능, 첫줄 없애고 공백 부분 깔끔하게 지워주기, {} () 매칭 시켜주기, 

 

라인 하이라이트 기능, 코드 복사 버튼 기능 등등

 

기본적으로 제공하는 플러그인이 많아 그냥 체크만 한 뒤 코드 입력할 때 지정만 해주면 바로 사용 가능합니다.

 

코드 언어를 일일이 지정해줘야되는 단점이 있긴하지만, 그 이상으로 플러그인이 편해서 만족하고 있습니다.

 

그리고 Okaidia 테마도 제 마음에 들구요. ㅎ ㅎhljs에는 마음에 드는 테마가 없더라구요.

 

아무튼 어제 다시 정리해서 글을 올려보았습니다.

 

 

3. 아미나 나리야에 적용하는 방법

 

https://blog.wsgvet.com/prismjs-syntax-highlighter-gnuboard-amina-nariya

 

4. 제 홈페이지에 적용한 테마 및 플러그인 소개

 

https://www.wsgvet.com/bbs/board.php?bo_table=home&wr_id=636

 

감사합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

항상 도전하시고 열정적인 모습이
아름답습니다.
@선구자 많이 허접해서 부끄럽습니다.

게시글 목록

번호 제목
1717629
1717626
1717625
1717621
1717619
1717611
1717610
1717609
1717607
1717601
1717598
1717591
1717590
1717583
1717575
1717572
1717568
1717566
1717549
1717545
1717533
1717512
1717511
1717508
1717495
1717479
1717473
1717470
1717463
1717452