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

highlight.js 사용법

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

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

How to use 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>
구글 블로그 글쓰기 HTML

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

사용 방법 알아보기

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

HTML 편집

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

하이라이트 설정

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

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

테마(themes) 설정은 하이라이트 홈페이지 아래에서 선택해보고 진행하면 됩니다~ 저는 안드로이드스튜디오 색상이 마음에 들어서 해당 테마로 선택하여 진행하겠습니다.

하이라이트 API

API 도 제공하고 있습니다. CSS classes reference > Stylable classes > Language names and aliases > SUPPORTED_LANGUAGES.md 로 이동하여 자신이 사용하는 언어를 확인할 수 있습니다.

코드를 작성하는 부분을 HTML 로 변경하고 <pre><code class="개발언어클래스">코드</code></pre> 와 같이 해주면 됩니다.

댓글

댓글 쓰기