티스토리 블로그 소스코드 넣기 - hightlight.js 사용법
소프트웨어/티스토리

티스토리 블로그 소스코드 넣기 - hightlight.js 사용법

반응형

썸네일
썸네일

티스토리 블로그에 소스코드 넣기 - hightlight.js 사용법

저는 프로그래밍 강좌나, 라즈베리파이 관련된 글을 올릴 때 자주 글에 프로그래밍 관련 소스코드나, 명령어를 넣곤 합니다. 기존 티스토리의 '코드 문법 강조'라는 플러그인을 통해서도 글에 소스코드를 넣고 꾸밀 수 있는데, '코드 문법 강조' 플러그인은 지원하는 테마와, 언어의 수가 적어 쓰는데 불편함이 있을 때가 종종 있습니다.

그래서 오늘은 많은 분들이 자주 사용하고 총 185개의 언어와, 91개의 테마를 지원하는 hightlight.js를 티스토리 블로그에 적용하는 방법을 알려드리도록 하겠습니다.

hightlight.js 적용하기

Getting hightlight.js
Getting hightlight.js

Getting hightlight.js 페이지 : https://highlightjs.org/download/

 

Getting highlight.js

Hosted A prebuilt version of highlight.js with 34 commonly used languages is hosted by following CDNs: cdnjs jsdelivr You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlight.js

highlightjs.org

우선 hightlight.js를 티스토리 블로그에 적용시켜주기 위해서, 위 링크를 통해서 hightlight.js의 Getting hightlight.js 페이지로 이동해주세요. Getting hightlight.js 페이지로 이동하셨다면, cdnjs 또는 jsdelivr을 선택하셔서, 안의 코드를 복사해주면 됩니다.

html 편집

안의 코드를 복사하셨다면, 이제 티스토리에 적용하기 위해서 티스토리 블로그 관리 페이지로 이동한 뒤, 스킨 편집 버튼을 클릭한 다음 html 편집 버튼을 클릭해주세요.

hightlight.js 적용
hightlight.js 적용

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

html 편집 버튼을 클릭하셨다면, head태그에 아까 복사하신 코드를 붙여넣기 하신 뒤 그 아래에다가 윗 코드를 붙여넣으면 됩니다.

테마 설정, 언어 추가하기

hightlight.js demo
hightlight.js demo

hightlight.js demo 페이지 : https://highlightjs.org/static/demo/

 

highlight.js demo

 

highlightjs.org

우선 위 hightlight.js demo 페이지에 접속하시면, hightlight.js에서 지원하는 언어들과, 테마들을 미리 볼 수 있습니다.

hightlight.js 언어 추가
hightlight.js 언어 추가

cdnjs : https://cdnjs.com/libraries/highlight.js
jsdelivr :  https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/

위 링크를 통해 cdnjs 페이지나, jsdelivr 페이지에 접속하면, 위의 사진과 같은 페이지가 나타납니다. hightlight.js에서 기본적으로 지원하지 않는 언어(기본적으로 지원하는 언어는 Getting hightlight.js 페이지의 common탭에서 볼 수 있음)를 추가할려면 우선 위 페이지에서 추가할 언어를 검색한 후 링크를 복사해주세요.

hightlight.js 언어 추가
hightlight.js 언어 추가

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

링크를 복사하신 다음, 다시 티스토리 블로그 관리 페이지로 가주세요. 그런 다음 html편집을 클릭하고 위 코드 위에 아랫 코드를 붙여넣기 하시면 됩니다.

<script charset="UTF-8" src="복사한 링크"></script>

hightlight.js 테마 수정
hightlight.js 테마 수정

cdnjs : https://cdnjs.com/libraries/highlight.js
jsdelivr :  https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/

그 다음, 마찬가지로 hightlight의 테마를 바꿀려면 위 페이지에 접속하신 후 적용하고자 하는 테마를 검색하고 링크를 복사하면 됩니다.

hightlight.js 테마 수정
hightlight.js 테마 수정

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">

테마 링크를 복사하셨다면, hightlight.js를 적용할 때 붙여넣은 코드 중 위와 같이 되어 있는 코드에서 href=""의 "" 사이에 복사한 링크를 붙여넣기 하면 됩니다.

hightlight.js 사용법

hightlight.js 사용
hightlight.js 사용

이제 hightlight.js를 적용하고, 언어를 추가하거나, 테마를 수정하는것 까지 알아봤으니 hightlight.js를 사용하는 방법에 대해 알아보겠습니다. hightlight.js를 사용하시려면, 글 쓰기에서 ··· 버튼을 클릭하고, 코드블럭 버튼을 클릭해 주시면 됩니다.

소스코드 붙여넣기
소스코드 붙여넣기

그러면 이런 코드블럭 삽입 창이 나오는데, 여기에 소스코드를 붙여넣으시면 됩니다.

HTML 클릭
HTML 클릭

소스코드를 붙여넣은 뒤엔 상단의 기본모드를 클릭한 후 HTML을 클릭해주시면 됩니다.

class="언어" 삽입

그러면 이런 화면으로 바뀝니다. 여기서 pre 태그안에 있는 것들을 지워주고, code 태그에 class="언어"를 삽입해주면 됩니다.

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
        primaryColor: Colors.black,
        accentColor: const Color.fromARGB(255, 255, 111, 97),
        iconTheme: const IconThemeData(color: Colors.black)),
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
    ],
    supportedLocales: [
      const Locale('ko', 'KO'),
    ],
    home: HomePage(),
  ));
}

안드로이드 스튜디오 테마를 적용하고, dart 언어를 작성한 모습입니다. 잘 적용된 것을 확인할 수 있습니다.

반응형