Mercurial > hg > Papers > 2014 > masakoha-thesis > final
changeset 13:ff5c2b4ca18a
add slide
| author | Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp> |
|---|---|
| date | Tue, 28 Jan 2014 00:48:21 +0900 |
| parents | c623c0453fc1 |
| children | 0e7c972b5ca1 |
| files | paper/OUTLINE paper/chapter1.tex paper/chapter2.tex paper/fig/fig.graffle paper/thesis-paper.pdf paper/thesis-paper.tex slide/images/concurrent.png slide/index.html slide/prettify.js slide/slides.js slide/styles.css |
| diffstat | 11 files changed, 3174 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/paper/OUTLINE Sat Jan 25 10:15:58 2014 +0900 +++ b/paper/OUTLINE Tue Jan 28 00:48:21 2014 +0900 @@ -1,4 +1,4 @@ -Title : Cerium の並列処理向け I/O の設計と実装 +Title : Cerium による並列処理向け I/O の設計と実装 第1章 研究背景と目的 1.1 研究背景
--- a/paper/chapter1.tex Sat Jan 25 10:15:58 2014 +0900 +++ b/paper/chapter1.tex Tue Jan 28 00:48:21 2014 +0900 @@ -9,8 +9,7 @@ 近年、CPU 1 コア当たりのクロック数が頭打ちとなっているので、シングルコアでの処理能力はほとんど上がっていない。 それを解決した結果、シングルコアからマルチコアへの移行によって CPU 性能が向上している。 しかし、マルチコア CPU を最大限に活かすためには、並列プログラミングによる並列度を向上させなければならない。 - -現在のプログラミング手法だと並列プログラミングが難しいので、当研究室では Cerium Library を提供することによって並列プログラミングを容易にしている。 +そこで当研究室では Cerium Library を提供することによって並列プログラミングを容易にしている。 \section{研究目的} 先行研究による Task の並列化によって、プログラム全体の処理速度は飛躍的に向上しているが\cite{kinjyo} 、
--- a/paper/chapter2.tex Sat Jan 25 10:15:58 2014 +0900 +++ b/paper/chapter2.tex Tue Jan 28 00:48:21 2014 +0900 @@ -5,12 +5,88 @@ Cerium Task Manager では、並列処理を Task 単位で記述する。 関数やサブルーチンをそれぞれ Task として扱い、 Task には Input Data 、 Output Data 及び依存関係を設定することができる。 設定された Task は Cerium Task Manager によって管理され、実行される。 -(図\ref{fig:createTask}) +(図\ref{fig:createTask}の説明)図\ref{fig:createTask} \begin{figure}[htbp] \begin{center} -\includegraphics[width=0.5\textwidth]{fig/createTask.pdf} +\includegraphics[width=0.7\textwidth]{fig/createTask1.pdf} \end{center} \caption{Cerium Task Manager} \label{fig:createTask} \end{figure} +\subsection{Task の生成} +input data を 2つ準備してそれら同士を乗算し、output data に格納する multiply という例題がある。 +その例題の Task 生成部分を以下に示す。 + +\begin{verbatim} +multi_init(TaskManager *manager) +{ + HTask* multiply = manager->create_task(MULTIPLY_TASK); + multiply->set_cpu(SPE_ANY); + multiply->set_inData(0, i_data1, sizeof(float)*length); + multiply->set_inData(1, i_data2, sizeof(float)*length); + multiply->set_outData(0, 0_data1, sizeof(float)*length); + multiply->set_param(0,(long)length); + multiply->spawn(); +} +\end{verbatim} + +\begin{tiny} + \begin{table}[ht] + \begin{center} + \caption{Task 生成における API} + \label{table:create_taskAPI} + \small + \begin{tabular}[t]{c|l} + \hline + create\_task& task を生成する \\ + \hline + set\_inData & Task への入力データのアドレスを追加 \\ + \hline + set\_outData & Task への入力データのアドレスを追加 \\ + \hline + set\_param & Task へ値を一つ渡す。ここでは length \\ + \hline + set\_cpu & Task を実行するデバイスの設定 \\ + \hline + spawn& 生成した Task を ActiveTaskList に登録 \\ + \hline + \end{tabular} + \end{center} + \end{table} +\end{tiny} + +Task の記述は以下のようになる。 +\begin{verbatim} +static int +run(SchedTask *s,void *rbuf, void *wbuf) +{ + float indata1=(float*)s->get_input(rbuf,0); + float indata2=(float*)s->get_input(rbuf,1); + float outdata=(float*)s->get_output(wbuf,0); + long length=(long)s->get_param(0); + for (int i=0;i<length;i++) { + outdata[i]=indata1[i]*indata2[i]; + } + return 0; +} +\end{verbatim} + +\begin{tiny} + \begin{table}[ht] + \begin{center} + \caption{Task 側で使用する API} + \label{table:taskAPI} + \small + \begin{tabular}[t]{c|l} + \hline + get\_input & Scheduler から input data を取得 \\ + \hline + get\_output & Scheduler から output data を取得 \\ + \hline + get\_param & set\_param した値を取得 \\ + \hline + \end{tabular} + \end{center} + \end{table} +\end{tiny}
--- a/paper/fig/fig.graffle Sat Jan 25 10:15:58 2014 +0900 +++ b/paper/fig/fig.graffle Tue Jan 28 00:48:21 2014 +0900 @@ -52,6 +52,55 @@ <key>GraphicsList</key> <array> <dict> + <key>Bounds</key> + <string>{{117, 9}, {82, 28}}</string> + <key>Class</key> + <string>ShapedGraphic</string> + <key>FitText</key> + <string>Vertical</string> + <key>Flow</key> + <string>Resize</string> + <key>ID</key> + <integer>54</integer> + <key>Shape</key> + <string>Rectangle</string> + <key>Style</key> + <dict> + <key>fill</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>shadow</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + <key>stroke</key> + <dict> + <key>Draws</key> + <string>NO</string> + </dict> + </dict> + <key>Text</key> + <dict> + <key>Align</key> + <integer>0</integer> + <key>Pad</key> + <integer>0</integer> + <key>Text</key> + <string>{\rtf1\ansi\ansicpg932\cocoartf1265 +\cocoascreenfonts1{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf0 1:createtask()\ +2:spawn()}</string> + <key>VerticalPad</key> + <integer>0</integer> + </dict> + </dict> + <dict> <key>Class</key> <string>LineGraphic</string> <key>Head</key> @@ -676,7 +725,7 @@ <key>MasterSheets</key> <array/> <key>ModificationDate</key> - <string>2014-01-25 01:13:29 +0000</string> + <string>2014-01-25 01:20:31 +0000</string> <key>Modifier</key> <string>MasaKoha</string> <key>NotesVisible</key> @@ -752,7 +801,7 @@ <key>ExpandedCanvases</key> <array/> <key>Frame</key> - <string>{{9, -21}, {694, 878}}</string> + <string>{{733, -41}, {694, 878}}</string> <key>ListView</key> <true/> <key>OutlineWidth</key>
--- a/paper/thesis-paper.tex Sat Jan 25 10:15:58 2014 +0900 +++ b/paper/thesis-paper.tex Tue Jan 28 00:48:21 2014 +0900 @@ -4,7 +4,7 @@ \usepackage{multirow} \usepackage{here} \setlength{\itemsep}{-1zh} -\title{Cerium による並列 I/O の実装} +\title{Cerium による並列処理向け I/O の設計と実装} \icon{ \includegraphics[width=80mm,bb=0 0 595 642]{fig/ryukyu.pdf} }
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/slide/index.html Tue Jan 28 00:48:21 2014 +0900 @@ -0,0 +1,388 @@ +<!DOCTYPE html> + +<html> + <head> + <title>Presentation</title> + + <meta charset='utf-8'> + <script + src='./slides.js'></script> + </head> + + <style> + /* Your individual styles here, or just use inline styles if that’s + what you want. */ + + </style> + + <body style='display: none'> + <section class='slides layout-regular template-default'> + + <!-- + Your slides (<article>s) go here. Delete or comment out the + slides below. + --> + <article > + <h1>Cerium TaskManagerのGPGPUのサポート</h1> + <h3 class="title">Yuhi TOMARI 21 Feb 2013</h3> + <div align="right">担当教官 : 河野 真治</div> + </article> + <article > + <h3>研究概要</h3> + <p> + 当研究室ではCellおよびLinux、 + Mac OSX上で動く並列プログラミングフレームワーク、 + Ceriumの開発・改良を行っている + </p> + <img src='images/cerium_resource.png' style="height:300px"> + <p> + <font color="#ff3300">本研究では新たにGPU上での並列実行に対応</font> + </p> + <p> + これによりヘテロジニアス(異種混合)環境下<br>でのプログラミングをサポートする + </p> + + <!-- + <p> + CeriumにOpenCLを組み込む事でGpu上での並列実行にも対応すると、 + CPU・GPUそれぞれにtaskを割り振ることが可能となる。</p> + <p> + これにより、ヘテロジニアス(異種混合)な環境で + それぞれのアーキテクチャに適したプログラミングをサポートする。 + </p> + --> + + </article> + <article> + <h3>OpenCLによるGPGPUへの対応</h3> + <p> + OpenCLは + ヘテロジニアス環境での並列計算を支援するフレームワーク + </p> + <table border="0" cellpadding="0" cellspacing="0"> + <tbody> + <tr> + <td><img src='images/opencl.png' style="height:120px"></td> + <td> + <p> + OpenCLのtaskはkernelと呼ばれ、OpenCL Cという + Cに似た独自の言語で記述される + </p> + </td> + </tr> + </tbody> + </table> + <p> + <h3 class='yellow'>CPU/Cell上で実行する場合とGPU上で実行する場合、<br> + それぞれほぼ同じ形式でkernelを記述できる</h3> + </p> + </article> + <article> + <h3>Cerium Task Manager</h3> + <table border="0" cellpadding="0" cellspacing="0"> + <tbody> + <tr> + <td><img src='images/createtask.png' style="height:350px"></td> + <td> + <ol> + <li>Taskを生成</li> + <li>依存関係のチェック</li> + <li>Schedulerに転送</li> + <li>並列実行</li> + </ol> + </td> + </tr> + </tbody> + </table> + <p> + CpuThreads、Schedulerに対応させる形でGpuThreadsとGpuSchedulerを作成した + </p> + </article> + <article class="nobackground"> + <h3>GPUのアーキテクチャ</h3> + <table border="0" cellpadding="0" cellspacing="0"> + <tbody> + <tr> + <td><img src='images/gpu_arch.png' style="height:400px"></td> + <td> + <p> + GPU上のローカルメモリはCPUとメモリ空間が異なるのでメモリの共有ができない。 + </p> + </td> + </tr> + </tbody> + </table> + <p> + メモリのコピー処理やTaskを順にCommand Queueに + enqueueする。enqueueされた処理は並列実行される + </article> + <article> + <h3>GPU Task実行の流れ</h3> + <br> + <h3 class="yellow">kernel fileの記述</h3> +<pre>__kernel void // kernel.cl(kernel file) +twice(__global int *input_data,__global int *output_data) { + long count = (long)data_count[0]; + for (int i = 0; i< count; i++) { + output_data[i] = input_data[i] * 2;; + } +} +</pre> + </article> + <article> + <h3>GPU Task 実行の流れ</h3> + <br> + <h3 class="yellow">kernelをTaskとしてCeriumに登録</h3> + <pre>void +task_init(void) { // task_init.cc + GpuSchedRegister(Twice, "./twice.cl", "twice"); +}</pre> + <table border="2" style="font-size:18pt;"> + <tbody> + <tr> + <td> 第1引数<br>Twice</td> + <td >Taskのid。enumで定義されている<br>TaskManagerはこの値でTaskを識別する</td> + </tr> + <tr> + <td> 第2引数<br>"./twice.cl"</td> + <td>OpenCLが処理するkernelが記述されているファイルのパス</td> + </tr> + <tr> + <td> 第3引数<br>"twice"</td> + <td >関数の指定。kernel file内にある、実行する関数名を指定<br> + Taskにあたる部分</td> + </tr> + </tbody> + </table> + </article> + <article class="nobackground"> + <h3>GPU Task 実行の流れ</h3><br> + <h3 class="yellow">GPU Task生成</h3> +<pre>// main.cc +HTaskPtr twice = manager->create_task(Twice); +twice->set_inData(0, indata, sizeof (int)*length); +// twice->set_inData(1, indata2, sizeof (int)*length); +twice->set_outData(0, outdata, sizeof (int)*length); +twice->set_cpu(GPU); +twice->spawn(); + </pre> + </article> + + + <article> + <h3>Cerium OpenCL API比較</h3> + <img src='images/api.png' style="height:500px"> + </article> + <article class="nobackground"> + <h3>ベンチマーク</h3> + <table > + <tbody> + <tr> + <td> <!-- benchmark --> + <table border="2" style="font-size:18pt;"> + <tbody> + <tr> + <td bgcolor="#8091B5"></td> + <td style="text-align: center;">Time</td> + </tr> + <tr> + <td style="text-align: center;">1 CPU</td> + <td style="text-align: right;"> 796 ms</td> + </tr> + <tr> + <td style="text-align: center;">2 CPU</td> + <td style="text-align: right;"> 439 ms</td> + </tr> + <tr> + <td style="text-align: center;">6 CPU</td> + <td style="text-align: right;"> 153 ms</td> + </tr> + <tr> + <td style="text-align: center;">12 CPU</td> + <td style="text-align: right;"> 96 ms</td> + </tr> + <tr> + <td style="text-align: center;">24 CPU</td> + <td style="text-align: right;"> 89 ms</td> + </tr> + <tr> + <td style="text-align: center;" bgcolor="#ffffcc">GPU(改良前)</td> + <td style="text-align: right; " bgcolor="#ffffcc"> 330752 ms</td> + </tr> + <tr> + <td style="text-align: center;" bgcolor="#ffffcc">GPU(改良後)</td> + <td style="text-align: right;" bgcolor="#ffffcc"> 5306 ms</td> + </tr> + </tbody> + </table> + </td> <!-- /benchmark --> + <td> <!-- system env --> + <h3 class="yellow">10万入力によるBitonic Sort</h3> + <font size="5"> + <p>実験環境</p> + OS : MacOS 10.8.2<br> + CPU : 2*2.66GHz 6-CoreIntel Xeon<br> + Memory : 16GB<br> + Compiler : Apple clang version 4.1 <br> (based on LLVM 3.1svn)<br> + GPU : AMD ATI Radeon HD 5870 1024MB<br> + </font> + <h3 class="yellow">結果</h3> + 1coreのCPUよりも10倍遅い + </td> <!--system env --> + </tr> + </tbody> + </table> + <p> + 充分な性能が出なかったため、一度に送信する + data のサイズを増やす改善を行ったところ、 + <font color="red">約60倍</font>程実行速度が向上した + </p> + </article> + <article> + <h3>考察</h3> + <p> + 性能向上は見られたが、CPUと比べると未だ差が開いている + GPU向けに適切なチューニングが今後の課題となる + </p><br> + <h3 class="yellow">改善案</h3> + <ul> + <li>データ並列によるkernelの実行</li> + <li>同期機構の見直し</li> + </ul> + </article> + <article> + <h3>データ並列</h3> + <p> + データを2、3次元に分割し、分割した部分に対して並列処理する並列化手法。 + </p> + <p> + OpenCL ではin/outするデータ郡をWork Itemと呼ぶ。 + </p> + <table border="0" cellpadding="0" cellspacing="0"> + <tbody> + <tr> + <td><img src='images/ndrange_arch.png' style="height:350px"></td> + <td>各Work Item のサイズを指定するとOpenCLがデータ並列で実行する。</td> + </tr> + </tbody> + </table> + </article> + <article> + <h3>同期機構</h3> + <p> + GpuSchedulerはCommand Queueの内部でパイプライン的に実行を行っている。 + パイプラインを構成するには処理にwaitをかける必要がある。現在はclWaitForEvent APIを使用 + </p> + <table border="0" cellpadding="0" cellspacing="0"> + <tbody> + <tr> + <td bgcolor="#8091B5"><font color="white">API</font></td> + <td>機能</td> + </tr> + <tr> + <td bgcolor="#8091B5"><font color="white">clFlush()</font></td> + <td>Command Queueに投入したTask全てをDeviceで実行する</td> + </tr> + <tr> + <td bgcolor="#8091B5"><font color="white">clWaitForEvent()</font></td> + <td>特定の処理の終了を待つ</td> + </tr> + </tbody> + </table> + <p>clFlushは実行は保証するが、<font color="red">終了は保証しない</font>仕様になっている</p> + </article> + <article> + <h3>新しい同期</h3> + <table border="0" cellpadding="0" cellspacing="0"> + <tbody> + <tr> + <td bgcolor="#8091B5"><font color="white">FrameWork</font></td> + <td>Dependency</td> + </tr> + <tr> + <td bgcolor="#8091B5"><font color="white">Cerium</font></td> + <td>Task Dependency</td> + </tr> + <tr> + <td bgcolor="#8091B5"><font color="white">OpenCL</font></td> + <td>Data Dependency</td> + </tr> + </tbody> + </table> + <p> + Task Dependency:Schedulerで依存関係が決定<br> + Data Dependency:GPUに読み込まれた時に決定 + </p> + <p> + GPGPUはなるべくGPU内部で処理を行う方が高速なため、性能向上が見込める + </p> + </article> + <article> + <h3>まとめ</h3> + <ul> + <li>Cerium Task ManagerをGPGPUに対応</li> + <li>同期機構の実装</li> + <li>マルチコア実行とGPU実行のベンチマーク</li> + </ul> + <h3 class="yellow">今後の課題</h3> + <ul> + <li>データ並列による実行のサポート</li> + <li>同期機構の見直し</li> + </ul> + </article> + <article> + <h3>ベンチマーク</h3> + <table > + <tbody> + <tr> + <td> <!-- benchmark --> + <table border="2" style="font-size:18pt;"> + <tbody> + <tr> + <td bgcolor="#8091B5"></td> + <td style="text-align: center;">Time</td> + </tr> + <tr> + <td style="text-align: center;">1 CPU</td> + <td style="text-align: right;"> 67 ms</td> + </tr> + <tr> + <td style="text-align: center;">2 CPU</td> + <td style="text-align: right;"> 34 ms</td> + </tr> + <tr> + <td style="text-align: center;">6 CPU</td> + <td style="text-align: right;"> 12 ms</td> + </tr> + <tr> + <td style="text-align: center;">12 CPU</td> + <td style="text-align: right;"> 9 ms</td> + </tr> + <tr> + <td style="text-align: center;">24 CPU</td> + <td style="text-align: right;"> 6 ms</td> + </tr> + <tr> + <td style="text-align: center;" bgcolor="#ffffcc">GPU</td> + <td style="text-align: right;" bgcolor="#ffffcc"> 10201 ms</td> + </tr> + </tbody> + </table> + </td> <!-- /benchmark --> + <td> <!-- system env --> + <h3 class="yellow">word count</h3> + <font size="5"> + <p>10MBのテキストファイルを分割<br> + 各Taskがcountしていく</p> + <p>スペースと改行区切りでword countしていく</p> + </font> + <h3 class="yellow">結果</h3> + CPUの方が150倍早い + </td> <!--system env --> + </tr> + </tbody> + </table> + </article> + <!--- <img src='images/flow_chart.jpg' width="300" height="500"> --> + </body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/slide/prettify.js Tue Jan 28 00:48:21 2014 +0900 @@ -0,0 +1,1391 @@ +// Copyright (C) 2006 Google Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +/** + * @fileoverview + * some functions for browser-side pretty printing of code contained in html. + * + * <p> + * For a fairly comprehensive set of languages see the + * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a> + * file that came with this source. At a minimum, the lexer should work on a + * number of languages including C and friends, Java, Python, Bash, SQL, HTML, + * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk + * and a subset of Perl, but, because of commenting conventions, doesn't work on + * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class. + * <p> + * Usage: <ol> + * <li> include this source file in an html page via + * {@code <script type="text/javascript" src="/path/to/prettify.js"></script>} + * <li> define style rules. See the example page for examples. + * <li> mark the {@code <pre>} and {@code <code>} tags in your source with + * {@code class=prettyprint.} + * You can also use the (html deprecated) {@code <xmp>} tag, but the pretty + * printer needs to do more substantial DOM manipulations to support that, so + * some css styles may not be preserved. + * </ol> + * That's it. I wanted to keep the API as simple as possible, so there's no + * need to specify which language the code is in, but if you wish, you can add + * another class to the {@code <pre>} or {@code <code>} element to specify the + * language, as in {@code <pre class="prettyprint lang-java">}. Any class that + * starts with "lang-" followed by a file extension, specifies the file type. + * See the "lang-*.js" files in this directory for code that implements + * per-language file handlers. + * <p> + * Change log:<br> + * cbeust, 2006/08/22 + * <blockquote> + * Java annotations (start with "@") are now captured as literals ("lit") + * </blockquote> + * @requires console + */ + +// JSLint declarations +/*global console, document, navigator, setTimeout, window */ + +/** + * Split {@code prettyPrint} into multiple timeouts so as not to interfere with + * UI events. + * If set to {@code false}, {@code prettyPrint()} is synchronous. + */ +window['PR_SHOULD_USE_CONTINUATION'] = true; + +/** the number of characters between tab columns */ +window['PR_TAB_WIDTH'] = 8; + +/** Contains functions for creating and registering new language handlers. + * @type {Object} + */ +window['PR'] + +/** Pretty print a chunk of code. + * + * @param {string} sourceCodeHtml code as html + * @return {string} code as html, but prettier + */ + = window['prettyPrintOne'] +/** Find all the {@code <pre>} and {@code <code>} tags in the DOM with + * {@code class=prettyprint} and prettify them. + * @param {Function?} opt_whenDone if specified, called when the last entry + * has been finished. + */ + = window['prettyPrint'] = void 0; + + +(function () { + // Keyword lists for various languages. + var FLOW_CONTROL_KEYWORDS = + "break continue do else for if return while "; + var C_KEYWORDS = FLOW_CONTROL_KEYWORDS + "auto case char const default " + + "double enum extern float goto int long register short signed sizeof " + + "static struct switch typedef union unsigned void volatile "; + var COMMON_KEYWORDS = C_KEYWORDS + "catch class delete false import " + + "new operator private protected public this throw true try typeof "; + var CPP_KEYWORDS = COMMON_KEYWORDS + "alignof align_union asm axiom bool " + + "concept concept_map const_cast constexpr decltype " + + "dynamic_cast explicit export friend inline late_check " + + "mutable namespace nullptr reinterpret_cast static_assert static_cast " + + "template typeid typename using virtual wchar_t where "; + var JAVA_KEYWORDS = COMMON_KEYWORDS + + "abstract boolean byte extends final finally implements import " + + "instanceof null native package strictfp super synchronized throws " + + "transient "; + var CSHARP_KEYWORDS = JAVA_KEYWORDS + + "as base by checked decimal delegate descending dynamic event " + + "fixed foreach from group implicit in interface internal into is lock " + + "object out override orderby params partial readonly ref sbyte sealed " + + "stackalloc string select uint ulong unchecked unsafe ushort var "; + var COFFEE_KEYWORDS = "all and by catch class else extends false finally " + + "for if in is isnt loop new no not null of off on or return super then " + + "true try unless until when while yes "; + var JSCRIPT_KEYWORDS = COMMON_KEYWORDS + + "debugger eval export function get null set undefined var with " + + "Infinity NaN "; + var PERL_KEYWORDS = "caller delete die do dump elsif eval exit foreach for " + + "goto if import last local my next no our print package redo require " + + "sub undef unless until use wantarray while BEGIN END "; + var PYTHON_KEYWORDS = FLOW_CONTROL_KEYWORDS + "and as assert class def del " + + "elif except exec finally from global import in is lambda " + + "nonlocal not or pass print raise try with yield " + + "False True None "; + var RUBY_KEYWORDS = FLOW_CONTROL_KEYWORDS + "alias and begin case class def" + + " defined elsif end ensure false in module next nil not or redo rescue " + + "retry self super then true undef unless until when yield BEGIN END "; + var SH_KEYWORDS = FLOW_CONTROL_KEYWORDS + "case done elif esac eval fi " + + "function in local set then until "; + var ALL_KEYWORDS = ( + CPP_KEYWORDS + CSHARP_KEYWORDS + JSCRIPT_KEYWORDS + PERL_KEYWORDS + + PYTHON_KEYWORDS + RUBY_KEYWORDS + SH_KEYWORDS); + + // token style names. correspond to css classes + /** token style for a string literal */ + var PR_STRING = 'str'; + /** token style for a keyword */ + var PR_KEYWORD = 'kwd'; + /** token style for a comment */ + var PR_COMMENT = 'com'; + /** token style for a type */ + var PR_TYPE = 'typ'; + /** token style for a literal value. e.g. 1, null, true. */ + var PR_LITERAL = 'lit'; + /** token style for a punctuation string. */ + var PR_PUNCTUATION = 'pun'; + /** token style for a punctuation string. */ + var PR_PLAIN = 'pln'; + + /** token style for an sgml tag. */ + var PR_TAG = 'tag'; + /** token style for a markup declaration such as a DOCTYPE. */ + var PR_DECLARATION = 'dec'; + /** token style for embedded source. */ + var PR_SOURCE = 'src'; + /** token style for an sgml attribute name. */ + var PR_ATTRIB_NAME = 'atn'; + /** token style for an sgml attribute value. */ + var PR_ATTRIB_VALUE = 'atv'; + + /** + * A class that indicates a section of markup that is not code, e.g. to allow + * embedding of line numbers within code listings. + */ + var PR_NOCODE = 'nocode'; + + /** A set of tokens that can precede a regular expression literal in + * javascript. + * http://www.mozilla.org/js/language/js20/rationale/syntax.html has the full + * list, but I've removed ones that might be problematic when seen in + * languages that don't support regular expression literals. + * + * <p>Specifically, I've removed any keywords that can't precede a regexp + * literal in a syntactically legal javascript program, and I've removed the + * "in" keyword since it's not a keyword in many languages, and might be used + * as a count of inches. + * + * <p>The link a above does not accurately describe EcmaScript rules since + * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works + * very well in practice. + * + * @private + */ + var REGEXP_PRECEDER_PATTERN = function () { + var preceders = [ + "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=", + "&=", "(", "*", "*=", /* "+", */ "+=", ",", /* "-", */ "-=", + "->", /*".", "..", "...", handled below */ "/", "/=", ":", "::", ";", + "<", "<<", "<<=", "<=", "=", "==", "===", ">", + ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[", + "^", "^=", "^^", "^^=", "{", "|", "|=", "||", + "||=", "~" /* handles =~ and !~ */, + "break", "case", "continue", "delete", + "do", "else", "finally", "instanceof", + "return", "throw", "try", "typeof" + ]; + var pattern = '(?:^^|[+-]'; + for (var i = 0; i < preceders.length; ++i) { + pattern += '|' + preceders[i].replace(/([^=<>:&a-z])/g, '\\$1'); + } + pattern += ')\\s*'; // matches at end, and matches empty string + return pattern; + // CAVEAT: this does not properly handle the case where a regular + // expression immediately follows another since a regular expression may + // have flags for case-sensitivity and the like. Having regexp tokens + // adjacent is not valid in any language I'm aware of, so I'm punting. + // TODO: maybe style special characters inside a regexp as punctuation. + }(); + + + /** + * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally + * matches the union of the sets of strings matched by the input RegExp. + * Since it matches globally, if the input strings have a start-of-input + * anchor (/^.../), it is ignored for the purposes of unioning. + * @param {Array.<RegExp>} regexs non multiline, non-global regexs. + * @return {RegExp} a global regex. + */ + function combinePrefixPatterns(regexs) { + var capturedGroupIndex = 0; + + var needToFoldCase = false; + var ignoreCase = false; + for (var i = 0, n = regexs.length; i < n; ++i) { + var regex = regexs[i]; + if (regex.ignoreCase) { + ignoreCase = true; + } else if (/[a-z]/i.test(regex.source.replace( + /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) { + needToFoldCase = true; + ignoreCase = false; + break; + } + } + + function decodeEscape(charsetPart) { + if (charsetPart.charAt(0) !== '\\') { return charsetPart.charCodeAt(0); } + switch (charsetPart.charAt(1)) { + case 'b': return 8; + case 't': return 9; + case 'n': return 0xa; + case 'v': return 0xb; + case 'f': return 0xc; + case 'r': return 0xd; + case 'u': case 'x': + return parseInt(charsetPart.substring(2), 16) + || charsetPart.charCodeAt(1); + case '0': case '1': case '2': case '3': case '4': + case '5': case '6': case '7': + return parseInt(charsetPart.substring(1), 8); + default: return charsetPart.charCodeAt(1); + } + } + + function encodeEscape(charCode) { + if (charCode < 0x20) { + return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16); + } + var ch = String.fromCharCode(charCode); + if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') { + ch = '\\' + ch; + } + return ch; + } + + function caseFoldCharset(charSet) { + var charsetParts = charSet.substring(1, charSet.length - 1).match( + new RegExp( + '\\\\u[0-9A-Fa-f]{4}' + + '|\\\\x[0-9A-Fa-f]{2}' + + '|\\\\[0-3][0-7]{0,2}' + + '|\\\\[0-7]{1,2}' + + '|\\\\[\\s\\S]' + + '|-' + + '|[^-\\\\]', + 'g')); + var groups = []; + var ranges = []; + var inverse = charsetParts[0] === '^'; + for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) { + var p = charsetParts[i]; + switch (p) { + case '\\B': case '\\b': + case '\\D': case '\\d': + case '\\S': case '\\s': + case '\\W': case '\\w': + groups.push(p); + continue; + } + var start = decodeEscape(p); + var end; + if (i + 2 < n && '-' === charsetParts[i + 1]) { + end = decodeEscape(charsetParts[i + 2]); + i += 2; + } else { + end = start; + } + ranges.push([start, end]); + // If the range might intersect letters, then expand it. + if (!(end < 65 || start > 122)) { + if (!(end < 65 || start > 90)) { + ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]); + } + if (!(end < 97 || start > 122)) { + ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]); + } + } + } + + // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]] + // -> [[1, 12], [14, 14], [16, 17]] + ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1] - a[1]); }); + var consolidatedRanges = []; + var lastRange = [NaN, NaN]; + for (var i = 0; i < ranges.length; ++i) { + var range = ranges[i]; + if (range[0] <= lastRange[1] + 1) { + lastRange[1] = Math.max(lastRange[1], range[1]); + } else { + consolidatedRanges.push(lastRange = range); + } + } + + var out = ['[']; + if (inverse) { out.push('^'); } + out.push.apply(out, groups); + for (var i = 0; i < consolidatedRanges.length; ++i) { + var range = consolidatedRanges[i]; + out.push(encodeEscape(range[0])); + if (range[1] > range[0]) { + if (range[1] + 1 > range[0]) { out.push('-'); } + out.push(encodeEscape(range[1])); + } + } + out.push(']'); + return out.join(''); + } + + function allowAnywhereFoldCaseAndRenumberGroups(regex) { + // Split into character sets, escape sequences, punctuation strings + // like ('(', '(?:', ')', '^'), and runs of characters that do not + // include any of the above. + var parts = regex.source.match( + new RegExp( + '(?:' + + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]' // a character set + + '|\\\\u[A-Fa-f0-9]{4}' // a unicode escape + + '|\\\\x[A-Fa-f0-9]{2}' // a hex escape + + '|\\\\[0-9]+' // a back-reference or octal escape + + '|\\\\[^ux0-9]' // other escape sequence + + '|\\(\\?[:!=]' // start of a non-capturing group + + '|[\\(\\)\\^]' // start/emd of a group, or line start + + '|[^\\x5B\\x5C\\(\\)\\^]+' // run of other characters + + ')', + 'g')); + var n = parts.length; + + // Maps captured group numbers to the number they will occupy in + // the output or to -1 if that has not been determined, or to + // undefined if they need not be capturing in the output. + var capturedGroups = []; + + // Walk over and identify back references to build the capturedGroups + // mapping. + for (var i = 0, groupIndex = 0; i < n; ++i) { + var p = parts[i]; + if (p === '(') { + // groups are 1-indexed, so max group index is count of '(' + ++groupIndex; + } else if ('\\' === p.charAt(0)) { + var decimalValue = +p.substring(1); + if (decimalValue && decimalValue <= groupIndex) { + capturedGroups[decimalValue] = -1; + } + } + } + + // Renumber groups and reduce capturing groups to non-capturing groups + // where possible. + for (var i = 1; i < capturedGroups.length; ++i) { + if (-1 === capturedGroups[i]) { + capturedGroups[i] = ++capturedGroupIndex; + } + } + for (var i = 0, groupIndex = 0; i < n; ++i) { + var p = parts[i]; + if (p === '(') { + ++groupIndex; + if (capturedGroups[groupIndex] === undefined) { + parts[i] = '(?:'; + } + } else if ('\\' === p.charAt(0)) { + var decimalValue = +p.substring(1); + if (decimalValue && decimalValue <= groupIndex) { + parts[i] = '\\' + capturedGroups[groupIndex]; + } + } + } + + // Remove any prefix anchors so that the output will match anywhere. + // ^^ really does mean an anchored match though. + for (var i = 0, groupIndex = 0; i < n; ++i) { + if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; } + } + + // Expand letters to groups to handle mixing of case-sensitive and + // case-insensitive patterns if necessary. + if (regex.ignoreCase && needToFoldCase) { + for (var i = 0; i < n; ++i) { + var p = parts[i]; + var ch0 = p.charAt(0); + if (p.length >= 2 && ch0 === '[') { + parts[i] = caseFoldCharset(p); + } else if (ch0 !== '\\') { + // TODO: handle letters in numeric escapes. + parts[i] = p.replace( + /[a-zA-Z]/g, + function (ch) { + var cc = ch.charCodeAt(0); + return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']'; + }); + } + } + } + + return parts.join(''); + } + + var rewritten = []; + for (var i = 0, n = regexs.length; i < n; ++i) { + var regex = regexs[i]; + if (regex.global || regex.multiline) { throw new Error('' + regex); } + rewritten.push( + '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')'); + } + + return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g'); + } + + + /** + * Split markup into a string of source code and an array mapping ranges in + * that string to the text nodes in which they appear. + * + * <p> + * The HTML DOM structure:</p> + * <pre> + * (Element "p" + * (Element "b" + * (Text "print ")) ; #1 + * (Text "'Hello '") ; #2 + * (Element "br") ; #3 + * (Text " + 'World';")) ; #4 + * </pre> + * <p> + * corresponds to the HTML + * {@code <p><b>print </b>'Hello '<br> + 'World';</p>}.</p> + * + * <p> + * It will produce the output:</p> + * <pre> + * { + * source: "print 'Hello '\n + 'World';", + * // 1 2 + * // 012345678901234 5678901234567 + * spans: [0, #1, 6, #2, 14, #3, 15, #4] + * } + * </pre> + * <p> + * where #1 is a reference to the {@code "print "} text node above, and so + * on for the other text nodes. + * </p> + * + * <p> + * The {@code} spans array is an array of pairs. Even elements are the start + * indices of substrings, and odd elements are the text nodes (or BR elements) + * that contain the text for those substrings. + * Substrings continue until the next index or the end of the source. + * </p> + * + * @param {Node} node an HTML DOM subtree containing source-code. + * @return {Object} source code and the text nodes in which they occur. + */ + function extractSourceSpans(node) { + var nocode = /(?:^|\s)nocode(?:\s|$)/; + + var chunks = []; + var length = 0; + var spans = []; + var k = 0; + + var whitespace; + if (node.currentStyle) { + whitespace = node.currentStyle.whiteSpace; + } else if (window.getComputedStyle) { + whitespace = document.defaultView.getComputedStyle(node, null) + .getPropertyValue('white-space'); + } + var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3); + + function walk(node) { + switch (node.nodeType) { + case 1: // Element + if (nocode.test(node.className)) { return; } + for (var child = node.firstChild; child; child = child.nextSibling) { + walk(child); + } + var nodeName = node.nodeName; + if ('BR' === nodeName || 'LI' === nodeName) { + chunks[k] = '\n'; + spans[k << 1] = length++; + spans[(k++ << 1) | 1] = node; + } + break; + case 3: case 4: // Text + var text = node.nodeValue; + if (text.length) { + if (!isPreformatted) { + text = text.replace(/[ \t\r\n]+/g, ' '); + } else { + text = text.replace(/\r\n?/g, '\n'); // Normalize newlines. + } + // TODO: handle tabs here? + chunks[k] = text; + spans[k << 1] = length; + length += text.length; + spans[(k++ << 1) | 1] = node; + } + break; + } + } + + walk(node); + + return { + source: chunks.join('').replace(/\n$/, ''), + spans: spans + }; + } + + + /** + * Apply the given language handler to sourceCode and add the resulting + * decorations to out. + * @param {number} basePos the index of sourceCode within the chunk of source + * whose decorations are already present on out. + */ + function appendDecorations(basePos, sourceCode, langHandler, out) { + if (!sourceCode) { return; } + var job = { + source: sourceCode, + basePos: basePos + }; + langHandler(job); + out.push.apply(out, job.decorations); + } + + /** Given triples of [style, pattern, context] returns a lexing function, + * The lexing function interprets the patterns to find token boundaries and + * returns a decoration list of the form + * [index_0, style_0, index_1, style_1, ..., index_n, style_n] + * where index_n is an index into the sourceCode, and style_n is a style + * constant like PR_PLAIN. index_n-1 <= index_n, and style_n-1 applies to + * all characters in sourceCode[index_n-1:index_n]. + * + * The stylePatterns is a list whose elements have the form + * [style : string, pattern : RegExp, DEPRECATED, shortcut : string]. + * + * Style is a style constant like PR_PLAIN, or can be a string of the + * form 'lang-FOO', where FOO is a language extension describing the + * language of the portion of the token in $1 after pattern executes. + * E.g., if style is 'lang-lisp', and group 1 contains the text + * '(hello (world))', then that portion of the token will be passed to the + * registered lisp handler for formatting. + * The text before and after group 1 will be restyled using this decorator + * so decorators should take care that this doesn't result in infinite + * recursion. For example, the HTML lexer rule for SCRIPT elements looks + * something like ['lang-js', /<[s]cript>(.+?)<\/script>/]. This may match + * '<script>foo()<\/script>', which would cause the current decorator to + * be called with '<script>' which would not match the same rule since + * group 1 must not be empty, so it would be instead styled as PR_TAG by + * the generic tag rule. The handler registered for the 'js' extension would + * then be called with 'foo()', and finally, the current decorator would + * be called with '<\/script>' which would not match the original rule and + * so the generic tag rule would identify it as a tag. + * + * Pattern must only match prefixes, and if it matches a prefix, then that + * match is considered a token with the same style. + * + * Context is applied to the last non-whitespace, non-comment token + * recognized. + * + * Shortcut is an optional string of characters, any of which, if the first + * character, gurantee that this pattern and only this pattern matches. + * + * @param {Array} shortcutStylePatterns patterns that always start with + * a known character. Must have a shortcut string. + * @param {Array} fallthroughStylePatterns patterns that will be tried in + * order if the shortcut ones fail. May have shortcuts. + * + * @return {function (Object)} a + * function that takes source code and returns a list of decorations. + */ + function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) { + var shortcuts = {}; + var tokenizer; + (function () { + var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns); + var allRegexs = []; + var regexKeys = {}; + for (var i = 0, n = allPatterns.length; i < n; ++i) { + var patternParts = allPatterns[i]; + var shortcutChars = patternParts[3]; + if (shortcutChars) { + for (var c = shortcutChars.length; --c >= 0;) { + shortcuts[shortcutChars.charAt(c)] = patternParts; + } + } + var regex = patternParts[1]; + var k = '' + regex; + if (!regexKeys.hasOwnProperty(k)) { + allRegexs.push(regex); + regexKeys[k] = null; + } + } + allRegexs.push(/[\0-\uffff]/); + tokenizer = combinePrefixPatterns(allRegexs); + })(); + + var nPatterns = fallthroughStylePatterns.length; + var notWs = /\S/; + + /** + * Lexes job.source and produces an output array job.decorations of style + * classes preceded by the position at which they start in job.source in + * order. + * + * @param {Object} job an object like {@code + * source: {string} sourceText plain text, + * basePos: {int} position of job.source in the larger chunk of + * sourceCode. + * } + */ + var decorate = function (job) { + var sourceCode = job.source, basePos = job.basePos; + /** Even entries are positions in source in ascending order. Odd enties + * are style markers (e.g., PR_COMMENT) that run from that position until + * the end. + * @type {Array.<number|string>} + */ + var decorations = [basePos, PR_PLAIN]; + var pos = 0; // index into sourceCode + var tokens = sourceCode.match(tokenizer) || []; + var styleCache = {}; + + for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) { + var token = tokens[ti]; + var style = styleCache[token]; + var match = void 0; + + var isEmbedded; + if (typeof style === 'string') { + isEmbedded = false; + } else { + var patternParts = shortcuts[token.charAt(0)]; + if (patternParts) { + match = token.match(patternParts[1]); + style = patternParts[0]; + } else { + for (var i = 0; i < nPatterns; ++i) { + patternParts = fallthroughStylePatterns[i]; + match = token.match(patternParts[1]); + if (match) { + style = patternParts[0]; + break; + } + } + + if (!match) { // make sure that we make progress + style = PR_PLAIN; + } + } + + isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5); + if (isEmbedded && !(match && typeof match[1] === 'string')) { + isEmbedded = false; + style = PR_SOURCE; + } + + if (!isEmbedded) { styleCache[token] = style; } + } + + var tokenStart = pos; + pos += token.length; + + if (!isEmbedded) { + decorations.push(basePos + tokenStart, style); + } else { // Treat group 1 as an embedded block of source code. + var embeddedSource = match[1]; + var embeddedSourceStart = token.indexOf(embeddedSource); + var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length; + if (match[2]) { + // If embeddedSource can be blank, then it would match at the + // beginning which would cause us to infinitely recurse on the + // entire token, so we catch the right context in match[2]. + embeddedSourceEnd = token.length - match[2].length; + embeddedSourceStart = embeddedSourceEnd - embeddedSource.length; + } + var lang = style.substring(5); + // Decorate the left of the embedded source + appendDecorations( + basePos + tokenStart, + token.substring(0, embeddedSourceStart), + decorate, decorations); + // Decorate the embedded source + appendDecorations( + basePos + tokenStart + embeddedSourceStart, + embeddedSource, + langHandlerForExtension(lang, embeddedSource), + decorations); + // Decorate the right of the embedded section + appendDecorations( + basePos + tokenStart + embeddedSourceEnd, + token.substring(embeddedSourceEnd), + decorate, decorations); + } + } + job.decorations = decorations; + }; + return decorate; + } + + /** returns a function that produces a list of decorations from source text. + * + * This code treats ", ', and ` as string delimiters, and \ as a string + * escape. It does not recognize perl's qq() style strings. + * It has no special handling for double delimiter escapes as in basic, or + * the tripled delimiters used in python, but should work on those regardless + * although in those cases a single string literal may be broken up into + * multiple adjacent string literals. + * + * It recognizes C, C++, and shell style comments. + * + * @param {Object} options a set of optional parameters. + * @return {function (Object)} a function that examines the source code + * in the input job and builds the decoration list. + */ + function sourceDecorator(options) { + var shortcutStylePatterns = [], fallthroughStylePatterns = []; + if (options['tripleQuotedStrings']) { + // '''multi-line-string''', 'single-line-string', and double-quoted + shortcutStylePatterns.push( + [PR_STRING, /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/, + null, '\'"']); + } else if (options['multiLineStrings']) { + // 'multi-line-string', "multi-line-string" + shortcutStylePatterns.push( + [PR_STRING, /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/, + null, '\'"`']); + } else { + // 'single-line-string', "single-line-string" + shortcutStylePatterns.push( + [PR_STRING, + /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/, + null, '"\'']); + } + if (options['verbatimStrings']) { + // verbatim-string-literal production from the C# grammar. See issue 93. + fallthroughStylePatterns.push( + [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]); + } + var hc = options['hashComments']; + if (hc) { + if (options['cStyleComments']) { + if (hc > 1) { // multiline hash comments + shortcutStylePatterns.push( + [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']); + } else { + // Stop C preprocessor declarations at an unclosed open comment + shortcutStylePatterns.push( + [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/, + null, '#']); + } + fallthroughStylePatterns.push( + [PR_STRING, + /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/, + null]); + } else { + shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']); + } + } + if (options['cStyleComments']) { + fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]); + fallthroughStylePatterns.push( + [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]); + } + if (options['regexLiterals']) { + var REGEX_LITERAL = ( + // A regular expression literal starts with a slash that is + // not followed by * or / so that it is not confused with + // comments. + '/(?=[^/*])' + // and then contains any number of raw characters, + + '(?:[^/\\x5B\\x5C]' + // escape sequences (\x5C), + + '|\\x5C[\\s\\S]' + // or non-nesting character sets (\x5B\x5D); + + '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+' + // finally closed by a /. + + '/'); + fallthroughStylePatterns.push( + ['lang-regex', + new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')') + ]); + } + + var keywords = options['keywords'].replace(/^\s+|\s+$/g, ''); + if (keywords.length) { + fallthroughStylePatterns.push( + [PR_KEYWORD, + new RegExp('^(?:' + keywords.replace(/\s+/g, '|') + ')\\b'), null]); + } + + shortcutStylePatterns.push([PR_PLAIN, /^\s+/, null, ' \r\n\t\xA0']); + fallthroughStylePatterns.push( + // TODO(mikesamuel): recognize non-latin letters and numerals in idents + [PR_LITERAL, /^@[a-z_$][a-z_$@0-9]*/i, null], + [PR_TYPE, /^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/, null], + [PR_PLAIN, /^[a-z_$][a-z_$@0-9]*/i, null], + [PR_LITERAL, + new RegExp( + '^(?:' + // A hex number + + '0x[a-f0-9]+' + // or an octal or decimal number, + + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)' + // possibly in scientific notation + + '(?:e[+\\-]?\\d+)?' + + ')' + // with an optional modifier like UL for unsigned long + + '[a-z]*', 'i'), + null, '0123456789'], + // Don't treat escaped quotes in bash as starting strings. See issue 144. + [PR_PLAIN, /^\\[\s\S]?/, null], + [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]); + + return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns); + } + + var decorateSource = sourceDecorator({ + 'keywords': ALL_KEYWORDS, + 'hashComments': true, + 'cStyleComments': true, + 'multiLineStrings': true, + 'regexLiterals': true + }); + + /** + * Given a DOM subtree, wraps it in a list, and puts each line into its own + * list item. + * + * @param {Node} node modified in place. Its content is pulled into an + * HTMLOListElement, and each line is moved into a separate list item. + * This requires cloning elements, so the input might not have unique + * IDs after numbering. + */ + function numberLines(node, opt_startLineNum) { + var nocode = /(?:^|\s)nocode(?:\s|$)/; + var lineBreak = /\r\n?|\n/; + + var document = node.ownerDocument; + + var whitespace; + if (node.currentStyle) { + whitespace = node.currentStyle.whiteSpace; + } else if (window.getComputedStyle) { + whitespace = document.defaultView.getComputedStyle(node, null) + .getPropertyValue('white-space'); + } + // If it's preformatted, then we need to split lines on line breaks + // in addition to <BR>s. + var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3); + + var li = document.createElement('LI'); + while (node.firstChild) { + li.appendChild(node.firstChild); + } + // An array of lines. We split below, so this is initialized to one + // un-split line. + var listItems = [li]; + + function walk(node) { + switch (node.nodeType) { + case 1: // Element + if (nocode.test(node.className)) { break; } + if ('BR' === node.nodeName) { + breakAfter(node); + // Discard the <BR> since it is now flush against a </LI>. + if (node.parentNode) { + node.parentNode.removeChild(node); + } + } else { + for (var child = node.firstChild; child; child = child.nextSibling) { + walk(child); + } + } + break; + case 3: case 4: // Text + if (isPreformatted) { + var text = node.nodeValue; + var match = text.match(lineBreak); + if (match) { + var firstLine = text.substring(0, match.index); + node.nodeValue = firstLine; + var tail = text.substring(match.index + match[0].length); + if (tail) { + var parent = node.parentNode; + parent.insertBefore( + document.createTextNode(tail), node.nextSibling); + } + breakAfter(node); + if (!firstLine) { + // Don't leave blank text nodes in the DOM. + node.parentNode.removeChild(node); + } + } + } + break; + } + } + + // Split a line after the given node. + function breakAfter(lineEndNode) { + // If there's nothing to the right, then we can skip ending the line + // here, and move root-wards since splitting just before an end-tag + // would require us to create a bunch of empty copies. + while (!lineEndNode.nextSibling) { + lineEndNode = lineEndNode.parentNode; + if (!lineEndNode) { return; } + } + + function breakLeftOf(limit, copy) { + // Clone shallowly if this node needs to be on both sides of the break. + var rightSide = copy ? limit.cloneNode(false) : limit; + var parent = limit.parentNode; + if (parent) { + // We clone the parent chain. + // This helps us resurrect important styling elements that cross lines. + // E.g. in <i>Foo<br>Bar</i> + // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>. + var parentClone = breakLeftOf(parent, 1); + // Move the clone and everything to the right of the original + // onto the cloned parent. + var next = limit.nextSibling; + parentClone.appendChild(rightSide); + for (var sibling = next; sibling; sibling = next) { + next = sibling.nextSibling; + parentClone.appendChild(sibling); + } + } + return rightSide; + } + + var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0); + + // Walk the parent chain until we reach an unattached LI. + for (var parent; + // Check nodeType since IE invents document fragments. + (parent = copiedListItem.parentNode) && parent.nodeType === 1;) { + copiedListItem = parent; + } + // Put it on the list of lines for later processing. + listItems.push(copiedListItem); + } + + // Split lines while there are lines left to split. + for (var i = 0; // Number of lines that have been split so far. + i < listItems.length; // length updated by breakAfter calls. + ++i) { + walk(listItems[i]); + } + + // Make sure numeric indices show correctly. + if (opt_startLineNum === (opt_startLineNum|0)) { + listItems[0].setAttribute('value', opt_startLineNum); + } + + var ol = document.createElement('OL'); + ol.className = 'linenums'; + var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0; + for (var i = 0, n = listItems.length; i < n; ++i) { + li = listItems[i]; + // Stick a class on the LIs so that stylesheets can + // color odd/even rows, or any other row pattern that + // is co-prime with 10. + li.className = 'L' + ((i + offset) % 10); + if (!li.firstChild) { + li.appendChild(document.createTextNode('\xA0')); + } + ol.appendChild(li); + } + + node.appendChild(ol); + } + + /** + * Breaks {@code job.source} around style boundaries in {@code job.decorations} + * and modifies {@code job.sourceNode} in place. + * @param {Object} job like <pre>{ + * source: {string} source as plain text, + * spans: {Array.<number|Node>} alternating span start indices into source + * and the text node or element (e.g. {@code <BR>}) corresponding to that + * span. + * decorations: {Array.<number|string} an array of style classes preceded + * by the position at which they start in job.source in order + * }</pre> + * @private + */ + function recombineTagsAndDecorations(job) { + var isIE = /\bMSIE\b/.test(navigator.userAgent); + var newlineRe = /\n/g; + + var source = job.source; + var sourceLength = source.length; + // Index into source after the last code-unit recombined. + var sourceIndex = 0; + + var spans = job.spans; + var nSpans = spans.length; + // Index into spans after the last span which ends at or before sourceIndex. + var spanIndex = 0; + + var decorations = job.decorations; + var nDecorations = decorations.length; + // Index into decorations after the last decoration which ends at or before sourceIndex. + var decorationIndex = 0; + + // Simplify decorations. + var decPos = 0; + for (var i = 0; i < nDecorations;) { + // Skip over any zero-length decorations. + var startPos = decorations[i]; + var start = i; + while (start + 2 < nDecorations && decorations[start + 2] === startPos) { + start += 2; + } + // Conflate all adjacent decorations that use the same style. + var startDec = decorations[start + 1]; + var end = start + 2; + while (end + 2 <= nDecorations + && (decorations[end + 1] === startDec + || decorations[end] === decorations[end + 2])) { + end += 2; + } + decorations[decPos++] = startPos; + decorations[decPos++] = startDec; + i = end; + } + + // Strip any zero-length decoration at the end. + if (decPos && decorations[decPos - 2] === sourceLength) { decPos -= 2; } + nDecorations = decorations.length = decPos; + + var decoration = null; + while (spanIndex < nSpans) { + var spanStart = spans[spanIndex]; + var spanEnd = spans[spanIndex + 2] || sourceLength; + + var decStart = decorations[decorationIndex]; + var decEnd = decorations[decorationIndex + 2] || sourceLength; + + var end = Math.min(spanEnd, decEnd); + + var textNode = spans[spanIndex + 1]; + if (textNode.nodeType !== 1) { // Don't muck with <BR>s or <LI>s + var styledText = source.substring(sourceIndex, end); + // This may seem bizarre, and it is. Emitting LF on IE causes the + // code to display with spaces instead of line breaks. + // Emitting Windows standard issue linebreaks (CRLF) causes a blank + // space to appear at the beginning of every line but the first. + // Emitting an old Mac OS 9 line separator makes everything spiffy. + if (isIE) { styledText = styledText.replace(newlineRe, '\r'); } + textNode.nodeValue = styledText; + var document = textNode.ownerDocument; + var span = document.createElement('SPAN'); + span.className = decorations[decorationIndex + 1]; + var parentNode = textNode.parentNode; + parentNode.replaceChild(span, textNode); + span.appendChild(textNode); + if (sourceIndex < spanEnd) { // Split off a text node. + spans[spanIndex + 1] = textNode + // TODO: Possibly optimize by using '' if there's no flicker. + = document.createTextNode(source.substring(end, spanEnd)); + parentNode.insertBefore(textNode, span.nextSibling); + } + } + + sourceIndex = end; + + if (sourceIndex >= spanEnd) { + spanIndex += 2; + } + if (sourceIndex >= decEnd) { + decorationIndex += 2; + } + } + } + + + /** Maps language-specific file extensions to handlers. */ + var langHandlerRegistry = {}; + /** Register a language handler for the given file extensions. + * @param {function (Object)} handler a function from source code to a list + * of decorations. Takes a single argument job which describes the + * state of the computation. The single parameter has the form + * {@code { + * source: {string} as plain text. + * decorations: {Array.<number|string>} an array of style classes + * preceded by the position at which they start in + * job.source in order. + * The language handler should assigned this field. + * basePos: {int} the position of source in the larger source chunk. + * All positions in the output decorations array are relative + * to the larger source chunk. + * } } + * @param {Array.<string>} fileExtensions + */ + function registerLangHandler(handler, fileExtensions) { + for (var i = fileExtensions.length; --i >= 0;) { + var ext = fileExtensions[i]; + if (!langHandlerRegistry.hasOwnProperty(ext)) { + langHandlerRegistry[ext] = handler; + } else if ('console' in window) { + console['warn']('cannot override language handler %s', ext); + } + } + } + function langHandlerForExtension(extension, source) { + if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) { + // Treat it as markup if the first non whitespace character is a < and + // the last non-whitespace character is a >. + extension = /^\s*</.test(source) + ? 'default-markup' + : 'default-code'; + } + return langHandlerRegistry[extension]; + } + registerLangHandler(decorateSource, ['default-code']); + registerLangHandler( + createSimpleLexer( + [], + [ + [PR_PLAIN, /^[^<?]+/], + [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/], + [PR_COMMENT, /^<\!--[\s\S]*?(?:-\->|$)/], + // Unescaped content in an unknown language + ['lang-', /^<\?([\s\S]+?)(?:\?>|$)/], + ['lang-', /^<%([\s\S]+?)(?:%>|$)/], + [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/], + ['lang-', /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i], + // Unescaped content in javascript. (Or possibly vbscript). + ['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i], + // Contains unescaped stylesheet content + ['lang-css', /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i], + ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i] + ]), + ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']); + registerLangHandler( + createSimpleLexer( + [ + [PR_PLAIN, /^[\s]+/, null, ' \t\r\n'], + [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\''] + ], + [ + [PR_TAG, /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i], + [PR_ATTRIB_NAME, /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i], + ['lang-uq.val', /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/], + [PR_PUNCTUATION, /^[=<>\/]+/], + ['lang-js', /^on\w+\s*=\s*\"([^\"]+)\"/i], + ['lang-js', /^on\w+\s*=\s*\'([^\']+)\'/i], + ['lang-js', /^on\w+\s*=\s*([^\"\'>\s]+)/i], + ['lang-css', /^style\s*=\s*\"([^\"]+)\"/i], + ['lang-css', /^style\s*=\s*\'([^\']+)\'/i], + ['lang-css', /^style\s*=\s*([^\"\'>\s]+)/i] + ]), + ['in.tag']); + registerLangHandler( + createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']); + registerLangHandler(sourceDecorator({ + 'keywords': CPP_KEYWORDS, + 'hashComments': true, + 'cStyleComments': true + }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']); + registerLangHandler(sourceDecorator({ + 'keywords': 'null true false' + }), ['json']); + registerLangHandler(sourceDecorator({ + 'keywords': CSHARP_KEYWORDS, + 'hashComments': true, + 'cStyleComments': true, + 'verbatimStrings': true + }), ['cs']); + registerLangHandler(sourceDecorator({ + 'keywords': JAVA_KEYWORDS, + 'cStyleComments': true + }), ['java']); + registerLangHandler(sourceDecorator({ + 'keywords': SH_KEYWORDS, + 'hashComments': true, + 'multiLineStrings': true + }), ['bsh', 'csh', 'sh']); + registerLangHandler(sourceDecorator({ + 'keywords': PYTHON_KEYWORDS, + 'hashComments': true, + 'multiLineStrings': true, + 'tripleQuotedStrings': true + }), ['cv', 'py']); + registerLangHandler(sourceDecorator({ + 'keywords': PERL_KEYWORDS, + 'hashComments': true, + 'multiLineStrings': true, + 'regexLiterals': true + }), ['perl', 'pl', 'pm']); + registerLangHandler(sourceDecorator({ + 'keywords': RUBY_KEYWORDS, + 'hashComments': true, + 'multiLineStrings': true, + 'regexLiterals': true + }), ['rb']); + registerLangHandler(sourceDecorator({ + 'keywords': JSCRIPT_KEYWORDS, + 'cStyleComments': true, + 'regexLiterals': true + }), ['js']); + registerLangHandler(sourceDecorator({ + 'keywords': COFFEE_KEYWORDS, + 'hashComments': 3, // ### style block comments + 'cStyleComments': true, + 'multilineStrings': true, + 'tripleQuotedStrings': true, + 'regexLiterals': true + }), ['coffee']); + registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']); + + function applyDecorator(job) { + var opt_langExtension = job.langExtension; + + try { + // Extract tags, and convert the source code to plain text. + var sourceAndSpans = extractSourceSpans(job.sourceNode); + /** Plain text. @type {string} */ + var source = sourceAndSpans.source; + job.source = source; + job.spans = sourceAndSpans.spans; + job.basePos = 0; + + // Apply the appropriate language handler + langHandlerForExtension(opt_langExtension, source)(job); + + // Integrate the decorations and tags back into the source code, + // modifying the sourceNode in place. + recombineTagsAndDecorations(job); + } catch (e) { + if ('console' in window) { + console['log'](e && e['stack'] ? e['stack'] : e); + } + } + } + + /** + * @param sourceCodeHtml {string} The HTML to pretty print. + * @param opt_langExtension {string} The language name to use. + * Typically, a filename extension like 'cpp' or 'java'. + * @param opt_numberLines {number|boolean} True to number lines, + * or the 1-indexed number of the first line in sourceCodeHtml. + */ + function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) { + var container = document.createElement('PRE'); + // This could cause images to load and onload listeners to fire. + // E.g. <img onerror="alert(1337)" src="nosuchimage.png">. + // We assume that the inner HTML is from a trusted source. + container.innerHTML = sourceCodeHtml; + if (opt_numberLines) { + numberLines(container, opt_numberLines); + } + + var job = { + langExtension: opt_langExtension, + numberLines: opt_numberLines, + sourceNode: container + }; + applyDecorator(job); + return container.innerHTML; + } + + function prettyPrint(opt_whenDone) { + function byTagName(tn) { return document.getElementsByTagName(tn); } + // fetch a list of nodes to rewrite + var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')]; + var elements = []; + for (var i = 0; i < codeSegments.length; ++i) { + for (var j = 0, n = codeSegments[i].length; j < n; ++j) { + elements.push(codeSegments[i][j]); + } + } + codeSegments = null; + + var clock = Date; + if (!clock['now']) { + clock = { 'now': function () { return (new Date).getTime(); } }; + } + + // The loop is broken into a series of continuations to make sure that we + // don't make the browser unresponsive when rewriting a large page. + var k = 0; + var prettyPrintingJob; + + function doWork() { + var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ? + clock.now() + 250 /* ms */ : + Infinity); + for (; k < elements.length && clock.now() < endTime; k++) { + var cs = elements[k]; + if (cs.className && cs.className.indexOf('prettyprint') >= 0) { + // If the classes includes a language extensions, use it. + // Language extensions can be specified like + // <pre class="prettyprint lang-cpp"> + // the language extension "cpp" is used to find a language handler as + // passed to PR.registerLangHandler. + var langExtension = cs.className.match(/\blang-(\w+)\b/); + if (langExtension) { langExtension = langExtension[1]; } + + // make sure this is not nested in an already prettified element + var nested = false; + for (var p = cs.parentNode; p; p = p.parentNode) { + if ((p.tagName === 'pre' || p.tagName === 'code' || + p.tagName === 'xmp') && + p.className && p.className.indexOf('prettyprint') >= 0) { + nested = true; + break; + } + } + if (!nested) { + // Look for a class like linenums or linenums:<n> where <n> is the + // 1-indexed number of the first line. + var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/); + lineNums = lineNums + ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true + : false; + if (lineNums) { numberLines(cs, lineNums); } + + // do the pretty printing + prettyPrintingJob = { + langExtension: langExtension, + sourceNode: cs, + numberLines: lineNums + }; + applyDecorator(prettyPrintingJob); + } + } + } + if (k < elements.length) { + // finish up in a continuation + setTimeout(doWork, 250); + } else if (opt_whenDone) { + opt_whenDone(); + } + } + + doWork(); + } + + window['prettyPrintOne'] = prettyPrintOne; + window['prettyPrint'] = prettyPrint; + window['PR'] = { + 'createSimpleLexer': createSimpleLexer, + 'registerLangHandler': registerLangHandler, + 'sourceDecorator': sourceDecorator, + 'PR_ATTRIB_NAME': PR_ATTRIB_NAME, + 'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE, + 'PR_COMMENT': PR_COMMENT, + 'PR_DECLARATION': PR_DECLARATION, + 'PR_KEYWORD': PR_KEYWORD, + 'PR_LITERAL': PR_LITERAL, + 'PR_NOCODE': PR_NOCODE, + 'PR_PLAIN': PR_PLAIN, + 'PR_PUNCTUATION': PR_PUNCTUATION, + 'PR_SOURCE': PR_SOURCE, + 'PR_STRING': PR_STRING, + 'PR_TAG': PR_TAG, + 'PR_TYPE': PR_TYPE + }; +})();
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/slide/slides.js Tue Jan 28 00:48:21 2014 +0900 @@ -0,0 +1,634 @@ +/* + Google HTML5 slides template + + Authors: Luke Mahé (code) + Marcin Wichary (code and design) + + Dominic Mazzoni (browser compatibility) + Charles Chen (ChromeVox support) + + URL: http://code.google.com/p/html5slides/ +*/ + +var PERMANENT_URL_PREFIX = './' + +var SLIDE_CLASSES = ['far-past', 'past', 'current', 'next', 'far-next']; + +var PM_TOUCH_SENSITIVITY = 15; + +var curSlide; + +/* ---------------------------------------------------------------------- */ +/* classList polyfill by Eli Grey + * (http://purl.eligrey.com/github/classList.js/blob/master/classList.js) */ + +if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) { + +(function (view) { + +var + classListProp = "classList" + , protoProp = "prototype" + , elemCtrProto = (view.HTMLElement || view.Element)[protoProp] + , objCtr = Object + strTrim = String[protoProp].trim || function () { + return this.replace(/^\s+|\s+$/g, ""); + } + , arrIndexOf = Array[protoProp].indexOf || function (item) { + for (var i = 0, len = this.length; i < len; i++) { + if (i in this && this[i] === item) { + return i; + } + } + return -1; + } + // Vendors: please allow content code to instantiate DOMExceptions + , DOMEx = function (type, message) { + this.name = type; + this.code = DOMException[type]; + this.message = message; + } + , checkTokenAndGetIndex = function (classList, token) { + if (token === "") { + throw new DOMEx( + "SYNTAX_ERR" + , "An invalid or illegal string was specified" + ); + } + if (/\s/.test(token)) { + throw new DOMEx( + "INVALID_CHARACTER_ERR" + , "String contains an invalid character" + ); + } + return arrIndexOf.call(classList, token); + } + , ClassList = function (elem) { + var + trimmedClasses = strTrim.call(elem.className) + , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [] + ; + for (var i = 0, len = classes.length; i < len; i++) { + this.push(classes[i]); + } + this._updateClassName = function () { + elem.className = this.toString(); + }; + } + , classListProto = ClassList[protoProp] = [] + , classListGetter = function () { + return new ClassList(this); + } +; +// Most DOMException implementations don't allow calling DOMException's toString() +// on non-DOMExceptions. Error's toString() is sufficient here. +DOMEx[protoProp] = Error[protoProp]; +classListProto.item = function (i) { + return this[i] || null; +}; +classListProto.contains = function (token) { + token += ""; + return checkTokenAndGetIndex(this, token) !== -1; +}; +classListProto.add = function (token) { + token += ""; + if (checkTokenAndGetIndex(this, token) === -1) { + this.push(token); + this._updateClassName(); + } +}; +classListProto.remove = function (token) { + token += ""; + var index = checkTokenAndGetIndex(this, token); + if (index !== -1) { + this.splice(index, 1); + this._updateClassName(); + } +}; +classListProto.toggle = function (token) { + token += ""; + if (checkTokenAndGetIndex(this, token) === -1) { + this.add(token); + } else { + this.remove(token); + } +}; +classListProto.toString = function () { + return this.join(" "); +}; + +if (objCtr.defineProperty) { + var classListPropDesc = { + get: classListGetter + , enumerable: true + , configurable: true + }; + try { + objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); + } catch (ex) { // IE 8 doesn't support enumerable:true + if (ex.number === -0x7FF5EC54) { + classListPropDesc.enumerable = false; + objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); + } + } +} else if (objCtr[protoProp].__defineGetter__) { + elemCtrProto.__defineGetter__(classListProp, classListGetter); +} + +}(self)); + +} +/* ---------------------------------------------------------------------- */ + +/* Slide movement */ + +function getSlideEl(no) { + if ((no < 0) || (no >= slideEls.length)) { + return null; + } else { + return slideEls[no]; + } +}; + +function updateSlideClass(slideNo, className) { + var el = getSlideEl(slideNo); + + if (!el) { + return; + } + + if (className) { + el.classList.add(className); + } + + for (var i in SLIDE_CLASSES) { + if (className != SLIDE_CLASSES[i]) { + el.classList.remove(SLIDE_CLASSES[i]); + } + } +}; + +function updateSlides() { + for (var i = 0; i < slideEls.length; i++) { + switch (i) { + case curSlide - 2: + updateSlideClass(i, 'far-past'); + break; + case curSlide - 1: + updateSlideClass(i, 'past'); + break; + case curSlide: + updateSlideClass(i, 'current'); + break; + case curSlide + 1: + updateSlideClass(i, 'next'); + break; + case curSlide + 2: + updateSlideClass(i, 'far-next'); + break; + default: + updateSlideClass(i); + break; + } + } + + triggerLeaveEvent(curSlide - 1); + triggerEnterEvent(curSlide); + + window.setTimeout(function() { + // Hide after the slide + disableSlideFrames(curSlide - 2); + }, 301); + + enableSlideFrames(curSlide - 1); + enableSlideFrames(curSlide + 2); + + if (isChromeVoxActive()) { + speakAndSyncToNode(slideEls[curSlide]); + } + + updateHash(); +}; + +function buildNextItem() { + var toBuild = slideEls[curSlide].querySelectorAll('.to-build'); + + if (!toBuild.length) { + return false; + } + + toBuild[0].classList.remove('to-build', ''); + + if (isChromeVoxActive()) { + speakAndSyncToNode(toBuild[0]); + } + + return true; +}; + +function prevSlide() { + if (curSlide > 0) { + curSlide--; + + updateSlides(); + } +}; + +function nextSlide() { + if (buildNextItem()) { + return; + } + + if (curSlide < slideEls.length - 1) { + curSlide++; + + updateSlides(); + } +}; + +/* Slide events */ + +function triggerEnterEvent(no) { + var el = getSlideEl(no); + if (!el) { + return; + } + + var onEnter = el.getAttribute('onslideenter'); + if (onEnter) { + new Function(onEnter).call(el); + } + + var evt = document.createEvent('Event'); + evt.initEvent('slideenter', true, true); + evt.slideNumber = no + 1; // Make it readable + + el.dispatchEvent(evt); +}; + +function triggerLeaveEvent(no) { + var el = getSlideEl(no); + if (!el) { + return; + } + + var onLeave = el.getAttribute('onslideleave'); + if (onLeave) { + new Function(onLeave).call(el); + } + + var evt = document.createEvent('Event'); + evt.initEvent('slideleave', true, true); + evt.slideNumber = no + 1; // Make it readable + + el.dispatchEvent(evt); +}; + +/* Touch events */ + +function handleTouchStart(event) { + if (event.touches.length == 1) { + touchDX = 0; + touchDY = 0; + + touchStartX = event.touches[0].pageX; + touchStartY = event.touches[0].pageY; + + document.body.addEventListener('touchmove', handleTouchMove, true); + document.body.addEventListener('touchend', handleTouchEnd, true); + } +}; + +function handleTouchMove(event) { + if (event.touches.length > 1) { + cancelTouch(); + } else { + touchDX = event.touches[0].pageX - touchStartX; + touchDY = event.touches[0].pageY - touchStartY; + } +}; + +function handleTouchEnd(event) { + var dx = Math.abs(touchDX); + var dy = Math.abs(touchDY); + + if ((dx > PM_TOUCH_SENSITIVITY) && (dy < (dx * 2 / 3))) { + if (touchDX > 0) { + prevSlide(); + } else { + nextSlide(); + } + } + + cancelTouch(); +}; + +function cancelTouch() { + document.body.removeEventListener('touchmove', handleTouchMove, true); + document.body.removeEventListener('touchend', handleTouchEnd, true); +}; + +/* Preloading frames */ + +function disableSlideFrames(no) { + var el = getSlideEl(no); + if (!el) { + return; + } + + var frames = el.getElementsByTagName('iframe'); + for (var i = 0, frame; frame = frames[i]; i++) { + disableFrame(frame); + } +}; + +function enableSlideFrames(no) { + var el = getSlideEl(no); + if (!el) { + return; + } + + var frames = el.getElementsByTagName('iframe'); + for (var i = 0, frame; frame = frames[i]; i++) { + enableFrame(frame); + } +}; + +function disableFrame(frame) { + frame.src = 'about:blank'; +}; + +function enableFrame(frame) { + var src = frame._src; + + if (frame.src != src && src != 'about:blank') { + frame.src = src; + } +}; + +function setupFrames() { + var frames = document.querySelectorAll('iframe'); + for (var i = 0, frame; frame = frames[i]; i++) { + frame._src = frame.src; + disableFrame(frame); + } + + enableSlideFrames(curSlide); + enableSlideFrames(curSlide + 1); + enableSlideFrames(curSlide + 2); +}; + +function setupInteraction() { + /* Clicking and tapping */ + + var el = document.createElement('div'); + el.className = 'slide-area'; + el.id = 'prev-slide-area'; + el.addEventListener('click', prevSlide, false); + document.querySelector('section.slides').appendChild(el); + + var el = document.createElement('div'); + el.className = 'slide-area'; + el.id = 'next-slide-area'; + el.addEventListener('click', nextSlide, false); + document.querySelector('section.slides').appendChild(el); + + /* Swiping */ + + document.body.addEventListener('touchstart', handleTouchStart, false); +} + +/* ChromeVox support */ + +function isChromeVoxActive() { + if (typeof(cvox) == 'undefined') { + return false; + } else { + return true; + } +}; + +function speakAndSyncToNode(node) { + if (!isChromeVoxActive()) { + return; + } + + cvox.ChromeVox.navigationManager.switchToStrategy( + cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); + cvox.ChromeVox.navigationManager.syncToNode(node); + cvox.ChromeVoxUserCommands.finishNavCommand(''); + var target = node; + while (target.firstChild) { + target = target.firstChild; + } + cvox.ChromeVox.navigationManager.syncToNode(target); +}; + +function speakNextItem() { + if (!isChromeVoxActive()) { + return; + } + + cvox.ChromeVox.navigationManager.switchToStrategy( + cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); + cvox.ChromeVox.navigationManager.next(true); + if (!cvox.DomUtil.isDescendantOfNode( + cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])){ + var target = slideEls[curSlide]; + while (target.firstChild) { + target = target.firstChild; + } + cvox.ChromeVox.navigationManager.syncToNode(target); + cvox.ChromeVox.navigationManager.next(true); + } + cvox.ChromeVoxUserCommands.finishNavCommand(''); +}; + +function speakPrevItem() { + if (!isChromeVoxActive()) { + return; + } + + cvox.ChromeVox.navigationManager.switchToStrategy( + cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); + cvox.ChromeVox.navigationManager.previous(true); + if (!cvox.DomUtil.isDescendantOfNode( + cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])){ + var target = slideEls[curSlide]; + while (target.lastChild){ + target = target.lastChild; + } + cvox.ChromeVox.navigationManager.syncToNode(target); + cvox.ChromeVox.navigationManager.previous(true); + } + cvox.ChromeVoxUserCommands.finishNavCommand(''); +}; + +/* Hash functions */ + +function getCurSlideFromHash() { + var slideNo = parseInt(location.hash.substr(1)); + + if (slideNo) { + curSlide = slideNo - 1; + } else { + curSlide = 0; + } +}; + +function updateHash() { + location.replace('#' + (curSlide + 1)); +}; + +/* Event listeners */ + +function handleBodyKeyDown(event) { + switch (event.keyCode) { + case 39: // right arrow + case 13: // Enter + case 32: // space + case 34: // PgDn + nextSlide(); + event.preventDefault(); + break; + + case 37: // left arrow + case 8: // Backspace + case 33: // PgUp + prevSlide(); + event.preventDefault(); + break; + + case 40: // down arrow + if (isChromeVoxActive()) { + speakNextItem(); + } else { + nextSlide(); + } + event.preventDefault(); + break; + + case 38: // up arrow + if (isChromeVoxActive()) { + speakPrevItem(); + } else { + prevSlide(); + } + event.preventDefault(); + break; + } +}; + +function addEventListeners() { + document.addEventListener('keydown', handleBodyKeyDown, false); +}; + +/* Initialization */ + +function addPrettify() { + var els = document.querySelectorAll('pre'); + for (var i = 0, el; el = els[i]; i++) { + if (!el.classList.contains('noprettyprint')) { + el.classList.add('prettyprint'); + } + } + + var el = document.createElement('script'); + el.type = 'text/javascript'; + el.src = PERMANENT_URL_PREFIX + 'prettify.js'; + el.onload = function() { + prettyPrint(); + } + document.body.appendChild(el); +}; + +function addFontStyle() { + var el = document.createElement('link'); + el.rel = 'stylesheet'; + el.type = 'text/css'; + el.href = 'http://fonts.googleapis.com/css?family=' + + 'Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono'; + + document.body.appendChild(el); +}; + +function addGeneralStyle() { + var el = document.createElement('link'); + el.rel = 'stylesheet'; + el.type = 'text/css'; + el.href = PERMANENT_URL_PREFIX + 'styles.css'; + document.body.appendChild(el); + + var el = document.createElement('meta'); + el.name = 'viewport'; + el.content = 'width=1100,height=750'; + document.querySelector('head').appendChild(el); + + var el = document.createElement('meta'); + el.name = 'apple-mobile-web-app-capable'; + el.content = 'yes'; + document.querySelector('head').appendChild(el); +}; + +function makeBuildLists() { + for (var i = curSlide, slide; slide = slideEls[i]; i++) { + var items = slide.querySelectorAll('.build > *'); + for (var j = 0, item; item = items[j]; j++) { + if (item.classList) { + item.classList.add('to-build'); + } + } + } +}; + +function handleDomLoaded() { + slideEls = document.querySelectorAll('section.slides > article'); + + setupFrames(); + + addFontStyle(); + addGeneralStyle(); + addPrettify(); + addEventListeners(); + + updateSlides(); + + setupInteraction(); + makeBuildLists(); + + document.body.classList.add('loaded'); +}; + +function initialize() { + getCurSlideFromHash(); + + if (window['_DEBUG']) { + PERMANENT_URL_PREFIX = '../'; + } + + if (window['_DCL']) { + handleDomLoaded(); + } else { + document.addEventListener('DOMContentLoaded', handleDomLoaded, false); + } +} + +// If ?debug exists then load the script relative instead of absolute +if (!window['_DEBUG'] && document.location.href.indexOf('?debug') !== -1) { + document.addEventListener('DOMContentLoaded', function() { + // Avoid missing the DomContentLoaded event + window['_DCL'] = true + }, false); + + window['_DEBUG'] = true; + var script = document.createElement('script'); + script.type = 'text/javascript'; + script.src = '../slides.js'; + var s = document.getElementsByTagName('script')[0]; + s.parentNode.insertBefore(script, s); + + // Remove this script + s.parentNode.removeChild(s); +} else { + initialize(); +}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/slide/styles.css Tue Jan 28 00:48:21 2014 +0900 @@ -0,0 +1,629 @@ +/* + Google HTML5 slides template + + Authors: Luke Mahé (code) + Marcin Wichary (code and design) + + Dominic Mazzoni (browser compatibility) + Charles Chen (ChromeVox support) + + URL: http://code.google.com/p/html5slides/ +*/ + +/* Framework */ + +html { + height: 100%; +} +p.sample { color : blue;background-image : url(./intro/os.jpg);padding : 3px;} + +body { + margin: 0; + padding: 0; + + display: block !important; + + height: 100%; + min-height: 740px; + + overflow-x: hidden; + overflow-y: auto; + + background: rgb(215, 215, 215); + background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); + background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); + + -webkit-font-smoothing: antialiased; +} + +.slides { + width: 100%; + height: 100%; + left: 0; + top: 0; + + position: absolute; + + -webkit-transform: translate3d(0, 0, 0); +} + +.slides > article { + display: block; + + position: absolute; + overflow: hidden; + + width: 900px; + height: 700px; + + left: 50%; + top: 50%; + + margin-left: -450px; + margin-top: -350px; + + padding: 40px 60px; + + box-sizing: border-box; + -o-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + + border-radius: 10px; + -o-border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + + background-color: white; + + box-shadow: 0 2px 6px rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .3); + + transition: transform .3s ease-out; + -o-transition: -o-transform .3s ease-out; + -moz-transition: -moz-transform .3s ease-out; + -webkit-transition: -webkit-transform .3s ease-out; +} +.slides.layout-widescreen > article { + margin-left: -550px; + width: 1100px; +} +.slides.layout-faux-widescreen > article { + margin-left: -550px; + width: 1100px; + + padding: 40px 160px; +} + +.slides.template-default > article:not(.nobackground):not(.biglogo) { + background: url(./images/concurrent.png) 630px 580px no-repeat; + + background-size: 30%; + background-color: white; +} + +.slides.template-io2011 > article:not(.nobackground):not(.biglogo) { + background: url(images/colorbar.png) 0 600px repeat-x, + url(images/googleio-logo.png) 640px 625px no-repeat; + + background-size: 100%, 225px; + + background-color: white; +} +.slides.layout-widescreen > article:not(.nobackground):not(.biglogo), +.slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) { + background-position-x: 0, 840px; +} + +/* Clickable/tappable areas */ + +.slide-area { + z-index: 1000; + + position: absolute; + left: 0; + top: 0; + width: 150px; + height: 700px; + + left: 50%; + top: 50%; + + cursor: pointer; + margin-top: -350px; + + tap-highlight-color: transparent; + -o-tap-highlight-color: transparent; + -moz-tap-highlight-color: transparent; + -webkit-tap-highlight-color: transparent; +} +#prev-slide-area { + margin-left: -550px; +} +#next-slide-area { + margin-left: 400px; +} +.slides.layout-widescreen #prev-slide-area, +.slides.layout-faux-widescreen #prev-slide-area { + margin-left: -650px; +} +.slides.layout-widescreen #next-slide-area, +.slides.layout-faux-widescreen #next-slide-area { + margin-left: 500px; +} + +/* Slide styles */ + +.slides.template-default article.biglogo { + background: white url(images/api.jpg) 50% 50% no-repeat; +} + +.slides.template-io2011 article.biglogo { + background: white url(images/api.jpg) 50% 50% no-repeat; + + background-size: 600px; +} + +/* Slides */ + +.slides > article { + display: none; +} +.slides > article.far-past { + display: block; + transform: translate(-2040px); + -o-transform: translate(-2040px); + -moz-transform: translate(-2040px); + -webkit-transform: translate3d(-2040px, 0, 0); +} +.slides > article.past { + display: block; + transform: translate(-1020px); + -o-transform: translate(-1020px); + -moz-transform: translate(-1020px); + -webkit-transform: translate3d(-1020px, 0, 0); +} +.slides > article.current { + display: block; + transform: translate(0); + -o-transform: translate(0); + -moz-transform: translate(0); + -webkit-transform: translate3d(0, 0, 0); +} +.slides > article.next { + display: block; + transform: translate(1020px); + -o-transform: translate(1020px); + -moz-transform: translate(1020px); + -webkit-transform: translate3d(1020px, 0, 0); +} +.slides > article.far-next { + display: block; + transform: translate(2040px); + -o-transform: translate(2040px); + -moz-transform: translate(2040px); + -webkit-transform: translate3d(2040px, 0, 0); +} + +.slides.layout-widescreen > article.far-past, +.slides.layout-faux-widescreen > article.far-past { + display: block; + transform: translate(-2260px); + -o-transform: translate(-2260px); + -moz-transform: translate(-2260px); + -webkit-transform: translate3d(-2260px, 0, 0); +} +.slides.layout-widescreen > article.past, +.slides.layout-faux-widescreen > article.past { + display: block; + transform: translate(-1130px); + -o-transform: translate(-1130px); + -moz-transform: translate(-1130px); + -webkit-transform: translate3d(-1130px, 0, 0); +} +.slides.layout-widescreen > article.current, +.slides.layout-faux-widescreen > article.current { + display: block; + transform: translate(0); + -o-transform: translate(0); + -moz-transform: translate(0); + -webkit-transform: translate3d(0, 0, 0); +} +.slides.layout-widescreen > article.next, +.slides.layout-faux-widescreen > article.next { + display: block; + transform: translate(1130px); + -o-transform: translate(1130px); + -moz-transform: translate(1130px); + -webkit-transform: translate3d(1130px, 0, 0); +} +.slides.layout-widescreen > article.far-next, +.slides.layout-faux-widescreen > article.far-next { + display: block; + transform: translate(2260px); + -o-transform: translate(2260px); + -moz-transform: translate(2260px); + -webkit-transform: translate3d(2260px, 0, 0); +} + +/* Styles for slides */ + +.slides > article { + font-family: 'Open Sans', Arial, sans-serif; + + color: rgb(102, 102, 102); + text-shadow: 0 1px 1px rgba(0, 0, 0, .1); + + font-size: 30px; + line-height: 36px; + + letter-spacing: -1px; +} + +b { + font-weight: 600; +} + +.blue { + color: rgb(0, 102, 204); +} +.yellow { + color: rgb(255, 211, 25); +} +.green { + color: rgb(0, 138, 53); +} +.red { + color: rgb(255, 0, 0); +} +.black { + color: black; +} +.white { + color: white; +} + +a { + color: rgb(0, 102, 204); +} +a:visited { + color: rgba(0, 102, 204, .75); +} +a:hover { + color: black; +} + +p { + margin: 0; + padding: 0; + + margin-top: 20px; +} +p:first-child { + margin-top: 0; +} + +h1 { + font-size: 60px; + line-height: 60px; + + padding: 0; + margin: 0; + margin-top: 200px; + padding-right: 40px; + + font-weight: 600; + + letter-spacing: -3px; + + color: rgb(128, 141, 181); +} + +h2 { + font-size: 30px; + line-height: 45px; + background-color:#ffcc00; + position: absolute; + bottom: 270px; + + padding: 0; + margin: 0; + padding-right: 90px; + + font-weight: 600; + + letter-spacing: -1px; + +} +h3.title { + font-size: 30px; + line-width: 600px; + bottom: 270px; + background-color:#ffcc00; + color: #000000; +} +h3 { + background-color:rgb(128, 145, 181); + color: #FFFFFF; + font-size: 30px; + line-height: 36px; + + padding: 0; + margin: 0; + padding-right: 40px; + + font-weight: 600; + + letter-spacing: -1px; +} +h3.yellow { + background-color:#ffff99; + color: #000000; +} + +article.fill h3 { + background: rgba(255, 255, 255, .75); + padding-top: .2em; + padding-bottom: .3em; + margin-top: -.2em; + margin-left: -60px; + padding-left: 60px; + margin-right: -60px; + padding-right: 60px; +} + +ul { + list-style: none; + margin: 0; + padding: 0; + + margin-top: 40px; + + margin-left: .75em; +} +ul:first-child { + margin-top: 0; +} +ul ul { + margin-top: .5em; +} +li { + padding: 0; + margin: 0; + + margin-bottom: .5em; +} +li::before { + content: '·'; + + width: .75em; + margin-left: -.75em; + + position: absolute; +} + +pre { + font-family: 'Droid Sans Mono', 'Courier New', monospace; + + font-size: 20px; + line-height: 28px; + padding: 5px 10px; + + letter-spacing: -1px; + + margin-top: 40px; + margin-bottom: 40px; + + color: black; + background: rgb(240, 240, 240); + border: 1px solid rgb(224, 224, 224); + box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1); + + overflow: hidden; +} + +code { + font-size: 95%; + font-family: 'Droid Sans Mono', 'Courier New', monospace; + + color: black; +} + +iframe { + width: 100%; + + height: 620px; + + background: white; + border: 1px solid rgb(192, 192, 192); + margin: -1px; + /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/ +} + +h3 + iframe { + margin-top: 40px; + height: 540px; +} + +article.fill iframe { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + + border: 0; + margin: 0; + + border-radius: 10px; + -o-border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + + z-index: -1; +} + +article.fill img { + position: absolute; + left: 0; + top: 0; + min-width: 100%; + min-height: 100%; + + border-radius: 10px; + -o-border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + + z-index: -1; +} +img.centered { + margin: 0 auto; + display: block; +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: 40px; +} + +table.small { + width: 60%; + height: 30%; + margin-top: 40px; +} +th { + font-weight: 600; + text-align: left; +} +td, +th { + border: 1px solid rgb(224, 224, 224); + padding: 5px 10px; + vertical-align: top; +} + +.source { + position: absolute; + left: 60px; + top: 644px; + padding-right: 175px; + + font-size: 15px; + letter-spacing: 0; + line-height: 18px; +} + +q { + display: block; + font-size: 60px; + line-height: 72px; + + margin-left: 20px; + + margin-top: 100px; + margin-right: 150px; +} +q::before { + content: '“'; + + position: absolute; + display: inline-block; + margin-left: -2.1em; + width: 2em; + text-align: right; + + font-size: 90px; + color: rgb(192, 192, 192); +} +q::after { + content: '”'; + + position: absolute; + margin-left: .1em; + + font-size: 90px; + color: rgb(192, 192, 192); +} +div.author { + text-align: right; + font-size: 40px; + + margin-top: 20px; + margin-right: 150px; +} +div.author::before { + content: '—'; +} + +/* Size variants */ + +article.smaller p, +article.smaller ul { + font-size: 20px; + line-height: 24px; + letter-spacing: 0; +} +article.smaller table { + font-size: 20px; + line-height: 24px; + letter-spacing: 0; +} +article.smaller pre { + font-size: 15px; + line-height: 20px; + letter-spacing: 0; +} +article.smaller q { + font-size: 40px; + line-height: 48px; +} +article.smaller q::before, +article.smaller q::after { + font-size: 60px; +} + +/* Builds */ + +.build > * { + transition: opacity 0.5s ease-in-out 0.2s; + -o-transition: opacity 0.5s ease-in-out 0.2s; + -moz-transition: opacity 0.5s ease-in-out 0.2s; + -webkit-transition: opacity 0.5s ease-in-out 0.2s; +} + +.to-build { + opacity: 0; +} + +/* Pretty print */ + +.prettyprint .str, /* string content */ +.prettyprint .atv { /* a markup attribute value */ + color: rgb(0, 138, 53); +} +.prettyprint .kwd, /* a keyword */ +.prettyprint .tag { /* a markup tag name */ + color: rgb(0, 102, 204); +} +.prettyprint .com { /* a comment */ + color: rgb(127, 127, 127); + font-style: italic; +} +.prettyprint .lit { /* a literal value */ + color: rgb(127, 0, 0); +} +.prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */ +.prettyprint .opn, +.prettyprint .clo { + color: rgb(127, 127, 127); +} +.prettyprint .typ, /* a type name */ +.prettyprint .atn, /* a markup attribute name */ +.prettyprint .dec, +.prettyprint .var { /* a declaration; a variable name */ + color: rgb(127, 0, 127); +}