상위 소스를 넣을 경우 경우에 따라 라인마다 숫자표시 (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 부분을 가져오면된다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #include<stdio.h> | |
| //Jeonghun Lee, this is first test code. | |
| int main() | |
| { | |
| printf ("Test Github1 , gist test "); | |
| return 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #include<stdio.h> | |
| //Jeonghun Lee, this is second test code. | |
| int main() | |
| { | |
| printf ("Test Github1 , gist test "); | |
| return 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // blogspot test 용 입니다. | |
| #include<stdio.h> | |
| int main() | |
| { | |
| printf(" blogspot test 용 입니다. \n"); | |
| return 0; | |
| } |
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
- 참고사항
이 때 수정하지 말고 닫기 버튼과 함께 저장을 하면 문제해결 .
댓글 없음 :
댓글 쓰기