티스토리 뷰

Tip

[TIP] tistory 에서 Highlight.js를 이용한 소스 코드 넣기

A형개발자 2016. 8. 4. 12:51

블로그에 프로그램 소스와 관련된 글을 올리다 보면 가끔은 소스코드를 이쁘게  표시하고 싶을때가 있다. 구글링하다 보면 여러가지 방법들이 제시 되는데. 그 중에 하나가 Highlight.js 이다. tistory 는 관리툴을 이용해서 HTML/CSS 를 직접 수정하거나 추가를 할 수 있어 더 쉽게 이용이 가능하다.


1. Highlight.Js

Hgihlight.JS 와 관련된 공식 사이트는 https://highlightjs.org/ 이다. 보다 많은 내용은 위의 사이트에서 확인 할 수 있다.

필요한 라이브러리를 다운 받고 tistory 에 다시 업로드하여 사용하다 보면 속도 문제를 먼저 생각하게 된는 것 같은데, 이럴 때 사용 할 수 있는 것이

https://cdnjs.com/ 이 곳을 통해서 무료로 사용 가능한 라이브러리를 찾을 수 있다. highlight.js 또한 이 곳을 통해서 필요한 URL를 얻을 수 있다.



2. 등록

관리자 페이지 > HTML/CSS 편집 > 파일 추가


     


  <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css">
  <script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script> 


3. 사용방법

<pre><code class="language-html">

... 필요한 소스 코드 ...

</code></pre>


위에 같은 소스를 HTML 에 넣어 주면 된다.

예)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>JSTL remove tag example</title>
</head>
<body>
<!-- Set message to display -->
<c:set var="umejintan" scope="request" value="Hello, UserName"/>
<c:out value="${umejintan}"/>

<!-- Remove the message -->
<c:remove var="umejintan"/>
<c:out value="${umejintan}"/>

</body>

여기서 필요한 것은 어떤 언어를 사용하는지 지정만 해주면 된다. ( language-html , language-java ......)

화면 스타일은 monokai_sublime.min.css 를 지정하므로써 변경이 가능하며, 현재는 sublime 스타일을 적용한 경우 이다.





저작자표시

'Tip' 카테고리의 다른 글

[Tomcat] Session Time 설정  (0) 2016.08.10
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함