SyntaxHighlighter Remote - SyntaxHighlighter 무설치버전

Posted by Readiz
2013.11.10 22:23 Creation/Internet Service

원격으로 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>
            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