티스토리 뷰
블로그에 프로그램 소스와 관련된 글을 올리다 보면 가끔은 소스코드를 이쁘게 표시하고 싶을때가 있다. 구글링하다 보면 여러가지 방법들이 제시 되는데. 그 중에 하나가 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
- select
- reflection
- 자바
- 파일
- jstl
- IF
- syntax
- Set
- remove
- Rowcount
- JSP
- highlight.js
- 임시파일
- FileInputStream
- file
- 라이브아카데미
- 소스코드
- BufferedReader
- InputStreamReader
- choose
- catch
- foreach
- FOUND_ROW
- isDirectory
- Field
- forToken
- BufferedWriter
- IO
- java
- InputStreamWriter
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
