Highlight.JS 티스토리 사용 하기
1. https://highlightjs.org/ Get version 버전 - 버튼 클릭( 작성시 버전 8.6 )
2. CDN을 사용해서 전체 스크립트를 사용 할 수도 있고 필요한 언어만 사용하는
커스텀 팩으로 설치 할 수도 있다.
3. 이 글에서는 Custom Package를 이용함. Download 버튼을 눌러서 파일 저장
4. 다운로드한 Highlight.zip을 적당한 곳에 풀고
5. highlight.pack.js와 원하는 색상의 하이라이터 CSS 파일을 티스토리에 업로드
( styles 폴더의 monokai_sublime.css 선택 )
6. skin.html의 <Head> </Head> 사이에 아래 코드 추가
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
7. sytle.css의 body { } 아래 코드 추가 ( 글자 크기와 폰트는 원하는 것으로 수정 )
pre code {
font: normal 13pt consolas;
}
코드 사용 방법 ( 글 작성시 HTML 사용 체크 )
<pre><code class="적용 언어"> 코드 </pre></code>
아래 예제는 c# 적용 ( 다른 언어는 html, javascript, java, xml 등등 )
<pre><code class="csharp">
using System.IO;
namespace FileSystem
{
public interface IFileSystem
{
string ReadAllText( string filename );
}
public class FileSystem : IFileSystem
{
public string ReadAllText( string filename )
{
return File.ReadAllText( filename );
}
}
public static class FileHelper
{
public static bool IsEmpty( IFileSystem fs, string f )
{
var content = fs.ReadAllText( f );
return string.IsNullOrEmpty( content );
}
}
}
</pre></code>
적용 결과
using System.IO;
namespace FileSystem
{
public interface IFileSystem
{
string ReadAllText( string filename );
}
public class FileSystem : IFileSystem
{
public string ReadAllText( string filename )
{
return File.ReadAllText( filename );
}
}
public static class FileHelper
{
public static bool IsEmpty( IFileSystem fs, string f )
{
var content = fs.ReadAllText( f );
return string.IsNullOrEmpty( content );
}
}
}
'C#' 카테고리의 다른 글
| C# WebClient로 파일 다운 로드가 안될때 (0) | 2015.06.09 |
|---|---|
| 비주얼 스튜디오 설치후 추가 확장 애드인 (0) | 2015.05.20 |
| 티스토리에서 브라우저 API Key 구글 ShortURL 호출 (0) | 2014.07.05 |
| C# 구글 ShortURL (0) | 2014.06.24 |
| 테스트 스크립트 (0) | 2014.06.23 |
