highlight.js 사용법. hljs 를 활용한 코드 강조하기 (하이라이트)

highlight의 목적은 상기 자료와 같이 개발 코드를 꾸밀 수 있도록 지원하는 API입니다. 오늘은 highlight.js 사용법에 대해 안내해드리겠습니다~ 개발 블로그를 하는 경우, 특히 유용한 기능이니 참고해 주세요.

highlight.js 는 어떻게 사용하는가?

하이라이트를 이용한 개발자 블로그 코드 꾸미기 공식 홈페이지는 다음과 같습니다.
highlightjs.org
이제부터 구글 블로그(블로거, 블로그스팟)에 적용하는 방법을 알려드릴게요.

블로그에 highlight 적용하기

테마에 들어가서 HTML 편집을 진행합니다. 이 예제에서는 CDN 방식으로 진행하겠습니다. 여러분도 CDN 방식으로 진행하시려면 다음와 같이 코드를 입력해 주세요. 아래의 버전은 10.4.0 이라고 적혀있는데요, 필요에 맞추어 버전을 올려서 사용하세요.

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/androidstudio.min.css' rel='stylesheet'/>

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

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

C# 으로 예제를 생성해 보도록 하겠습니다.

<pre><code class="cs"> 코드 </code></pre> 를 해주면 됩니다.

상세한 기능은 API 를 참고해 주세요. API에 관한 상세는 공식 홈페이지에 있으며 아래의 주소를 따라가면 됩니다. (인터넷에 하이라이트를 검색하세요)

https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html

아래와 같이 꾸밀 수 있습니다.😘

double SumNumbers(List setsOfNumbers, int indexOfSetToSum)
{
    return setsOfNumbers?[indexOfSetToSum]?.Sum() ?? double.NaN;
}

var sum = SumNumbers(null, 0);
Console.WriteLine(sum);  // output: NaN

highlight.js(hljs) 를 활용한 코드 강조(하이라이트)

복습해 봅시다~ 하이라이트(https://highlightjs.org/) 를 이용한 코드 강조 입니다. Get Version 과 Usage를 눌러보면 아래와 같은 설명이 나올 것입니다.

하이라이트 버전 정보 확인하기

사용 방법 알아보기

'Get Version' 이나 'Usage' 를 눌러보면 어떻게 사용하는지 확인할 수 있습니다. (굳이 안 읽으셔도 됩니다. 아래에 설명을 추가해 놓았습니다.)

하이라이트를 블로그에 적용하기 위한 방법입니다. 블로그 설정에서 '테마' 로 이동하여 'HTML 편집' 을 선택합니다.

찾기 쉽게 HEAD 가 종료되기 직전에 설정하였습니다. 여러분은 원하는 위치에 설정하세요. </head> 바로 위에 아래와 같은 코드를 설정합니다.

link 부분은 색상 설정 > 중간에 androidstudio 로 바꿨습니다. 기본은 default 로 되어 있습니다. (바꾸고 싶으신 분들 위해 아래에 추가 설명합니다.)
script > src 는 cdnjs 방식을 활용하여 해당 코드를 불러온다는 뜻입니다. 현재 10.4.0 버전이군요.
script 는 초기화 시 실행하도록 설정합니다. (이 설정은 개인마다 다를 수 있습니다. 굳이 그대로 하실 필요는 없습니다.)