11/09/2015

[CODING] highlight.js 를 이용한 Code Highlight(HTML/CSS 처리)

on   in , ,   with 2 comments
웹 상에서 코드를 표현하기에는 굉장히 불편한 부분이 있습니다. 일일히 css를 적용하기에는 많은 시간이 들죠.
그래서 highlight.js 에서 제공되는 javascript, css 파일을 통해 쉽게 highlight 처리가 가능합니다.



이전 블로그에서도 간간히 썼었고, 많은 사이트,블로그에서 사용되는 js입니다.

공식 홈페이지(https://highlightjs.org/)에서 제공하는 URL은 아래와 같습니다.
코드안에 해당 부분을 포함하고 가이드에 따라 사용하면 됩니다.

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

highlight.js 의 css와 js 파일을 로드하셨다면, 코드안에서 <code> 태그를 이용하여 highlight 가 적용된 코드를 사용할 수 있습니다.
예를들어 html 코드를 나타내는 경우를 보겠습니다.

<pre><code class="html">이 부분에 표기할 html 코드를 작성합니다.</code></pre>

이런식으로 쉽게 적용할 수 있습니다.



<html>
<body>
<input type=codeblack.net>
</BODY>
</HTML>.


HAHWUL

Security engineer, Gopher and H4cker!
Share: | Coffee Me:

2 comments:

  1. HAHWUL5/20/2019 11:46 PM

    하나 빼먹은 내용이 있네요.. 적용하려면 코드단에서 initHighlightingOnLoad 호출해줘야합니다.

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

    ReplyDelete
  2. HAHWUL3/06/2020 1:10 AM

    [ event handler ]

    hljs.initHighlightingOnLoad();

    [ custom init ]

    document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
    });

    ReplyDelete