블로그 코드블록 적용하기

by rocket336Healer -

블로그에 코드블록 사용하는 방법 : 코드블록 설정 가이드

블로그를 운영하시면서 종종 코드 예제를 사용할 일이 있는데요, 이럴때 코드블록을 활용하면 전문적으로 보이며, 가독성에도 매우 유리합니다. 지금부터 블로그에서 코드블록을 적용하는 방법에 대해 알아보겠습니다.

코드블록 적용하기


    코드블록의 필요성

    코드를 공유하는 블로그 포스트에서 코드의 가독성을 높이는 것은 매우 중요합니다. 코드블록을 사용하면 코드가 명확하게 구분되며, 읽는 사람이 실수를 줄일 수 있습니다. 또한, 코드 하이라이팅을 통해 다양한 프로그래밍 언어의 문법을 쉽게 이해할 수 있습니다.

    코드블록 적용을 위한 준비사항

    코드블록을 적용하려면 먼저 블로그의 HTML 편집 기능을 사용할줄 알아야 합니다. 블로그스팟을 예로 알려드리겠습니다. 블로그 스팟의 관리 페이지에서 "테마"를 선택한 후 "HTML 편집" 옵션을 클릭합니다. 지금부터는 HTML 기초 지식이 필요할 수 있으니 HTML에 대해서 미리 알아두시면 좋습니다. 아래의 이미지에 있는 이미지처럼 "HTML 편집" 옵션을 확인하실 수 있습니다. HTML편집을 선택하시면 창이 바뀌게 되고, 편집창에서 코드를 추가 및 수정하실 수 있습니다.

    HTML 편집

    코드블록 코드 삽입 방법

    HTML 코드 내에 특정 스크립트를 추가하여 코드블록을 구현할 수 있습니다. 필요한 코드를 추가한 후, 블로그의 코드블록이 올바르게 작동하는지 확인이 필요합니다. 그럼 순서대로 글을 읽으며 순서에 따라서 코드를 추가해보도록 하겠습니다.

    hightlight.js 적용하기

    코드 블록을 사용하기 위해서는 'highlight.js'를 알아두어야 합니다. 코드를 제공하는 여러 사이트가 있지만 가장많이 사용되는 사이트가 'highlight.js'입니다. 일단 'highlight.js'에(https://highlightjs.org/) 접속합니다. 라이브러리로 이동하면 수많은 스타일을 제공기때문에 원하는 스타일을 선택하여 적용 가능합니다. 제공하는 언어또한 196가지나 되기때문에 활용 폭이 넓습니다. 블로그스팟은 cdn코드를 사용하기 때문에 아래 그림처럼 사이트 하단의 cdn코드를 <head> </head>사이에 추가 합니다.

    cdn 코드

    'highlight.js'에서 제공된 코드를 그대로 사용하시면 오류가 나실겁니다. </link>코드 오류가 있어서 수정코드를 적어두었습니다. 복사하셔서 자신의 블로그에 적용해주세요. 참고로 여기서 <link> 태그 내용을 보면 "style/" 뒷부분에 obsidian.min.css 가 적용할 테마가 되는데, 테마 선택은 highlight.js 홈페이지에 들어가 원하는 테마를 선택해서 적용하면 됩니다.

    <!-- Code Block highlight.js Start -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/obsidian.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/>

<!-- and it's easy to individually load additional languages -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js'/>

<script>hljs.highlightAll();</script>
<!-- Code Block highlight.js End -->


    CSS 코드 추가하기

    코드블록창을 디자인하는 코드 입니다. 아래에 예시코드를 적어두었습니다. 저는 Obsidian style을 사용하여 코드블록을 적용하였습니다. 자신에게 맞는 스타일을 'highlight.js'에서 선택후 적용하시면 됩니다. CSS추가는 HTML편집 창에서 진행하시면 됩니다.

    /** 코드블록 스타일 **/
/**
 * Obsidian style
 * ported by Alexander Marenin (http://github.com/ioncreature)
 */

.hljs {
  cursor:text;
  color: #ffffff;
  background: #151719;
  border : 0px;
  border-radius:12px;
  margin : -24px;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-selector-id {
  color: #93c763;
}

.hljs-number {
  color: #ffcd22;
}

.hljs-attribute {
  color: #668bb0;
}

.hljs-regexp,
.hljs-link {
  color: #d39745;
}

.hljs-meta {
  color: #557182;
}

.hljs-tag,
.hljs-name,
.hljs-bullet,
.hljs-subst,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #8cbbad;
}

.hljs-string,
.hljs-symbol {
  color: #ec7600;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: #818e96;
}

.hljs-selector-class {
  color: #A082BD
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-code,
.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-section {
  color: white;
}
/** 코드블록 스타일 **/

    CSS 적용 후 세부디자인은 자신의 스타일에 맞추어 사용하시면 됩니다.

    HTML 에디터에 코드 추가하기

    CSS 적용까지 마치셨으면 이제 본격적으로 글을 작성하시면 됩니다. HTML 에디터로 옮겨오신 후 다음의 코드를 적용하시면 됩니다.

    <pre><code class="language-html">"작성할 코드내용"</code></pre>

    비교적 많이 사용하는 언어는 cdn에서 지원하는 언어에 한해 자동으로 언어를 감지하므로 코드에서 클래스를 쓰지 않아도 정상적으로 작동되지만, 제대로 감지하지 못하는 경우도 있으므로 class="language-언어 이름"과 같은 방식으로 작성합니다.

    HTML 코드를 Entity 코드로 변환하기

    코드블록을 만드신 후 HTML 에디터에서 작성코드를 넣으시면 아마도 원하시는 결과값을 얻으실 수 없을겁니다. HTML 에디터에서 기호나 문자로 인식되게 하기위해 우리는 '엔터티 코드'를 사용해서 작성코드를 만들어야 합니다. 하지만 하나하나 코드를 작성하기는 쉽지 않습니다. 그래서 제가 사용하는 엔터티 코드를 변환해주는 사이트를 알려드리겠습니다. 검색해보시면 알려드리는 사이트 외에도 많은 사이트가 있으니 원하시는 곳에서 엔터티 코드를 얻으셔도 됩니다.


    마치며..

    지금까지 자신의 블로그에 코드블록을 적용하는 방법을 알아보았습니다. 알려드린 내용을 기본적인 내용이므로 검색을 통해서 폰트 및 디자인을 변경하여 가독성이 높은 코드블록을 만들어보시기 바랍니다. 잘만든 코드블록 하나로 남들과는 다른 포스팅을 하실 수 있을겁니다. 코드블록을 사용하실 일이 종종 생기실텐데 지속적으로 공부하셔서 완성도 높은 포스팅 하시길 바라겠습니다.

    Tags

    관심 있을 만한 글

    다음 이전