머드초보의 블로그 :: 소스 코드 보기 좋게 css 입혀주는 Syntax Highlight Tool

소스 코드 보기 좋게 css 입혀주는 Syntax Highlight Tool - hilite.me

나의 삶/리뷰 2015. 1. 11. 21:54

기존에 syntax highlighter라는 플러그인은 js를 업로드하거나 script로 include해서 <code></code>태그를 찾아서 css를 입히는 형태가 있습니다. 근데 티스토리에서 할라니까 html skin도 편집해야 하고 js, css파일도 업로드해야 합니다. 이거 말고도 https://highlightjs.org/라는 플러그인도 있지만, 이것도 위와 같은 동일한 형태입니다.

결정적으로 글을 쓸 때 html형태는 Syntax Highlight를 하기 힘들더라구요. 그래서 찾다보니 그냥 소스코드를 붙여넣으면 바로 css까지 입힌 형태의 소스코드를 생성합니다. 그래서 티스토리에서 글을 쓸 때 그냥 <p></p>사이에 코드를 그대로 넣으면 매우 잘 나옵니다.

사이트 주소

http://hilite.me/

아래와 같이 그냥 소스코드 대추 붙여놓으면 이쁘게 html로 바꿔서 오른쪽에 표시해줍니다.

아래는 html태그를 붙인 예제입니다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    테스트입니다.
</div>
</body>
</html>

php도 붙여보니 잘되네요.

<?php
$osInfo = strtoupper(substr(PHP_OS, 0, 3));

if (count($argv) <= 4)
{
    echo 'argv enter. area stage isChallenge device deviceip ex) 5 3 1 genymotion (101)' . PHP_EOL;
    exit;
}
$area = $argv[1];
$stage = $argv[2];
$isChallenge = ($argv[3] == '1') ? true : false;
$device = $argv[4];
$data = json_decode(file_get_contents("$device.json"), true);
if ($data == null) {
    echo 'Error!' . PHP_EOL;
    exit;
}