본문 바로가기
Creation/Internet Service

SyntaxHighlighter Remote - SyntaxHighlighter 무설치버전

Readiz 2013. 11. 10. 22:23

원격으로 Syntax Highlighter를 사용하자!


Tistory 블로그에서 Syntax Highlighter를 까는 방법은 여러 글에서 소개가 되어 있지만, 이런 생각을 해 보았다.

"어차피 전체를 Ctrl+C, Ctrl+V를 해서 쓰면 되는데 굳이 Syntax Highlighter를 깔아서 쓸 필요가 있는가?"

이런 생각에서 나온 것이 SyntaxHighlighter 무설치버전인 일명 SyntaxHighlighter Remote이다. 개발은 간단해서 처음 하는건데도 하루정도에 끝났다.


코딩은 php와 html, js로 간단하게 코드를 작성해 보았으며 사용방법을 소개한다.

1. http://readiz.com/에 접속

2. 하단에 있는 Syntax Highlighter Remote를 클릭

3. 사용할 소스를 입력

4. Submit 버튼을 클릭

어떤 아이디어인지 이제 감이 오지 않는가?

이제 저 소스창을 Ctrl+C해서 블로그나 다른 곳에서 자유롭게 쓰면 된다. 아래처럼..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="subject" content="Readiz - Read easy"/>
        <meta name="title" content="Readiz"/>
        <meta name="author" content="Readiz"/>
        <meta name="keywords" content="Readiz, readeasy"/>
        <meta name="description" content="Read easy - I just serve, and you just take."/>
        <title>Readiz - Read easy</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script>
            function load() {
                window.scrollTo(0, 1);
            }
        </script>
    </head>
    <body onload="load();">
        <div data-role="page" id="home">
            <div data-role="header" data-position="fixed">           
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="home" data-transition="none">Home</a></li>
                        <li><a href="#info" data-icon="info" data-transition="none">Who\'m I?</a></li>
                        <li><a href="#" data-icon="bars">Chat</a></li>
                    </ul>
                </div>
            </div>
            <div data-role="content" align="center">
                <img src="img/Readiz.png" />
                <h1>Read easy</h1>
                <p>I serve, and you just take.</p>
                <ul data-role="listview" data-inset="true">
                    <li data-role="list-divider">Readiz Blog</li>
                    <li>
                        <div class="ui-grid-a">  
                            <div class="ui-block-a">
                                <a href="http://blog.readiz.com/" data-role="button" data-icon="star" data-iconpos="top">Tistory</a>
                            </div>
                            <div class="ui-block-b">
                                <a href="http://nlog.readiz.com/" data-role="button" data-icon="star" data-iconpos="top">Naver</a>
                            </div>
                        </div>
                    </li>
                    <li data-role="list-divider">Readiz Apps</li>
                    <li><a href="#app_syntax">
                        <h2>Syntax Highlighter Remote</h2>
                        <p><strong>Online version</strong></p>
                        <p>Just input your code and copy it!</p>
                        <p>Use it for your writing or blog.</p>
                    </a></li>
                     
                </ul>
                 
                <p>Contact: readiz@readiz.com</p>
            </div>
        </div>
        <div data-role="page" id="info">
            <div data-role="header" data-position="fixed">           
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="home" data-transition="none">Home</a></li>
                        <li><a href="#info" data-icon="info" data-transition="none">Who\'m I?</a></li>
                        <li><a href="#" data-icon="bars">Chat</a></li>
                    </ul>
                </div>
            </div>
            <div data-role="content">
                <h3>What is Readiz?</h3>
                <p>Readiz is the abbreviation for "Read Easy".
                    Our motto is "I(Readiz) serve and you just take".
                    We collect the information that is around the internet, and you just see it.
                    Although our start is feeble, our goal is firmness, so we are supposed to success.
                </p>
                <h5 align="right">- by Readiz in readiz.com</h5>
                <h3>Profile</h3>
                <h4>Readiz(Readiz@readiz.com)</h4>
                <p>
                    Lives in Seoul, South Korea.<br />
                    Now undergraduate at Korea University.<br />
                    Being interested in Programming, Data Mining, Design. :)
                </p>
            </div>
        </div>
        <div data-role="page" id="app_syntax">
            <div data-role="header">
                <a href="#home" data-icon="home">Home</a>
                <h5>Syntax Highlighter Remote</h5>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-inset="true">
                    <li data-role="list-divider">Input</li>
                    <li>
                        <form method="post" action="/syntax/result.php" data-ajax="false">                           
                            <div class="ui-grid-a">  
                                <div class="ui-block-a">
                                    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                                        <input type="radio" name="type" id="radio-choice-c" value="py" checked="checked">
                                        <label for="radio-choice-c">Python</label>
                                        <input type="radio" name="type" id="radio-choice-d" value="php">
                                        <label for="radio-choice-d">PHP</label>
                                        <input type="radio" name="type" id="radio-choice-e" value="js">
                                        <label for="radio-choice-e">Javascript</label>
                                        <input type="radio" name="type" id="radio-choice-f" value="cpp">
                                        <label for="radio-choice-f">C++</label>
                                        <input type="radio" name="type" id="radio-choice-g" value="html">
                                        <label for="radio-choice-g">HTML</label>
                                    </fieldset>
                                </div>
                                <div class="ui-block-b">
                                    <p align="right">
                                        <input type="submit" value="Submit" data-theme="e" data-inline="true"></input>
                                    </p>
                                </div>
                            </div>
                            <p>Type the source below:</p>
                            <textarea name="source" placeholder="Input your source code"></textarea>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
        </body>
</html>


괜찮지 않은가?

무엇보다 Tistory 등에서 별다른 설정없이 바로 사용가능하다는 점이 좋은 점일 것이다.

즐겨찾기에 등록해두고 한번쯤 사용해보시라!

'Creation > Internet Service' 카테고리의 다른 글

인터넷은 정글이다  (3) 2016.03.01
국내 웹에 없는것 찾기: Bluestacks(블루스택) 충돌 안하는 구버전 다운로드 방법  (26) 2014.03.30
개인소유 도메인에 네이버 메일, 티스토리, 네이버 블로그 서버 IP이용 연결시키기  (3) 2014.01.21
Are you ready to readiz?  (101) 2013.11.05

'Creation/Internet Service' Related Articles

티스토리툴바