2016년 2월 17일 수요일

Html 화면에 소스코드 이쁘게 나타내는 방법 ( SyntaxHighlighter 방법 )

보통 블로그들 보면 프로그램 소스코드를 올릴때 텍스트로 그냥 올립니다.

그런데 아래와 같이 이쁘게 올린 블로그들 한 번씩 보셨죠?



이렇게 올리려면 어떻게 해야 할까요?

먼저 구글 블로그는 이렇게 안됩니다. 막아 놓았더라고요 ㅠㅡㅠ


html 소스에서 아래의 내용을 추가합니다.

<html>
<head>
<script src="</script'>https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css" rel="stylesheet" type="text/css" />
<script src="</script'>https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
     SyntaxHighlighter.all()
</script>
</head>


<body>
<pre class="brush:c#">
using System;
using System.Collections.Generic;
using System.Threading;
namespace MyThreadPool
{
   public class Class1
   {
   }
}
</pre>
</body>
</html>


그리고 실행해 보시면 짜잔~~! 위의 이미지와 같이 이쁘게 나옵니다.


그럼 설명


첫째로 아래의 두 줄은 무조건 넣어줘야 하는 값이구요.
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css" rel="stylesheet" type="text/css" />


둘째로 아래의 것은 언어 Brush 입니다. 이 종류는 여기 사이트를 참조하세요. (https://cdnjs.com/libraries/SyntaxHighlighter )
<script src="</script'>https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.js"></script>


세째로 아래의 것은 화면 테마 추가 입니다.
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />


테마의 이런 종류가 있습니다. 파일명만 복사해서 위 테마의 마지막 파일명과 바꾸어 주면됩니다.
Django (shThemeDjango.css)
Eclipse (shThemeEclipse.css)
Emacs (​shThemeEmacs.css)
Fade To Grey (​shThemeFadeToGrey.css)
Midnight (​shThemeMidnight.css)
RDark (​shThemeRDark.css)

댓글 없음:

댓글 쓰기