이번에는 GKSkin을 이용하여 소스코드가 들어있을 경우  Syntaxhighlighter을 이용하여 코드를 예쁘게 꾸며보도록 해보겠습니다.

기존 연동방식은 하단 링크를 참고해주세요



2014/10/10 - [블로그팁] - 티스토리에 syntaxhighlighter 설치 및 반영하여 소스코드 깔끔하게 적용하기



링크를 적용해도 코드에 디자인이 적용이 되긴 합니다만 

가끔씩 네트워크가 느려질경우 소스코드에 적용이 되지 않을 경우가 있습니다.

이런 문제점을 해결하는 방법을 설명드리고자 합니다.


본인의 현재 적용되어있는 gkskin.js에 일부 코드를 추가하고자 합니다.

기존 링크포스팅을 보시면 skin.html하단에 js파일 include를 하고 추가로


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


위와같이 코드를 주셨는데 일단 해당 부분을 제거해 주십니다.


해당 설명은 GKSkin을 적용하셨을 경우를 예를 든것입니다.

일반적으로 다른분들의 스킨에 소스코드 적용시 그냥 링크포스팅만 참고하시면 되십니다.


skin.html에 위의 코드를 제거해주셨다면 이제는 본인의 gkskin.js 파일을 메모장으로 open을 해주도록 합니다.


CTRL + F 키를 누르셔서 viewport 라는 문자열로 검색을 하십니다. 






위와같이 검색이 될겁니다.

코드중 resize부분 다음에 해당 옵션을 추가해주시면 되시는데 그냥 해당 코드를 복사해서 덮어씌우기 해주세요


기존 gkskin.js의 viewport코드

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var vp = Ext.create("Ext.container.Viewport",{
                layout: 'border',
                id : 'viewportlayout',
                border : false,
                frame : false,
                items : layoutItem,
                listeners : {
                    resize : function( obj, width, height, oldWidth, oldHeight, eOpts ) {
                        if(width > 1200) {
                            if(Ext.getCmp("westsidebar").getCollapsed( )) {
                                Ext.getCmp("westsidebar").expand(!Ext.isIE8m); 
                            }                          
                        } else {
                            if(!Ext.getCmp("westsidebar").getCollapsed( )) {
                                Ext.getCmp("westsidebar").collapse(Ext.Component.DIRECTION_LEFT,!Ext.isIE8m);  
                            }
                        }
                }
                }
});


덮어씌우기할 코드

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var vp = Ext.create("Ext.container.Viewport",{
                layout: 'border',
                id : 'viewportlayout',
                border : false,
                frame : false,
                items : layoutItem,
                listeners : {
                    resize : function( obj, width, height, oldWidth, oldHeight, eOpts ) {
                        if(width > 1200) {
                            if(Ext.getCmp("westsidebar").getCollapsed( )) {
                                Ext.getCmp("westsidebar").expand(!Ext.isIE8m); 
                            }                          
                        } else {
                            if(!Ext.getCmp("westsidebar").getCollapsed( )) {
                                Ext.getCmp("westsidebar").collapse(Ext.Component.DIRECTION_LEFT,!Ext.isIE8m);  
                            }
                        }
                },afterrender : function(panel) {
                    SyntaxHighlighter.all();
                             }
                }
        });

덮어씌워주실 영역은 "var vp" 라는 코드 부터 제일 마지막 "})" 바로 상단까지 입니다.






위와같이 적용을 해주신다면 소스코드에 정상적으로 Syntaxhighlighter을 적용하실수가 있겠습니다 ^^


by 개발로짜


저작자표시 비영리 변경금지

'GKSkin > 사용법' 카테고리의 다른 글

티스토리 스킨 GKSkin 적용하기 (애드센스 광고코드 설치편)  (2) 2014.10.13
티스토리 스킨 GKSkin 설치하여 블로그에 적용하기 (기본설치편)  (0) 2014.10.11

    티스토리툴바