상위 소스를 넣을 경우 경우에 따라 라인마다 숫자표시 (Numbering) 이나, 라인의 강조 (Highlight) 등을 부가적인 기능을 바라는 사람이 많다.
이런 기능을 사용해주는 Javascript / CSS File 들이 존재하며 이를 이용하여 소스를 볼수가 있다.
하지만 기본적으로 거의 전부 pre tag를 이용하는 방법이며 이곳에서 세부기능은 css와 Javascirpt이 해결해주는 것 같다.
Hightlight , Line numbering 역시 Javascript이 전부 해결해주는 것 같다.
우선 가장 기본적인 Pre Tag를 이용한 간단한 소스 넣기를 부터 실행을 해보자.
다만, CSS or Style을 변경을 해주고 이를 적용하는 것이 좋다.
- SyntaxHighlighter
- CSS or Style Tag 수정시 학습
http://www.w3schools.com/css/css_display_visibility.asp
본인이 웹프로그래머가 아니다보니, 자세한 내용보다는 구현하는 방식에 대해 서술하겠다.
- 주의사항
- 2번/3번/4번을 사용시에는 https가 제대로 동작이 안되어 화면에 제대로 표시가 안될 수 도 있으며, 그렇다면 브라우저의 설정변경을 해야한다.
- 2번과3번이 동시설정시 서로 간섭현상이 발생하며, 가능하면 둘 중 하나만 사용하도록 하자
- 3번에서 구글에서 제공하는 Jquery.mis.js는 이소스 외에도 다른곳에도 사용이 되며, 1.4.2 version 이 아닌 head에서 1.7 version 사용중이다.
- head에서 제공되는 기능과 충돌되어 우측메뉴 Recent lists Gadget이 제대로 동작되지 않는 경우가 발생한다. (이 Post 볼경우에만 해당)
1. 기본 pre tag 이용하여 소스 넣기
Blog에 C Source 나 개발 소스를 넣기 위해 가장 손쉬운 방법이며 빠른 접근과 손쉽게 사용이 가능하다.
head에 pre tag 에 style만 변경을 해주어 매번 class를 참조하는 방식으로 사용된다.
- Blogspot->템플릿->HTML 편집
<style >
.Label {
padding: 2px 0px 0px 5px;
margin: 0px 0px 0px 0px;
}
.codeprint{ // Class 정의
margin: 0px 50px 0px 30px;
background-color: #f7f7f7;
border: 1px solid rgb(221, 221, 221);
color: #006600;
font-size: 13px;
line-height: 19px;
margin-bottom: 1em;
overflow: auto;
padding: 1em;
}
</style >
- 사용방법
다만 이 tag 안에서도 html 동작이 되다 보니 < > 을 < > 로 변경해야 한다.
<pre class="codeprint"> ........... </pre>
그래서 본인도 위 방식이 사실 불편하지만 간단하고 빠르고 해서 자주 사용한다.
- HTML 내에 특수문자 사용
2. Google code prettify 적용
google prettify라는 것이 존재하며, 다양한 CSS파일을 쉽게 얻을 수 있으며,
SyntaxHighlighter 간단한 기능을 제공을 하고 있다.
하지만, HTML이 제대로 동작하지 않으며, pre tag처럼 특수문자를 변경을 해줘야하다.
이를 id="htmlXmp"를 넣어 동작가능하게 한 것 같은데 보기도 그리 좋지 않다
- Google code prettify의 TEST Program
아래와 같이 head안에 넣고 pre tag와 함께 class="prettyprint" 함께 사용언어를 id or prettyprint 한 칸 띠고 넣는다.
Test program은 각 언어지원을 위해 sources 안에 있는 javascript들을 설정해주는 것 같다.
위의 test program들을 보고 사용하지 않을 생각이다.
- 사용방법
//Google prettify 사용을 위해서 아래와 같이 CSS File *.css / *.min.css 와 Javascript run_prettify.js 선언 <link href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/vibrant-ink.css" rel="stylesheet" type="text/css"> </link> <link href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/vibrant-ink.min.css" rel="stylesheet" type="text/css"> </link> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"> </script> // 소스 표현 <pre class="prettyprint linenums:1 "> // Line Numbering을 1부터 시작 ....... <pre >
- 소스표현-사용예제 (미동작시 상위사이트 확인)
// Define our Function
function checkMeaningOfLife ( decimal, success ) {
if ( parseInt(decimal,10) === 42 ) {
window.console.log(success);
}
};
// Define our Variables
var str = 'The meaning of life is true',
decimal = 42.00;
// Fire our Function
checkMeaningOfLife(decimal,success);
- Google Code prettify Download
https://code.google.com/archive/p/google-code-prettify/
- Code prettify 기본 사용법과 적용가능한 언어가 나온다.
- Code Prettify의 다양한 css/min.css 다양하게 제공 (본인 취향대로 선택)
https://rawgit.com/google/code-prettify/master/styles/index.html
3. Google prettify기반 SyntaxHighlighter 적용
Google's Prettify 기반으로 한 좀 더 나아진 SyntaxHighlighter이 존재하며, 설정도 더 편한 것 같아, 이 것으로 설정해보기로 했으나, 단점은 Google's Prettify 거의 유사하다.
현재 이 페이지에서는 2번 과 3번이 동시 실행시 3번이 2번에 영향을 주는 것 같으며, 둘 중 하나가 제대로 표현이 안되는 현상이 발생
만약 사용한다면 둘중 하나만 사용하도록 해야함 3번의 Google prettify만 적용 ( 역시나 HTML 쪽이 좀 문제)
- 사용방법
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js" type="text/javascript"></script>
<script type="text/javascript">$.SyntaxHighlighter.init({
'wrapLines':true,
'lineNumbers': true
});
<pre class="language-javascript">
.........
</pre>
- 상위 소스-사용예제 (미동작시 상위사이트 확인)
// Define our Function
function checkMeaningOfLife ( decimal, success ) {
if ( parseInt(decimal,10) === 42 ) {
window.console.log(success);
}
};
// Define our Variables
var str = 'The meaning of life is true',
decimal = 42.00;
// Fire our Function
checkMeaningOfLife(decimal,success);
아래의 사이트 절차상 대로 하면 문제없이 동작이 될것입니다.
- 사용방법 및 설정방법
4. SyntaxHighlighter Blog에 적용
마지막으로 많이 사용되어지는 SyntaxHighlighter를 보겠지만 보안이 취약하다고하니 주의하자.
HTML 및 각종 언어 C, Java, 등을 쉽게 보여주며, 사용방법 및 설정이 용이하여 많이 사용되어지며
사용방법 역시 상위와 거의 동일하지만 다양한 기능 및 설정 제공을 해주는게 다르다
- 장점: 소스보기가 편하며, 다루기도 어렵지 않다.
- 단점: 블로그 접속시 Javscript이 외부에 있기에 로딩시간이 너무 오래걸린다.
http://alexgorbatchev.com/SyntaxHighlighter/
- 사용방법
//사용자 편의에 따라 필요한 부분만 설정해서 사용 (현재 HTML만 표현을 위해 볼드로 된 부분만 사용) <link href="https://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link> <link href="https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"> </script> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"> </script> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"> </script> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'> </script> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"> </script> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"> </script> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"> </script> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript"> </script> <script type="text/javascript"> SyntaxHighlighter.all(); SyntaxHighlighter.config.stripBrs = true; SyntaxHighlighter.config.bloggerMode = true; </script> // 실제 소스에 적용 <pre class="brush: xhtml; smart-tabs: true; highlight: [3,4,6,7,9]"> ............ ......... </pre>
- SyntaxHighlighter 소스사용예제
만약 아래의 글이 안보이면 상위 사이트들을 점검해보도록하자.
...........START // 만약 아래의 글이 안보이면 문제발생
.............END
- SyntaxHighlighter 세부설정
config과 defaults 의 설정내용이 나오며, 개별 default 값 확인가능.
- bloggerMode: 블로거에서 사용하면 필수라고 적혀있음.
- stripBrs : BR Tag 넣으면 이기능을 무시
- smart-tabs: pre tag가 간혹 두개로 자동을 분리가 되었을때 혹은 나누어 쓸때 사용
- gutter : line마다 번호 넣는 기능
- highlight : 특정 Line을 highlight 기능
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
- SyntaxHighlighter 프로그래밍 언어지원확인
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
5. Github의 gist 이용방법
Github 계정이 있다면, gist도 이용해도 괜찮다.
Github에서 gist로 간 다음 new gist를 한 다음 본인 원하는 글을 작성을 한 뒤 Embeded 부분을 가져오면된다.
6. 기타 사용방법
Syntax Highlighter 와 유사하며 국내에서 만들어진 것 같다.
현재 많은 사용을 잘 모르겠으며, 본인도 아직 실험을 해보지 못했다.
현재, 충돌 및 https 미지원 때문에 가능하면 편한것을 사용하는 것이 좋을 것 같다.
http://colorscripter.com/info#e
7. 결론
저의 경우는 1번과 5번을 혼합해서 사용하기로 결정했으며,다만, 빠른 로딩을 위한 방법을 모색중이다.
현재는 언어설정은 두개만 사용 중
- 로딩이 너무느려, 우연히 알게되었는데, TI Story는 Upload가 기본제공이 되는 것 같다.
- 아래는 Gdrive를 사용하여 공유->고급 가면 Web을 위한 공유가 있지만, 서비스가 이제 제한된다.
https://support.google.com/drive/answer/2881970?hl=en
- 참고사항
이 때 수정하지 말고 닫기 버튼과 함께 저장을 하면 문제해결 .