TimberLandChapel's Tech Blog

TimberLandChapel provide Tips, tech note and scribbling.
Updated my site as English site for APAC users.
TLC.com .Metrix 4.0 Beta1 released

サイトの日本語化方法はこちら

Syndication

News

INETAJ

情報処理関係官公庁

SQL Server

TLC.com

Microsoft

クリエイティブ・コモンズ

http://www3.clustrmaps.com/

7月 2011 - Posts

Related Resources
Google Libraries API - Developer's Guide
http://code.google.com/apis/libraries/devguide.html#jquery
Microsoft Ajax Content Delivery Network
http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery
http://jquery.com/
Objective

This is technical blog. My objective is to share tips or technique. So disclosing the source code is one of important way for it. There are some technique to show the source code in HTML.
On the one hand, users would like to copy the source code that can be used as is. Drag and copy isn't smart way to use sample source code in web.

Here is a sample having "Copy to clipboard" function. Click [Copy to clipboard], then you get the html code in clipboard that is displayed below.

Code Copy to clipboard
01Private Sub Sample()
02    ' This is sample
03
04    Do something...
05
06End Sub

This topic suggests the implementation of "source code copy" with jQuery. This topic doesn't show how to implement the appearance but it shows only clipboard copying.

Clipboard copy with jQuery

Long story short (not again), here is a code.

Code Copy to clipboard
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03    <head>
04        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05        <script src="https://www.google.com/jsapi?key=<!-- Change key to "your key"-->" type="text/javascript"></script>
06        <script type="text/javascript">google.load("jquery", "1.6.1");</script>
07        <title>Copy the source code into the clipboard</title>
08        <style type="text/css">
09[id|=container]{
10    display : none;
11}
12[id|=sourceToClipboard]{
13    color : #333366 !important;
14    float : right;
15    font-weight : bold;
16}
17[id|=sourceToClipboard]:hover{
18    text-decoration : underline;
19    cursor : pointer;
20    color : #333366 !important;
21    float : right;
22    font-weight : bold;
23}
24        </style>
25        <script type="text/javascript">
26$(function(){
27    $("[id^='sourceToClipboard'").click(function () {
28        var source = $("[id^='container'] p." + $(this).attr("class")).text();
29        source = source.replace(/\\n/g, "\r\n");
30        source = source.replace(/\\t/g, "\t");
31        source = source.replace(/\\s/g, " ");
32        clipboardData.setData("Text", source);
33        alert("Now source is in your clipboard.");
34    });
35});
36        </script>
37    </head>
38    <body>
39        <p>Following is sample code.</p>
40        <div class="codeheader">Code <span id="sourceToClipboard-clipboardsample" class="clipboardsample">Copy to clipboard</span></div>
41        <div class="code">
42            <div>Private Sub Sample()</div>
43            <div>    ' This is sample</div>
44            <div></div>
45            <div>    Do something...</div>
46            <div></div>
47            <div>End Sub</div>
48        </div>
49        <div id="container-clipboardsample">
50            <p class="clipboardsample">Private Sub Sample()\n\t' This is sample\n\n\tDo something...\n\nEnd Sub\n</p>
51        </div>
52    </body>
53</html>

Points

1 Contents: Main contents contains only primary html tags.

Code
40        <div class="codeheader">Code <span id="sourceToClipboard-clipboardsample" class="clipboardsample">Copy to clipboard</span></div>
41        <div class="code">
42            <div>Private Sub Sample()</div>
43            <div>    ' This is sample</div>
44            <div></div>
45            <div>    Do something...</div>
46            <div></div>
47            <div>End Sub</div>
48        </div>
49        <div id="container-clipboardsample">
50            <p class="clipboardsample">Private Sub Sample()\n\t' This is sample\n\n\tDo something...\n\nEnd Sub\n</p>
51        </div>

This content contains only [id] attribute and [class] attribute. It's just a HARD html. If you copy the source to your environment, the appearance is different from above one due to cutting out the decoration. The decoration for source code is another topic.

2 Copy: jQuery

Code
25        <script type="text/javascript">
26$(function(){
27    $("[id^='sourceToClipboard'").click(function () {
28        var source = $("[id^='container'] p." + $(this).attr("class")).text();
29        source = source.replace(/\\n/g, "\r\n");
30        source = source.replace(/\\t/g, "\t");
31        source = source.replace(/\\s/g, " ");
32        clipboardData.setData("Text", source);
33        alert("Now source is in your clipboard.");
34    });
35});
36        </script>

This implement has simple fnction.
It handles CLICK EVENT whose ID starts with keyword [sourceToClipboard]; then find a container holding source code that will be copied into clipboard. To find a target container, this code use class attribute. It uses child [p] tag having same class whose parent tag has [id] starts with keyword [container].

3 Container: holding source code [source].

Container is hidden in html. It just has only strings that will be copied into clipboard.
Strings should be escaped (\n to CrLf, \t to tab, \s to blank).

Code
49        <div id="container-clipboardsample">
50            <p class="clipboardsample">Private Sub Sample()\n\t' This is sample\n\n\tDo something...\n\nEnd Sub\n</p>
51        </div>

4 Clickable: UI similar to the [link] with CSS.

This sample uses [span] content as a "button". But [span] itself has no UI which is reminiscent of clickable.
This is implemented with only CSS on the content whose [ID] attribute starts with a keyword "sourceToClipboard".
Also with CSS, the container is hidden.

Code
08        <style type="text/css">
09[id|=container]{
10    display : none;
11}
12[id|=sourceToClipboard]{
13    color : #333366 !important;
14    float : right;
15    font-weight : bold;
16}
17[id|=sourceToClipboard]:hover{
18    text-decoration : underline;
19    cursor : pointer;
20    color : #333366 !important;
21    float : right;
22    font-weight : bold;
23}
24        </style>

5 jQuery: Using hosted jQuery library.

To use jQuery, CDN(Content Distribution Network) is useful.
This sample uses the Google Libraries API.

Code
05        <script src="https://www.google.com/jsapi?key=<!-- Change key to "your key"-->" type="text/javascript"></script>
06        <script type="text/javascript">google.load("jquery", "1.6.1");</script>
For more informations

Private Sub Sample()\n\t' This is sample\n\n\tDo something...\n\nEnd Sub\n

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n\t<head>\n\t\t<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n\t\t<script src="https://www.google.com/jsapi?key=<!-- Change key to "your key"-->" type="text/javascript"></script>\n\t\t<script type="text/javascript">google.load("jquery", "1.6.1");</script>\n\t\t<title>Copy the source code into the clipboard</title>\n\t\t<style type="text/css">\n[id|=container]{\n\tdisplay : none;\n}\n[id|=sourceToClipboard]{\n\tcolor : #333366 !important;\n\tfloat : right;\n\tfont-weight : bold;\n}\n[id|=sourceToClipboard]:hover{\n\ttext-decoration : underline;\n\tcursor : pointer;\n\tcolor : #333366 !important;\n\tfloat : right;\n\tfont-weight : bold;\n}\n\t\t</style>\n\t\t<script type="text/javascript">\n$(function(){\n\t$("[id^='sourceToClipboard'").click(function () {\n\t\tvar source = $("[id^='container'] p." + $(this).attr("class")).text();\n\t\tsource = source.replace(/¥¥n/g, "¥r¥n");\n\t\tsource = source.replace(/¥¥t/g, "¥t");\n\t\tsource = source.replace(/¥¥s/g, " ");\n\t\tclipboardData.setData("Text", source);\n\t\talert("Now source is in your clipboard.");\n\t});\n});\n\t\t</script>\n\t</head>\n\t<body>\n\t\t<p>Following is sample code.</p>\n\t\t<div class="codeheader">Code <span id="sourceToClipboard-clipboardsample" class="clipboardsample">Copy to clipboard</span></div>\n\t\t<div class="code">\n\t\t\t<div>Private Sub Sample()</div>\n\t\t\t<div>\t' This is sample</div>\n\t\t\t<div></div>\n\t\t\t<div>\tDo something...</div>\n\t\t\t<div></div>\n\t\t\t<div>End Sub</div>\n\t\t</div>\n\t\t<div id="container-clipboardsample">\n\t\t\t<p class="clipboardsample">Private Sub Sample()¥n¥t' This is sample¥n¥n¥tDo something...¥n¥nEnd Sub¥n</p>\n\t\t</div>\n\t</body>\n</html>

Posted by timberlandchapel | with no comments
Filed under: