highlight.js 커스터마이징

highlight_kh.html

<!--
개요:
 - KH 과제게시판에 코드를 올리기 위해 커스터마이징한 highlight.js 응용 코드.

특징:
 - Consolas 폰트 사용
 - 모바일 레이아웃 지원 (margin/padding 없는 꽉찬 레이아웃 뷰, 가로스크롤, 줄번호 등)
 - 눈에 더 편하게 보일 수 있도록 일부 엘리먼트 색상 조정

사용법:
 - 게시판 글 작성 시 HTML 모드에 체크하고 아래 코드를 그대로 갖다붙여넣는다.
 - 이후, 밑에 '코드코드'라고 써진 부분에 자기가 작성한 코드를 넣으면 된다.
-->

<pre><code class="language-sql">
여기에 코드를 작성하세요.
</code></pre>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initLineNumbersOnLoad();
$(document).ready(function() { $('code.hljs').each(function(i, block) { hljs.lineNumbersBlock(block); }); });
</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/base16/dracula.min.css">
<style type='text/css'>
.hljs { padding: 3px !important; }
.sub_comView_content { padding:0; overflow-x: scroll !important; padding-right:50px; }
pre > code.hljs { width: max-content !important; padding-right:50px; }
pre > code td { font-family:"Consolas", "Courier", "Sans Mono", "monospace" !important; color:#fff0ff; padding: 2px !important; }
.hljs-ln-n { color:hsl(300, 5%, 60%); display:flex; justify-content:right; }
.hljs-ln td { text-align:left; vertical-align:text-top; }
.hljs-ln-line:last-child { padding-right: 50px !important; }
</style>


※ 상기 소스는 기본 형태가 아니고 추가로 아래와 같은 내용을 업데이트한 버전입니다.
 - 강사님의 핸드폰에서 더 잘 보이도록 Consolas 폰트 사용
 - 강사님의 핸드폰에서 더 잘 보이도록 모바일 레이아웃 지원 (margin/padding 제거한 꽉찬 레이아웃 뷰, 가로스크롤 지원, 줄번호 등)
 - 강사님의 핸드폰에서 더 잘 보이도록 일부 엘리먼트 색상 조정

2. 사용 프로그래밍 언어를 자바를 포함한 온갖 언어로 바꿀 수 있다.
위에 <code> 태그 옵션에 [language-XXX] 돼있는 부분의 XXX를 다른 내용으로 바꾸면 된다.

3. 테마도 바꿀수 있다.
<link>태그 안에 보면 [base16/dracula] 요 부분이 있을텐데 이걸 다른것으로 바꾸면 된다.
https://highlightjs.org/ 에 가보면 style: 뭐시기뭐시기 되어있는부분이 있는데
요거 누를때마다 테마 샘플을 보여주니까, 뭐가 이쁜지 구경해보고 맘에 드는 걸 써넣자.

4. 그외 추가 셋팅법은 아래 글 참고
https://boltlessengineer.tistory.com/205