'etc'에 해당되는 글 2건

  1. 티스토리에 자동 링크 적용하기
  2. 티스토리에 syntaxhighlighter 3.0.83 적용하기 + jQuery + autoloader 3

http://ssamkj.tistory.com/16


위 링크의 내용대로 자동 링크를 사용하다가 어느날부터 제대로 작동을 하지 않아 찾아보다가 다음과 같이 해결


$ 대신 jQuery로 교체해주니까 작동됨.



autolink.js의 원본

var re = /(?:(?=(?:http|https):)([a-zA-Z][-+.a-zA-Z\d]*):(?:((?:[-_.!~*'()a-zA-Z\d;?:@&amp;=+$,]|%[a-fA-F\d]{2})(?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*)|(?:(?:\/\/(?:(?:(?:((?:[-_.!~*'()a-zA-Z\d;:&amp;=+$,]|%[a-fA-F\d]{2})*)@)?(?:((?:(?:(?:[a-zA-Z\d](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.)*(?:[a-zA-Z](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})|(?:(?:[a-fA-F\d]{1,4}:)*[a-fA-F\d]{1,4})?::(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))?)\]))(?::(\d*))?))?|((?:[-_.!~*'()a-zA-Z\d$,;:@&amp;=+]|%[a-fA-F\d]{2})+))|(?!\/\/))(\/(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*)*(?:\/(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*)*)*)?)(?:\?((?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*))?)(?:\#((?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*))?)/img;</span>

  

    function makeHTML(textNode) {

        var source = textNode.data;

        return source.replace(re, function() {

            var url = arguments[0];

            var a = $('').attr({'href': url, 'target': '_blank'}).text(url);

            return url.match(/^https?:\/\/$/) ? url : $('</p><div></div>').append(a).html();

        });

    };

  

    function eachText(node, callback) {

        $.each(node.childNodes, function() {

            if (this.nodeType != 8 &amp;&amp; this.nodeName != 'A') {

                this.nodeType != 1 ? callback(this) : eachText(this, callback);

            }

        });

    };

     

    function autolink(obj){

        return obj.each(function() {

                var queue = [];

                eachText(this, function(e) {

                    var html = makeHTML(e);

                    if (html != e.data) {

                        queue.push([e, makeHTML(e)]);

                    }

                });

                $.each(queue, function(i, x) {

                    $(x[0]).replaceWith(x[1]);

                });

            });

    };



수정

var re = /(?:(?=(?:http|https):)([a-zA-Z][-+.a-zA-Z\d]*):(?:((?:[-_.!~*'()a-zA-Z\d;?:@&amp;=+$,]|%[a-fA-F\d]{2})(?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*)|(?:(?:\/\/(?:(?:(?:((?:[-_.!~*'()a-zA-Z\d;:&amp;=+$,]|%[a-fA-F\d]{2})*)@)?(?:((?:(?:(?:[a-zA-Z\d](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.)*(?:[a-zA-Z](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})|(?:(?:[a-fA-F\d]{1,4}:)*[a-fA-F\d]{1,4})?::(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))?)\]))(?::(\d*))?))?|((?:[-_.!~*'()a-zA-Z\d$,;:@&amp;=+]|%[a-fA-F\d]{2})+))|(?!\/\/))(\/(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*)*(?:\/(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&amp;=+$,]|%[a-fA-F\d]{2})*)*)*)?)(?:\?((?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*))?)(?:\#((?:[-_.!~*'()a-zA-Z\d;\/?:@&amp;=+$,\[\]]|%[a-fA-F\d]{2})*))?)/img;

 

    function makeHTML(textNode) {

        var source = textNode.data;

        return source.replace(re, function() {

            var url = arguments[0];

            var a = jQuery('').attr({'href': url, 'target': '_blank'}).text(url);

            return url.match(/^https?:\/\/$/) ? url : jQuery('</p><div></div>').append(a).html();

        });

    };

 

    function eachText(node, callback) {

        jQuery.each(node.childNodes, function() {

            if (this.nodeType != 8 &amp;&amp; this.nodeName != 'A') {

                this.nodeType != 1 ? callback(this) : eachText(this, callback);

            }

        });

    };

    

function autolink(obj){

return obj.each(function() {

           var queue = [];

           eachText(this, function(e) {

               var html = makeHTML(e);

               if (html != e.data) {

                   queue.push([e, makeHTML(e)]);

               }

           });

           jQuery.each(queue, function(i, x) {

               jQuery(x[0]).replaceWith(x[1]);

           });

       });

};



하단의 코드도 다음과 같이 변경


이전

<SCRIPT type=text/javascript>     

autolink($("#content"));

</SCRIPT>


수정

<SCRIPT type=text/javascript>

jQuery(document).ready(function(){  // 문서가 모두 읽힌 후에 다음을 실행

autolink(jQuery("#content"));

});

</SCRIPT>




http://alexgorbatchev.com/SyntaxHighlighter/download/


위 링크의 syntaxhighlighter 3.0.83 파일을 다운로드한다.


압축을 해제하여 scripts와 styles 폴더의 모든 파일들을 "HTML/CSS편집 -> 파일업로드"에 추가 해준다.



jquery-1.6.1.min.js



첨부한 jQuery파일을 같은 위치에 추가한다.

(jQuery 부분은 http://bryan7.tistory.com/10 이곳에서 참고했다.)



HTML/CSS편집 에서 <head> 태그에 안에 css를 추가 해준다.


<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>fsj :: 'etc' 카테고리의 글 목록</title>

<link href="./style.css" rel="stylesheet" type="text/css" />

<link rel="alternate" type="application/rss+xml" title="fsj" href="https://showjean.tistory.com/rss" />

<link rel="shortcut icon" href="https://blog.showjean.com/favicon.ico" />

<link rel="stylesheet" type="text/css" href="./images/shCoreEclipse.css" />

<link rel="stylesheet" type="text/css" href="./images/shCore.css" />

</head>

- 여기서 shCore.css는 추가하지 않아도 제대로 작동한다. 스크롤바 패치를 테마css파일에 직접하지 않기 위해서 shCore.css에 적용 후 추가했다. 이러면 테마를 변경하더라도 패치가 계속 유지된다. 


overflow를 x, y로 분리하여 설정한 shCore.css의 내용. 가로 스크롤바만 생긴다.

.syntaxhighlighter {

  border: 1px solid #222 !important;

  width: 98% !important;

  margin: 1em 0 1em 0 !important;

  position: relative !important; 

  font-size: 1em !important;

  overflow-y: hidden !important; 

  overflow-x: auto !important;

}



마찬가지로 </body> 태그 위에 다음 script를 추가한다. 

- 참고 : http://ddoong2.com/601


<!-- jQuery 삽입 -->

<SCRIPT type=text/javascript src="./images/jquery-1.6.1.min.js"></SCRIPT>

<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> -->

<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shAutoloader.js"></script>

<SCRIPT type="text/javascript">

/* jQuery 부분  */ 

jQuery.noConflict();  // 다른 라이브러리와 충돌을 방지한다.

jQuery(document).ready(function(){  // 문서가 모두 읽힌 후에 다음을 실행

    jQuery("blockquote[class^=brush]").each( function() {  //blokquote를 사용한 태그

        var $this = jQuery(this);

 

        // 복사 붙여넣기 했을때 탭처리

        $this.find("span[class*=Apple-tab-span]").replaceWith(function() {

            return jQuery(this).text();

        });

 

        // 편집창에서 직접 수정했을때 탭 처리

        $this.find("p[style*=margin-left]").each(function() {

            var $elem = jQuery(this);

            var style = $elem.attr("style");

            var result = /\s*?margin-left:\s(\w+?)em;\s*?/gi.exec(style);

            if ( result != null ) {

                result = result[1];

            }

            var spaceCount = parseInt(result) * 2;

            var spaceString = "";

            for (var i = 0; i < spaceCount; i++) {

                spaceString += "&nbsp;";

            }

            $elem.removeAttr("style");

            $elem.html(spaceString + $elem.html());

        });

 

        var temp = $this.html(); //  내용 복사

        temp = temp.replace(/\n/gi, "");

        temp = temp.replace(/<p><\/p>/gi, "");

        temp = temp.replace(/<p><br\s*\/?><\/p>/gi, "\n");    // 줄바꿈

        temp = temp.replace(/<P>(.*?)<\/P>/gi, "$1\n");       // 한줄끝

        temp = temp.replace(/<br\s*\/?>/gi, "\n");            // 줄바꿈

 

        temp = '<script type="syntaxhighlighter" class="' + $this.attr('class') + '"><![CDATA[' + temp + ']]><\/script>'

        $this.replaceWith(temp);

    });

     

/*  SyntaxHighlighter autoloader  */

//<![CDATA[

SyntaxHighlighter.autoloader(

  'applescript            ./images/shBrushAppleScript.js',

  'actionscript3 as3      ./images/shBrushAS3.js',

  'bash shell             ./images/shBrushBash.js',

  'coldfusion cf          ./images/shBrushColdFusion.js',

  'cpp c                  ./images/shBrushCpp.js',

  'c# c-sharp csharp      ./images/shBrushCSharp.js',

  'css                    ./images/shBrushCss.js',

  'delphi pascal          ./images/shBrushDelphi.js',

  'diff patch pas         ./images/shBrushDiff.js',

  'erl erlang             ./images/shBrushErlang.js',

  'groovy                 ./images/shBrushGroovy.js',

  'java                   ./images/shBrushJava.js',

  'jfx javafx             ./images/shBrushJavaFX.js',

  'js jscript javascript  ./images/shBrushJScript.js',

  'perl pl                ./images/shBrushPerl.js',

  'php                    ./images/shBrushPhp.js',

  'text plain             ./images/shBrushPlain.js',

  'py python              ./images/shBrushPython.js',

  'ruby rails ror rb      ./images/shBrushRuby.js',

  'sass scss              ./images/shBrushSass.js',

  'scala                  ./images/shBrushScala.js',

  'sql                    ./images/shBrushSql.js',

  'vb vbnet               ./images/shBrushVb.js',

  'xml xhtml xslt html    ./images/shBrushXml.js'

);      

//]]> 

    /*  SyntaxHighlighter 사용부분  */

    SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 안 보기

    SyntaxHighlighter.all();

});

</SCRIPT>

</body>


사용법 1

1. 인용구(ctrl+Q)를 만들어 그 안에 코드를 넣는다.

2. HTML모드로 들어가 해당 인용구(blokquote)의 class를 "brush: type;"으로 변경한다.

3. 기타 syntaxhighlighter에 필요한 옵션(http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/)을 적용한다. 


- 이 경우 jQuery에서 각종 태그들이 제거되거나 변형(주로 줄바꿈 관련)되므로 이를 무시하고 싶다면 2번째 방법으로 사용한다.


사용법 2

1. HTML모드로 아래와 같이 직접 입력한다.

//code




'etc' 카테고리의 다른 글

티스토리에 자동 링크 적용하기  (0) 2013.10.09