7/13/2016

Google Blog 관리 (Blogspot) - 소스 표시방법

Blog에 C/C++ or Java or HTML or 기타 소스를 넣으면, 문제가 발생하는데, 특히 HTML의 경우 특수문자 (< >) 로 인하여 발생한다.
상위 소스를 넣을 경우 경우에 따라 라인마다 숫자표시 (Numbering) 이나, 라인의 강조 (Highlight) 등을 부가적인 기능을 바라는 사람이 많다.
이런 기능을 사용해주는 Javascript / CSS File 들이 존재하며 이를 이용하여 소스를 볼수가 있다.

하지만 기본적으로 거의 전부 pre tag를 이용하는 방법이며 이곳에서 세부기능은 css와 Javascirpt이 해결해주는 것 같다.
Hightlight , Line numbering 역시 Javascript이 전부 해결해주는 것 같다.

우선 가장 기본적인 Pre Tag를 이용한 간단한 소스 넣기를 부터 실행을 해보자.
다만, CSS or  Style을 변경을 해주고 이를 적용하는 것이 좋다.

  • SyntaxHighlighter
    https://en.wikipedia.org/wiki/Syntax_highlighting

  • CSS or Style Tag 수정시 학습
    http://ko.learnlayout.com/inline-block.html
    http://www.w3schools.com/css/css_display_visibility.asp

본인이 웹프로그래머가 아니다보니, 자세한 내용보다는 구현하는 방식에 대해 서술하겠다.

  • 주의사항
  1. 2번/3번/4번을 사용시에는 https가 제대로 동작이 안되어 화면에 제대로 표시가 안될 수 도 있으며, 그렇다면 브라우저의 설정변경을 해야한다. 
  2. 2번과3번이 동시설정시 서로 간섭현상이 발생하며, 가능하면 둘 중 하나만 사용하도록 하자 
  3. 3번에서 구글에서 제공하는 Jquery.mis.js는 이소스 외에도 다른곳에도 사용이 되며,  1.4.2 version 이 아닌 head에서 1.7 version 사용중이다. 
  4. head에서 제공되는 기능과 충돌되어 우측메뉴 Recent lists Gadget이 제대로 동작되지 않는 경우가 발생한다. (이 Post 볼경우에만 해당) 

1. 기본 pre tag 이용하여 소스 넣기

Blog에 C Source 나 개발 소스를 넣기 위해 가장 손쉬운 방법이며 빠른 접근과 손쉽게 사용이 가능하다.
head에 pre tag 에 style만 변경을 해주어 매번 class를 참조하는 방식으로 사용된다.

  • Blogspot->템플릿->HTML 편집
Blog의 Main Head Tag에 Style에 아래와 같이 넣자, Label은 기본으로 제공해주는 것이며, .codeprint를 넣고 이를 이제 pre tag의 class를 본인이 정의하여 호출하여 사용하자

<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 >

  • 사용방법
아래와 같이 사용을 하면 pre tag 상위 style을 적용되며, 쉽게 C source를 넣을 수가 있다.
다만 이 tag 안에서도 html 동작이 되다 보니 < > 을 &lt;   &gt; 로 변경해야 한다.

<pre class="codeprint">
  ...........
</pre>

그래서 본인도 위 방식이 사실 불편하지만 간단하고 빠르고 해서 자주 사용한다.

  • HTML 내에 특수문자 사용
   PRE Tag는 < > 문자를 변환해야줘야한다.
   http://egloos.zum.com/keep/v/1030642

2. Google code prettify 적용

google prettify라는 것이 존재하며, 다양한 CSS파일을 쉽게 얻을 수 있으며,
SyntaxHighlighter 간단한 기능을 제공을 하고 있다.
하지만, HTML이 제대로 동작하지 않으며, pre tag처럼 특수문자를 변경을 해줘야하다.
이를 id="htmlXmp"를 넣어 동작가능하게 한 것 같은데 보기도 그리 좋지 않다

  • Google code prettify의 TEST Program
   https://github.com/google/code-prettify/tree/master/tests

아래와 같이 head안에 넣고  pre tag와 함께 class="prettyprint" 함께 사용언어를 id or prettyprint 한 칸 띠고 넣는다.
Test program은 각 언어지원을 위해 sources 안에 있는 javascript들을 설정해주는 것 같다.
위의 test program들을 보고 사용하지 않을 생각이다.


  • 사용방법
본인이 원하는 *.css 와 *.min.css 를 정하고 아래의 script를 실행하면 동작.


//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
    현재 나에게는 Download를 할 필요가 없지만, Link만
  https://code.google.com/archive/p/google-code-prettify/

  • Code prettify 기본 사용법과  적용가능한 언어가 나온다.
  https://github.com/google/code-prettify

  • Code Prettify의 다양한 css/min.css 다양하게 제공 (본인 취향대로 선택)
  https://jmblog.github.io/color-themes-for-google-code-prettify/
  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 쪽이 좀 문제)


  • 사용방법 
선언을 해주고, 원하는 설정변경해주면 되지만 현재 Jquery.min.js는 나의 경우는 다른 곳에서도 사용 중이므로 주의하자

<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);

아래의 사이트 절차상 대로 하면 문제없이 동작이 될것입니다.
  • 사용방법 및 설정방법
  http://balupton.github.io/jquery-syntaxhighlighter/demo/


4. SyntaxHighlighter Blog에 적용

마지막으로 많이 사용되어지는 SyntaxHighlighter를 보겠지만 보안이 취약하다고하니 주의하자.
HTML 및 각종 언어 C, Java, 등을 쉽게 보여주며, 사용방법 및 설정이 용이하여 많이 사용되어지며
사용방법 역시 상위와 거의 동일하지만 다양한 기능 및 설정 제공을 해주는게 다르다

  1. 장점: 소스보기가 편하며, 다루기도 어렵지 않다.
  2. 단점: 블로그 접속시  Javscript이 외부에 있기에 로딩시간이 너무 오래걸린다.

사용하기 앞서,  아래의 사이트에서 기본기능과 프로그램을 보자
  http://alexgorbatchev.com/SyntaxHighlighter/


  • 사용방법 
head tag안에 넣고 일반 적용해도 되지만 Loading문제와 TEST용이므로 이 Post에서만 적용한다.

//사용자 편의에 따라 필요한 부분만 설정해서 사용 (현재 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 세부설정
사용방법은 pre tag 넣고, class="brush: xhtml; first-line: 10; highlight: [2, 4, 6] " 으로 brush aliases 기본으로 넣고, 설정옵션변경을 원하면, 세미콜론과 함께 추가
config과 defaults 의 설정내용이 나오며, 개별 default 값 확인가능.
  1. bloggerMode: 블로거에서 사용하면 필수라고 적혀있음.
  2. stripBrs : BR Tag 넣으면 이기능을 무시
  3. smart-tabs:  pre tag가 간혹 두개로 자동을 분리가 되었을때 혹은 나누어 쓸때 사용 
  4. gutter : line마다 번호 넣는 기능  
  5. highlight : 특정 Line을 highlight 기능 
    자세한 설정
    http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

  • SyntaxHighlighter 프로그래밍 언어지원확인
사용하는 프로그래밍언어  shBrushxxxx로확인하고 Brush aliases 에서 선택사용

    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가 기본제공이 되는 것 같다.
    http://jb-story.tistory.com/13

  • 아래는 Gdrive를 사용하여 공유->고급 가면 Web을 위한 공유가 있지만, 서비스가 이제 제한된다.
    http://helplogger.blogspot.kr/2014/09/host-blogger-css-javascript-files-in-google-drive.html
    https://support.google.com/drive/answer/2881970?hl=en
  • 참고사항 
     게시물(post)에 안에 link 및 script를 사용하면  글 저장시 문제가 발생이 되지만,
     이 때 수정하지 말고 닫기 버튼과 함께 저장을 하면 문제해결 .


댓글 없음 :