diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..cf8d7fa --- /dev/null +++ b/.editorconfig @@ -0,0 +1,11 @@ +# editorconfig.org + +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.gitignore b/.gitignore index 42bd68c..81e96a3 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,7 @@ css/fonts/.DS_Store .DS_Store *.scssc +*.sublime-project + +_site/ +_site/* diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..f1b369d --- /dev/null +++ b/Gemfile @@ -0,0 +1,3 @@ +source 'https://rubygems.org' + +gem 'github-pages', group: :jekyll_plugins diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..b0c33b6 --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,204 @@ +GEM + remote: https://rubygems.org/ + specs: + activesupport (4.2.7) + i18n (~> 0.7) + json (~> 1.7, >= 1.7.7) + minitest (~> 5.1) + thread_safe (~> 0.3, >= 0.3.4) + tzinfo (~> 1.1) + addressable (2.5.0) + public_suffix (~> 2.0, >= 2.0.2) + coffee-script (2.4.1) + coffee-script-source + execjs + coffee-script-source (1.12.2) + colorator (1.1.0) + ethon (0.10.1) + ffi (>= 1.3.0) + execjs (2.7.0) + faraday (0.11.0) + multipart-post (>= 1.2, < 3) + ffi (1.9.18) + ffi (1.9.18-x64-mingw32) + forwardable-extended (2.6.0) + gemoji (2.1.0) + github-pages (113) + activesupport (= 4.2.7) + github-pages-health-check (= 1.3.0) + jekyll (= 3.3.1) + jekyll-avatar (= 0.4.2) + jekyll-coffeescript (= 1.0.1) + jekyll-default-layout (= 0.1.4) + jekyll-feed (= 0.8.0) + jekyll-gist (= 1.4.0) + jekyll-github-metadata (= 2.3.0) + jekyll-mentions (= 1.2.0) + jekyll-optional-front-matter (= 0.1.2) + jekyll-paginate (= 1.1.0) + jekyll-readme-index (= 0.0.3) + jekyll-redirect-from (= 0.11.0) + jekyll-relative-links (= 0.2.1) + jekyll-sass-converter (= 1.3.0) + jekyll-seo-tag (= 2.1.0) + jekyll-sitemap (= 0.12.0) + jekyll-swiss (= 0.4.0) + jekyll-theme-architect (= 0.0.3) + jekyll-theme-cayman (= 0.0.3) + jekyll-theme-dinky (= 0.0.3) + jekyll-theme-hacker (= 0.0.3) + jekyll-theme-leap-day (= 0.0.3) + jekyll-theme-merlot (= 0.0.3) + jekyll-theme-midnight (= 0.0.3) + jekyll-theme-minimal (= 0.0.3) + jekyll-theme-modernist (= 0.0.3) + jekyll-theme-primer (= 0.1.5) + jekyll-theme-slate (= 0.0.3) + jekyll-theme-tactile (= 0.0.3) + jekyll-theme-time-machine (= 0.0.3) + jekyll-titles-from-headings (= 0.1.3) + jemoji (= 0.7.0) + kramdown (= 1.11.1) + liquid (= 3.0.6) + listen (= 3.0.6) + mercenary (~> 0.3) + minima (= 2.0.0) + rouge (= 1.11.1) + terminal-table (~> 1.4) + github-pages-health-check (1.3.0) + addressable (~> 2.3) + net-dns (~> 0.8) + octokit (~> 4.0) + public_suffix (~> 2.0) + typhoeus (~> 0.7) + html-pipeline (2.5.0) + activesupport (>= 2) + nokogiri (>= 1.4) + i18n (0.8.1) + jekyll (3.3.1) + addressable (~> 2.4) + colorator (~> 1.0) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 1.1) + kramdown (~> 1.3) + liquid (~> 3.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (~> 1.7) + safe_yaml (~> 1.0) + jekyll-avatar (0.4.2) + jekyll (~> 3.0) + jekyll-coffeescript (1.0.1) + coffee-script (~> 2.2) + jekyll-default-layout (0.1.4) + jekyll (~> 3.0) + jekyll-feed (0.8.0) + jekyll (~> 3.3) + jekyll-gist (1.4.0) + octokit (~> 4.2) + jekyll-github-metadata (2.3.0) + jekyll (~> 3.1) + octokit (~> 4.0, != 4.4.0) + jekyll-mentions (1.2.0) + activesupport (~> 4.0) + html-pipeline (~> 2.3) + jekyll (~> 3.0) + jekyll-optional-front-matter (0.1.2) + jekyll (~> 3.0) + jekyll-paginate (1.1.0) + jekyll-readme-index (0.0.3) + jekyll (~> 3.0) + jekyll-redirect-from (0.11.0) + jekyll (>= 2.0) + jekyll-relative-links (0.2.1) + jekyll (~> 3.3) + jekyll-sass-converter (1.3.0) + sass (~> 3.2) + jekyll-seo-tag (2.1.0) + jekyll (~> 3.3) + jekyll-sitemap (0.12.0) + jekyll (~> 3.3) + jekyll-swiss (0.4.0) + jekyll-theme-architect (0.0.3) + jekyll (~> 3.3) + jekyll-theme-cayman (0.0.3) + jekyll (~> 3.3) + jekyll-theme-dinky (0.0.3) + jekyll (~> 3.3) + jekyll-theme-hacker (0.0.3) + jekyll (~> 3.3) + jekyll-theme-leap-day (0.0.3) + jekyll (~> 3.3) + jekyll-theme-merlot (0.0.3) + jekyll (~> 3.3) + jekyll-theme-midnight (0.0.3) + jekyll (~> 3.3) + jekyll-theme-minimal (0.0.3) + jekyll (~> 3.3) + jekyll-theme-modernist (0.0.3) + jekyll (~> 3.3) + jekyll-theme-primer (0.1.5) + jekyll (~> 3.3) + jekyll-theme-slate (0.0.3) + jekyll (~> 3.3) + jekyll-theme-tactile (0.0.3) + jekyll (~> 3.3) + jekyll-theme-time-machine (0.0.3) + jekyll (~> 3.3) + jekyll-titles-from-headings (0.1.3) + jekyll (~> 3.3) + jekyll-watch (1.5.0) + listen (~> 3.0, < 3.1) + jemoji (0.7.0) + activesupport (~> 4.0) + gemoji (~> 2.0) + html-pipeline (~> 2.2) + jekyll (>= 3.0) + json (1.8.6) + kramdown (1.11.1) + liquid (3.0.6) + listen (3.0.6) + rb-fsevent (>= 0.9.3) + rb-inotify (>= 0.9.7) + mercenary (0.3.6) + mini_portile (0.6.2) + minima (2.0.0) + minitest (5.10.1) + multipart-post (2.0.0) + net-dns (0.8.0) + nokogiri (1.6.6.4) + mini_portile (~> 0.6.0) + nokogiri (1.6.6.4-x64-mingw32) + mini_portile (~> 0.6.0) + octokit (4.6.2) + sawyer (~> 0.8.0, >= 0.5.3) + pathutil (0.14.0) + forwardable-extended (~> 2.6) + public_suffix (2.0.5) + rb-fsevent (0.9.8) + rb-inotify (0.9.8) + ffi (>= 0.5.0) + rouge (1.11.1) + safe_yaml (1.0.4) + sass (3.4.23) + sawyer (0.8.1) + addressable (>= 2.3.5, < 2.6) + faraday (~> 0.8, < 1.0) + terminal-table (1.7.3) + unicode-display_width (~> 1.1.1) + thread_safe (0.3.6) + typhoeus (0.8.0) + ethon (>= 0.8.0) + tzinfo (1.2.2) + thread_safe (~> 0.1) + unicode-display_width (1.1.3) + +PLATFORMS + ruby + x64-mingw32 + +DEPENDENCIES + github-pages + +BUNDLED WITH + 1.16.6 diff --git a/README.md b/README.md new file mode 100644 index 0000000..fe66862 --- /dev/null +++ b/README.md @@ -0,0 +1,96 @@ +Iniciantes +========== +Em uma conversa no Twitter, algumas pessoas identificaram que faltava conteúdo para iniciantes. Resolvemos então criar um conteúdo básico, mínimo, para que alguém que esteja iniciando na área tenha alguma bagagem para aprender informações importantes de forma que ela saiba por onde começar. + +---------- + +Guia básico para iniciantes +---------- +Se você quiser ajudar a melhorar este guia, escrevendo, corrigindo ou aprimorando a experiência de utilização, por favor, faça um FORK do projeto e mãos à obra. + +Como funciona +---------- +Utilizamos [Jekyll](http://jekyllrb.com) uma Gem do [Ruby](http://www.ruby-lang.org/) para gerar páginas estáticas. + +1. Instale o [Ruby](http://www.ruby-lang.org/pt/downloads/) + +2. Instale a Gem do [Bundler](http://bundler.io/): + ``` + gem install bundler + ``` +3. Clone o projeto: + ``` + git@github.com:tableless/iniciantes.git + ``` +4. Vá a pasta do projeto: + ``` + cd iniciantes + ``` +5. Instale as dependências através do [Bundler](http://bundler.io/): + ``` + bundle install + ``` +5. Inicie o [Jekyll](http://jekyllrb.com/): + ``` + jekyll serve -w + ``` +5. Acesse [http://localhost:4000/iniciantes/](http://localhost:4000/iniciantes/) + +Escrevendo código com syntax highlight +---------- +Para escrever código, usamos o Google Prettify, que já é conhecido de todos. Uma estrutura para código básica segue abaixo: + + 
+        <!DOCTYPE html>
+	    <html lang="pt-br">
+	      <head>
+	        <title></title>
+	        <meta charset="utf-8">
+	      </head>
+	      <body>
+
+	      </body>
+	    </html>
+
+ +A classe `lang-x` define a linguagem do código, onde `x` é a linguagem (javascript, css, php, asp, ruby e assim por diante). Lembre-se de escapar sinais como < > colocando em entidades HTML (&lt; &gt;). + +Estrutura básica de diretórios +---------- +Dentro de **manual** você encontra todos os textos do guia. Lá está separado em 4 pastas básicas: **obasico** onde agrupa textos sobre o conceito da área. A pasta **HTML** contém textos sobre HTML e seu funcionamento. A pasta **CSS** tem textos sobre CSS. E por último mas não menos importante, a pasta **JS** guarda textos sobre JavaScript e afins. + +A pasta **assets** guarda o CSS, o JS e as imagens usadas no projeto. + + +``` +| iniciantes/ +| +|-- _includes/ +| +|-- _layouts/ +| +|-- assets/ +| |-- imgs +| |-- javascripts +| |-- stylesheet +| +|-- manual/ +| |-- css +| |-- html +| |-- js +| |-- obasico +| +|-- slide/ +| |-- css +| |-- fonts +| |-- galery-sass +| |-- galery +| |-- img +| |-- js +| |-- layout +``` + + +Da comunidade para a comunidade +---------- +Esta iniciativa é da comunidade para a comunidade. Prezamos pelo bom conteúdo e sabemos que encontrar conteúdo básico é muito difícil, por isso tente divulgar o máximo que puder para aqueles que estão começando. Dessa forma temos a certeza de que a qualidade da internet brasileira vai crescer ainda mais. diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..4b8aa24 --- /dev/null +++ b/_config.yml @@ -0,0 +1,63 @@ +source: . +destination: ./_site +plugins_dir: ./_plugins +layouts_dir: ./_layouts +include: ['.htaccess'] +exclude: [] +keep_files: ['.git','.svn'] +timezone: nil + +future: true +show_drafts: nil +limit_posts: 0 +highlighter: pygments + +permalink: date +paginate_path: 'page:num' + +markdown: kramdown +markdown_ext: markdown,mkd,mkdn,md +textile_ext: textile + +excerpt_separator: "\n\n" + +safe: true +#watch: false # deprecated +#server: false # deprecated +host: 0.0.0.0 +port: 4000 +baseurl: /iniciantes +url: http://localhost:4000 +lsi: false + +kramdown: + use_tex: false + use_divs: false + png_engine: blahtex + png_dir: images/latex + png_url: /images/latex + +rdiscount: + extensions: [] + +redcarpet: + extensions: [] + +kramdown: + auto_ids: true + footnote_nr: 1 + entity_output: as_char + toc_levels: 1..6 + smart_quotes: lsquo,rsquo,ldquo,rdquo + enable_coderay: false + + coderay: + coderay_wrap: div + coderay_line_numbers: inline + coderay_line_numbers_start: 1 + coderay_tab_width: 4 + coderay_bold_every: 10 + coderay_css: style + +redcloth: + hard_breaks: true diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..dc98b52 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,15 @@ + + + + + + diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..5abfdd0 --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,21 @@ + + + + + + Para iniciantes + + + + + + + + Fork me on GitHub + +
+
+

Getting Started

+

Um guia para iniciantes na área de web.

+
+
diff --git a/_includes/submenu-css.html b/_includes/submenu-css.html new file mode 100644 index 0000000..da737a2 --- /dev/null +++ b/_includes/submenu-css.html @@ -0,0 +1,19 @@ + diff --git a/_includes/submenu-html.html b/_includes/submenu-html.html new file mode 100644 index 0000000..734776f --- /dev/null +++ b/_includes/submenu-html.html @@ -0,0 +1,10 @@ + diff --git a/_includes/submenu-js.html b/_includes/submenu-js.html new file mode 100644 index 0000000..c044a7b --- /dev/null +++ b/_includes/submenu-js.html @@ -0,0 +1,15 @@ + diff --git a/_includes/submenu-obasico.html b/_includes/submenu-obasico.html new file mode 100644 index 0000000..f9f438a --- /dev/null +++ b/_includes/submenu-obasico.html @@ -0,0 +1,9 @@ + diff --git a/_layouts/base.html b/_layouts/base.html new file mode 100644 index 0000000..ba42a97 --- /dev/null +++ b/_layouts/base.html @@ -0,0 +1,5 @@ +{% include header.html %} + +{{content}} + +{% include footer.html %} diff --git a/_layouts/interna.html b/_layouts/interna.html new file mode 100644 index 0000000..09feb22 --- /dev/null +++ b/_layouts/interna.html @@ -0,0 +1,11 @@ +{% include header.html %} + +
+ + + {{content}} +
+ +{% include footer.html %} diff --git a/assets/img/arrow-menu.png b/assets/img/arrow-menu.png new file mode 100644 index 0000000..02c1ea1 Binary files /dev/null and b/assets/img/arrow-menu.png differ diff --git a/assets/img/arvore-dom.gif b/assets/img/arvore-dom.gif new file mode 100644 index 0000000..d8882cf Binary files /dev/null and b/assets/img/arvore-dom.gif differ diff --git a/assets/img/box-model-border-box.png b/assets/img/box-model-border-box.png new file mode 100644 index 0000000..d8403ca Binary files /dev/null and b/assets/img/box-model-border-box.png differ diff --git a/assets/img/box-model-content-box.png b/assets/img/box-model-content-box.png new file mode 100644 index 0000000..bcee509 Binary files /dev/null and b/assets/img/box-model-content-box.png differ diff --git a/assets/img/box-model.png b/assets/img/box-model.png new file mode 100644 index 0000000..9e1d3e5 Binary files /dev/null and b/assets/img/box-model.png differ diff --git a/assets/img/client-side-back-end.png b/assets/img/client-side-back-end.png new file mode 100644 index 0000000..350ac58 Binary files /dev/null and b/assets/img/client-side-back-end.png differ diff --git a/assets/img/exemplo-sem-clear.png b/assets/img/exemplo-sem-clear.png new file mode 100644 index 0000000..ecf4c5b Binary files /dev/null and b/assets/img/exemplo-sem-clear.png differ diff --git a/assets/img/exemplo-sem-float.png b/assets/img/exemplo-sem-float.png new file mode 100644 index 0000000..75d8aa6 Binary files /dev/null and b/assets/img/exemplo-sem-float.png differ diff --git a/assets/img/float-left.png b/assets/img/float-left.png new file mode 100644 index 0000000..5a26bef Binary files /dev/null and b/assets/img/float-left.png differ diff --git a/assets/img/float-right.png b/assets/img/float-right.png new file mode 100644 index 0000000..7e93056 Binary files /dev/null and b/assets/img/float-right.png differ diff --git a/assets/img/propriedade-clear.png b/assets/img/propriedade-clear.png new file mode 100644 index 0000000..01258c3 Binary files /dev/null and b/assets/img/propriedade-clear.png differ diff --git a/assets/javascripts/prettify/js-modules/combinePrefixPatterns.js b/assets/javascripts/prettify/js-modules/combinePrefixPatterns.js new file mode 100644 index 0000000..3cf4a86 --- /dev/null +++ b/assets/javascripts/prettify/js-modules/combinePrefixPatterns.js @@ -0,0 +1,235 @@ +/** + * 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.} 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; + } + } + + var escapeCharToCodeUnit = { + 'b': 8, + 't': 9, + 'n': 0xa, + 'v': 0xb, + 'f': 0xc, + 'r': 0xd + }; + + function decodeEscape(charsetPart) { + var cc0 = charsetPart.charCodeAt(0); + if (cc0 !== 92 /* \\ */) { + return cc0; + } + var c1 = charsetPart.charAt(1); + cc0 = escapeCharToCodeUnit[c1]; + if (cc0) { + return cc0; + } else if ('0' <= c1 && c1 <= '7') { + return parseInt(charsetPart.substring(1), 8); + } else if (c1 === 'u' || c1 === 'x') { + return parseInt(charsetPart.substring(2), 16); + } else { + 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]; + if (/\\[bdsw]/i.test(p)) { // Don't muck with named groups. + groups.push(p); + } else { + 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. + // This case handling is too simplistic. + // It does not deal with non-latin case folding. + // It works for latin source code identifiers though. + 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'); +} diff --git a/assets/javascripts/prettify/js-modules/externs.js b/assets/javascripts/prettify/js-modules/externs.js new file mode 100644 index 0000000..e920098 --- /dev/null +++ b/assets/javascripts/prettify/js-modules/externs.js @@ -0,0 +1,37 @@ +var PR = {}; + +/** + * @param {function (Object)} handler + * @param {Array.} fileExtensions + */ +PR.registerLangHandler = function registerLangHandler(handler, fileExtensions) {}; + +/** + * @param {Array} shortcutStylePatterns + * @param {Array} fallthroughStylePatterns + * @return {function (Object)} + */ +PR.createSimpleLexer = function createSimpleLexer( + shortcutStylePatterns, fallthroughStylePatterns) {}; + +/** + * @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. + */ +PR.sourceDecorator = function sourceDecorator(options) {}; + + +PR.PR_ATTRIB_NAME = 'atn'; +PR.PR_ATTRIB_VALUE = 'atv'; +PR.PR_COMMENT = 'com'; +PR.PR_DECLARATION = 'dec'; +PR.PR_KEYWORD = 'kwd'; +PR.PR_LITERAL = 'lit'; +PR.PR_NOCODE = 'nocode'; +PR.PR_PLAIN = 'pln'; +PR.PR_PUNCTUATION = 'pun'; +PR.PR_SOURCE = 'src'; +PR.PR_STRING = 'str'; +PR.PR_TAG = 'tag'; +PR.PR_TYPE = 'typ'; diff --git a/assets/javascripts/prettify/js-modules/extractSourceSpans.js b/assets/javascripts/prettify/js-modules/extractSourceSpans.js new file mode 100644 index 0000000..29e3b4e --- /dev/null +++ b/assets/javascripts/prettify/js-modules/extractSourceSpans.js @@ -0,0 +1,99 @@ +/** + * Split markup into a string of source code and an array mapping ranges in + * that string to the text nodes in which they appear. + * + *

+ * The HTML DOM structure:

+ * 
+ * (Element   "p"
+ *   (Element "b"
+ *     (Text  "print "))       ; #1
+ *   (Text    "'Hello '")      ; #2
+ *   (Element "br")            ; #3
+ *   (Text    "  + 'World';")) ; #4
+ *
+ *

+ * corresponds to the HTML + * {@code

print 'Hello '
+ 'World';

}.

+ * + *

+ * It will produce the output:

+ * 
+ * {
+ *   sourceCode: "print 'Hello '\n  + 'World';",
+ *   //                 1         2
+ *   //       012345678901234 5678901234567
+ *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+ * }
+ *
+ *

+ * where #1 is a reference to the {@code "print "} text node above, and so + * on for the other text nodes. + *

+ * + *

+ * 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. + *

+ * + * @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 { + sourceCode: chunks.join('').replace(/\n$/, ''), + spans: spans + }; +} diff --git a/assets/javascripts/prettify/js-modules/extractSourceSpans_test.html b/assets/javascripts/prettify/js-modules/extractSourceSpans_test.html new file mode 100644 index 0000000..090f6e2 --- /dev/null +++ b/assets/javascripts/prettify/js-modules/extractSourceSpans_test.html @@ -0,0 +1,129 @@ + + +Extract Source Spans Test + + + + + + +

Extract Source Spans Test

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Test space preserved in PRE
print 'Hello '
  + '<World>';
^print ^'Hello '^\n^  + '<World>';^
Test class="nocode"
1. print 'Hello '
2.   + '<World>';
^print ^'Hello '^\n^  + '<World>';^
Test whitespace normalized in code
print 'Hello ' + + '<World>';
^print ^'Hello ' + '<World>';^
Test XMP
print 'Hello ' + + '<World>';
^print 'Hello '\n  + '<World>';^
Test tabs
print 'Hello '
+	+ '<World>';
^print 'Hello '\n\t+ '<World>';^
Test number lines output
  • print 'Hello '
  •   + '<World>';
^print ^'Hello '^\n^  + '<World>';^^
+ + + +
+
+ Last modified: Tue Mar 29 16:38:23 PDT 2011 + diff --git a/assets/javascripts/prettify/js-modules/numberLines.js b/assets/javascripts/prettify/js-modules/numberLines.js new file mode 100644 index 0000000..b1c5dab --- /dev/null +++ b/assets/javascripts/prettify/js-modules/numberLines.js @@ -0,0 +1,147 @@ +/** + * 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
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
since it is now flush against a . + 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 Foo
Bar + // should be rewritten to
  • Foo
  • Bar
    • . + 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); +} \ No newline at end of file diff --git a/assets/javascripts/prettify/js-modules/numberLines_test.html b/assets/javascripts/prettify/js-modules/numberLines_test.html new file mode 100644 index 0000000..a074e01 --- /dev/null +++ b/assets/javascripts/prettify/js-modules/numberLines_test.html @@ -0,0 +1,119 @@ + + +Number Lines Test + + + + + + +

    Number Lines Test

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Test Nothing to Split
    Hello, World!
    1. Hello, World!
    Test Normalized Spaces
    Hello, World!
    1. Hello, World!
    Test BR
    Hello,
    World!
    1. Hello,
    2. World!
    Test line breaks
    Hello,
there
World!
    1. Hello,
    2. there
    3. World!
    Test line breaks with followers
    Hello,
there
World!

    1. Hello,
    2. there
    3. World!
    Test nocode
    Hello,
there
World!
    1. Hello,
    2. there
World!
    Test link
    Hello,
there
World!
    1. Hello,
    2. there
    3. World!
    Test blank lines
    One

Three
    1. One
    2.  
    3. Three
    + + + +
    +
    + Last modified: Tue Mar 29 16:44:05 PDT 2011 + diff --git a/assets/javascripts/prettify/js-modules/prettify.js b/assets/javascripts/prettify/js-modules/prettify.js new file mode 100644 index 0000000..4cb7808 --- /dev/null +++ b/assets/javascripts/prettify/js-modules/prettify.js @@ -0,0 +1,861 @@ +// 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. + * + *

    + * For a fairly comprehensive set of languages see the + * README + * 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. + *

    + * Usage:

      + *
    1. include this source file in an html page via + * {@code } + *
    2. define style rules. See the example page for examples. + *
    3. mark the {@code 
      } and {@code } tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code } 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;
+
+(function () {
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  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,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];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  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.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
+  include("regexpPrecederPatterns.pl");
+
+  include("combinePrefixPatterns.js");
+
+  include("extractSourceSpans.js");
+
+  /**
+   * 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 = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** 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;
+
+    /**
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
+     * }</pre>
+     */
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, 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']) {
+      /**
+       * @const
+       */
+      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 types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/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]*|\w+_t\b)/, 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
+      });
+
+  include("numberLines.js");
+
+  include("recombineTagsAndDecorations.js");
+
+  /** 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 {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode 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 (window['console']) {
+        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,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['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.sourceCode;
+      job.sourceCode = 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); } };
+    }
+
+    // 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;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+
+    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];
+        var className = cs.className;
+        if (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.
+          // HTML5 recommends that a language be specified using "language-"
+          // as the prefix instead.  Google Code Prettify supports both.
+          // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+          var langExtension = className.match(langExtensionRe);
+          // Support <pre class="prettyprint"><code class="language-c">
+          var wrapper;
+          if (!langExtension && (wrapper = childContentWrapper(cs))
+              && "CODE" === wrapper.tagName) {
+            langExtension = wrapper.className.match(langExtensionRe);
+          }
+
+          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();
+  }
+
+   /**
+    * 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['prettyPrintOne'] = prettyPrintOne;
+   /**
+    * Pretty print a chunk of code.
+    *
+    * @param {string} sourceCodeHtml code as html
+    * @return {string} code as html, but prettier
+    */
+  window['prettyPrint'] = prettyPrint;
+   /**
+    * Contains functions for creating and registering new language handlers.
+    * @type {Object}
+    */
+  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
+      };
+})();
diff --git a/assets/javascripts/prettify/js-modules/recombineTagsAndDecorations.js b/assets/javascripts/prettify/js-modules/recombineTagsAndDecorations.js
new file mode 100644
index 0000000..9db38ce
--- /dev/null
+++ b/assets/javascripts/prettify/js-modules/recombineTagsAndDecorations.js
@@ -0,0 +1,108 @@
+/**
+ * Breaks {@code job.sourceCode} around style boundaries in
+ * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+ * @param {Object} job like <pre>{
+ *    sourceCode: {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.sourceCode in order
+ * }</pre>
+ * @private
+ */
+function recombineTagsAndDecorations(job) {
+  var isIE = /\bMSIE\b/.test(navigator.userAgent);
+  var newlineRe = /\n/g;
+
+  var source = job.sourceCode;
+  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;
+
+  // Remove all zero-length decorations.
+  decorations[nDecorations] = sourceLength;
+  var decPos, i;
+  for (i = decPos = 0; i < nDecorations;) {
+    if (decorations[i] !== decorations[i + 2]) {
+      decorations[decPos++] = decorations[i++];
+      decorations[decPos++] = decorations[i++];
+    } else {
+      i += 2;
+    }
+  }
+  nDecorations = decPos;
+
+  // Simplify decorations.
+  for (i = decPos = 0; i < nDecorations;) {
+    var startPos = decorations[i];
+    // Conflate all adjacent decorations that use the same style.
+    var startDec = decorations[i + 1];
+    var end = i + 2;
+    while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+      end += 2;
+    }
+    decorations[decPos++] = startPos;
+    decorations[decPos++] = startDec;
+    i = end;
+  }
+
+  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];
+    var styledText;
+    if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+        // Don't introduce spans around empty text nodes.
+        && (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;
+    }
+  }
+}
diff --git a/assets/javascripts/prettify/js-modules/recombineTagsAndDecorations_test.html b/assets/javascripts/prettify/js-modules/recombineTagsAndDecorations_test.html
new file mode 100644
index 0000000..555ee3c
--- /dev/null
+++ b/assets/javascripts/prettify/js-modules/recombineTagsAndDecorations_test.html
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html> <head>
+<title>Recombine Tags And Decorations</title>
+<script src="extractSourceSpans.js"></script>
+<script src="numberLines.js"></script>
+<script src="recombineTagsAndDecorations.js"></script>
+<script src="http://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>
+<link rel="stylesheet" href="../src/prettify.css" type="text/css" />
+<style>
+.ok { background: #dfd }
+.error, .failure { background: #fdd }
+.error { white-space: pre }
+td { font-family: monospace }
+tr { vertical-align: top }
+</style>
+</head>
+
+<body>
+<h1>Recombine Tags And Decorations</h1>
+
+<table border="1" cellpadding="2" cellspacing="0">
+  <tr><th colspan="4">Test Single Decoration</th></tr>
+  <tr>
+    <td><code class="testinput">"Hello, World!"</code></td>
+    <td class="decorations">[0, 'str']</td>
+    <td><code><span class="str">"Hello, World!"</span></code></td>
+  </tr>
+  <tr><th colspan="4">Test Single Span</th></tr>
+  <tr>
+    <td><code class="testinput">print "Hello, &lt;World&gt;!";</code></td>
+    <td class="decorations">[0, 'kwd', 5, 'pln', 6, 'str', 14, 'tag', 21, 'str', 23, 'pun']</td>
+    <td><code><span class="kwd">print</span><span class="pln"> </span><span class="str">"Hello, </span><span class="tag">&lt;World&gt;</span><span class="str">!"</span><span class="pun">;</span></code></td>
+  </tr>
+  <tr><th colspan="4">Test Interleaved</th></tr>
+  <tr>
+    <td><code class="testinput">print "Hello, &lt;<b>World</b>&gt;!";</code></td>
+    <td class="decorations">[0, 'kwd', 5, 'pln', 6, 'str', 14, 'tag', 21, 'str', 23, 'pun']</td>
+    <td><code><span class="kwd">print</span><span class="pln"> </span><span class="str">"Hello, </span><span class="tag">&lt;</span><b><span class="tag">World</span></b><span class="tag">&gt;</span><span class="str">!"</span><span class="pun">;</span></code></td>
+  </tr>
+</table>
+
+<script>
+if (!document.body.getElementsByClassName) {
+  document.body.getElementsByClassName = function (className) {
+    className = className.replace(/\s+/g, ' ').replace(/^\s*|\s*$/g, ' ');
+    var results = [];
+    function walk(node) {
+      if (node.nodeType !== 1) { return; }
+      // This test should be order-insensitive.
+      if ((' ' + node.className + ' ').indexOf(className) >= 0) {
+        results[results.length] = node;
+      }
+      for (var child = node.firstChild; child; child = child.nextSibling) {
+        walk(child);
+      }
+    }
+    walk(document.body);
+    return results;
+  };
+}
+
+setTimeout(function () {
+  var testInputs = Array.prototype.slice.call(
+     document.body.getElementsByClassName('testinput'), 0);
+  for (var i = 0, n = testInputs.length; i < n; ++i) {
+    var testInput = testInputs[i];
+    var decorationsNode = testInput.parentNode.nextSibling;
+    while (decorationsNode.nodeType !== 1) { decorationsNode = decorationsNode.nextSibling; }
+    var testResult = decorationsNode.nextSibling;
+    while (testResult.nodeType !== 1) { testResult = testResult.nextSibling; }
+    var actual = document.createElement('TD');
+    testResult.parentNode.appendChild(actual);
+    var clone = testInput.cloneNode(true);
+    clone.className = '';  // IE
+    clone.removeAttribute('class');  // Not IE.
+    actual.appendChild(clone);
+    var job = extractSourceSpans(clone);
+    job.decorations = eval(decorationsNode.innerText || decorationsNode.textContent);
+    try {
+      recombineTagsAndDecorations(job);
+      var passed = testResult.innerHTML === actual.innerHTML;
+      if (!passed) {
+        console.log(JSON.stringify(testResult.innerHTML) + ' !==\n' + JSON.stringify(actual.innerHTML));
+      }
+      actual.className = passed ? 'ok' : 'failure';
+    } catch (ex) {
+      actual.className = 'error';
+      actual.appendChild(document.createTextNode(
+          'Error: ' + (ex.message || ex)  + '\n' + ex.stack));
+    }
+    actual.className += ' actual';
+  }
+}, 0)</script>
+
+<hr>
+<address></address>
+<!-- hhmts start --> Last modified: Tue Mar 29 10:41:34 PDT 2011 <!-- hhmts end -->
+</body> </html>
diff --git a/assets/javascripts/prettify/js-modules/regexpPrecederPatterns.pl b/assets/javascripts/prettify/js-modules/regexpPrecederPatterns.pl
new file mode 100644
index 0000000..12a5364
--- /dev/null
+++ b/assets/javascripts/prettify/js-modules/regexpPrecederPatterns.pl
@@ -0,0 +1,53 @@
+use strict;
+
+print "
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/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
+ * \@const
+ */
+var REGEXP_PRECEDER_PATTERN = ";
+
+my @preceders = (
+                 "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=",
+                 "&=", "(", "*", "*=",
+                 # "+", "-", ".", "..", "..." handled below
+                 "+=", ",", "-=", "->", "/", "/=", ":", "::", ";",
+                 "<", "<<", "<<=", "<=", "=", "==", "===", ">",
+                 ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[",
+                 "^", "^=", "^^", "^^=", "{", "|", "|=", "||",
+                 "||=", "~", # handles =~ and !~
+                 "break", "case", "continue", "delete",
+                 "do", "else", "finally", "instanceof",
+                 "return", "throw", "try", "typeof"
+                );
+my $pattern = "'(?:^^\\\\.?|[+-]";  # match at beginning or sign.
+foreach my $preceder (@preceders) {
+  $preceder =~ s/([^=<>:&a-z])/\\\\$1/gi;
+  $pattern .= "|$preceder";
+}
+$pattern .= ")\\\\s*'";  # matches at end, and matches empty string
+print "$pattern;\n";
+
+print "
+// 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.
+";
diff --git a/assets/javascripts/prettify/src/lang-apollo.js b/assets/javascripts/prettify/src/lang-apollo.js
new file mode 100644
index 0000000..9fa1d24
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-apollo.js
@@ -0,0 +1,51 @@
+// Copyright (C) 2009 Onno Hommes.
+//
+// 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
+ * Registers a language handler for the AGC/AEA Assembly Language as described
+ * at http://virtualagc.googlecode.com
+ * <p>
+ * This file could be used by goodle code to allow syntax highlight for
+ * Virtual AGC SVN repository or if you don't want to commonize
+ * the header for the agc/aea html assembly listing.
+ *
+ * @author ohommes@alumni.cmu.edu
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // A line comment that starts with ;
+         [PR['PR_COMMENT'],     /^#[^\r\n]*/, null, '#'],
+         // Whitespace
+         [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double quoted, possibly multi-line, string.
+         [PR['PR_STRING'],      /^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/, null, '"']
+        ],
+        [
+         [PR['PR_KEYWORD'], /^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,null],
+         [PR['PR_TYPE'], /^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],
+         // A single quote possibly followed by a word that optionally ends with
+         // = ! or ?.
+         [PR['PR_LITERAL'],
+          /^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],
+         // Any word including labels that optionally ends with = ! or ?.
+         [PR['PR_PLAIN'],
+          /^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],
+         // A printable non-space non-special character
+         [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0()\"\\\';]+/]
+        ]),
+    ['apollo', 'agc', 'aea']);
diff --git a/assets/javascripts/prettify/src/lang-clj.js b/assets/javascripts/prettify/src/lang-clj.js
new file mode 100644
index 0000000..0758335
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-clj.js
@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (C) 2011 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
+ * Registers a language handler for Clojure.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-lisp">(my lisp code)</pre>
+ * The lang-cl class identifies the language as common lisp.
+ * This file supports the following language extensions:
+ *     lang-clj - Clojure
+ *
+ *
+ * I used lang-lisp.js as the basis for this adding the clojure specific
+ * keywords and syntax.
+ *
+ * "Name"    = 'Clojure'
+ * "Author"  = 'Rich Hickey'
+ * "Version" = '1.2'
+ * "About"   = 'Clojure is a lisp for the jvm with concurrency primitives and a richer set of types.'
+ *
+ *
+ * I used <a href="http://clojure.org/Reference">Clojure.org Reference</a> as
+ * the basis for the reserved word list.
+ *
+ *
+ * @author jwall@google.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // clojure has more paren types than minimal lisp.
+         ['opn',             /^[\(\{\[]+/, null, '([{'],
+         ['clo',             /^[\)\}\]]+/, null, ')]}'],
+         // A line comment that starts with ;
+         [PR['PR_COMMENT'],     /^;[^\r\n]*/, null, ';'],
+         // Whitespace
+         [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double quoted, possibly multi-line, string.
+         [PR['PR_STRING'],      /^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/, null, '"']
+        ],
+        [
+         // clojure has a much larger set of keywords
+         [PR['PR_KEYWORD'],     /^(?:def|if|do|let|quote|var|fn|loop|recur|throw|try|monitor-enter|monitor-exit|defmacro|defn|defn-|macroexpand|macroexpand-1|for|doseq|dosync|dotimes|and|or|when|not|assert|doto|proxy|defstruct|first|rest|cons|defprotocol|deftype|defrecord|reify|defmulti|defmethod|meta|with-meta|ns|in-ns|create-ns|import|intern|refer|alias|namespace|resolve|ref|deref|refset|new|set!|memfn|to-array|into-array|aset|gen-class|reduce|map|filter|find|nil?|empty?|hash-map|hash-set|vec|vector|seq|flatten|reverse|assoc|dissoc|list|list?|disj|get|union|difference|intersection|extend|extend-type|extend-protocol|prn)\b/, null],
+         [PR['PR_TYPE'], /^:[0-9a-zA-Z\-]+/]
+        ]),
+    ['clj']);
diff --git a/assets/javascripts/prettify/src/lang-css.js b/assets/javascripts/prettify/src/lang-css.js
new file mode 100644
index 0000000..034bd59
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-css.js
@@ -0,0 +1,78 @@
+// Copyright (C) 2009 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
+ * Registers a language handler for CSS.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-css"></pre>
+ *
+ *
+ * http://www.w3.org/TR/CSS21/grammar.html Section G2 defines the lexical
+ * grammar.  This scheme does not recognize keywords containing escapes.
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // The space production <s>
+         [PR['PR_PLAIN'],       /^[ \t\r\n\f]+/, null, ' \t\r\n\f']
+        ],
+        [
+         // Quoted strings.  <string1> and <string2>
+         [PR['PR_STRING'],
+          /^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/, null],
+         [PR['PR_STRING'],
+          /^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/, null],
+         ['lang-css-str', /^url\(([^\)\"\']*)\)/i],
+         [PR['PR_KEYWORD'],
+          /^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,
+          null],
+         // A property name -- an identifier followed by a colon.
+         ['lang-css-kw', /^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],
+         // A C style block comment.  The <comment> production.
+         [PR['PR_COMMENT'], /^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
+         // Escaping text spans
+         [PR['PR_COMMENT'], /^(?:<!--|-->)/],
+         // A number possibly containing a suffix.
+         [PR['PR_LITERAL'], /^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],
+         // A hex color
+         [PR['PR_LITERAL'], /^#(?:[0-9a-f]{3}){1,2}/i],
+         // An identifier
+         [PR['PR_PLAIN'],
+          /^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],
+         // A run of punctuation
+         [PR['PR_PUNCTUATION'], /^[^\s\w\'\"]+/]
+        ]),
+    ['css']);
+PR['registerLangHandler'](
+    PR['createSimpleLexer']([],
+        [
+         [PR['PR_KEYWORD'],
+          /^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]
+        ]),
+    ['css-kw']);
+PR['registerLangHandler'](
+    PR['createSimpleLexer']([],
+        [
+         [PR['PR_STRING'], /^[^\)\"\']+/]
+        ]),
+    ['css-str']);
diff --git a/assets/javascripts/prettify/src/lang-go.js b/assets/javascripts/prettify/src/lang-go.js
new file mode 100644
index 0000000..f329e29
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-go.js
@@ -0,0 +1,58 @@
+// Copyright (C) 2010 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
+ * Registers a language handler for the Go language..
+ * <p>
+ * Based on the lexical grammar at 
+ * http://golang.org/doc/go_spec.html#Lexical_elements
+ * <p>
+ * Go uses a minimal style for highlighting so the below does not distinguish
+ * strings, keywords, literals, etc. by design.
+ * From a discussion with the Go designers:
+ * <pre>
+ * On Thursday, July 22, 2010, Mike Samuel <...> wrote:
+ * > On Thu, Jul 22, 2010, Rob 'Commander' Pike <...> wrote:
+ * >> Personally, I would vote for the subdued style godoc presents at http://golang.org
+ * >>
+ * >> Not as fancy as some like, but a case can be made it's the official style.
+ * >> If people want more colors, I wouldn't fight too hard, in the interest of
+ * >> encouragement through familiarity, but even then I would ask to shy away
+ * >> from technicolor starbursts.
+ * >
+ * > Like http://golang.org/pkg/go/scanner/ where comments are blue and all
+ * > other content is black?  I can do that.
+ * </pre>
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Whitespace is made up of spaces, tabs and newline characters.
+         [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // Not escaped as a string.  See note on minimalism above.
+         [PR['PR_PLAIN'],       /^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])+(?:\'|$)|`[^`]*(?:`|$))/, null, '"\'']
+        ],
+        [
+         // Block comments are delimited by /* and */.
+         // Single-line comments begin with // and extend to the end of a line.
+         [PR['PR_COMMENT'],     /^(?:\/\/[^\r\n]*|\/\*[\s\S]*?\*\/)/],
+         [PR['PR_PLAIN'],       /^(?:[^\/\"\'`]|\/(?![\/\*]))+/i]
+        ]),
+    ['go']);
diff --git a/assets/javascripts/prettify/src/lang-hs.js b/assets/javascripts/prettify/src/lang-hs.js
new file mode 100644
index 0000000..4a15cf0
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-hs.js
@@ -0,0 +1,101 @@
+// Copyright (C) 2009 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
+ * Registers a language handler for Haskell.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-hs">(my lisp code)</pre>
+ * The lang-cl class identifies the language as common lisp.
+ * This file supports the following language extensions:
+ *     lang-cl - Common Lisp
+ *     lang-el - Emacs Lisp
+ *     lang-lisp - Lisp
+ *     lang-scm - Scheme
+ *
+ *
+ * I used http://www.informatik.uni-freiburg.de/~thiemann/haskell/haskell98-report-html/syntax-iso.html
+ * as the basis, but ignore the way the ncomment production nests since this
+ * makes the lexical grammar irregular.  It might be possible to support
+ * ncomments using the lookbehind filter.
+ *
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Whitespace
+         // whitechar    ->    newline | vertab | space | tab | uniWhite
+         // newline      ->    return linefeed | return | linefeed | formfeed
+         [PR['PR_PLAIN'],       /^[\t\n\x0B\x0C\r ]+/, null, '\t\n\x0B\x0C\r '],
+         // Single line double and single-quoted strings.
+         // char         ->    ' (graphic<' | \> | space | escape<\&>) '
+         // string       ->    " {graphic<" | \> | space | escape | gap}"
+         // escape       ->    \ ( charesc | ascii | decimal | o octal
+         //                        | x hexadecimal )
+         // charesc      ->    a | b | f | n | r | t | v | \ | " | ' | &
+         [PR['PR_STRING'],      /^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,
+          null, '"'],
+         [PR['PR_STRING'],      /^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,
+          null, "'"],
+         // decimal      ->    digit{digit}
+         // octal        ->    octit{octit}
+         // hexadecimal  ->    hexit{hexit}
+         // integer      ->    decimal
+         //               |    0o octal | 0O octal
+         //               |    0x hexadecimal | 0X hexadecimal
+         // float        ->    decimal . decimal [exponent]
+         //               |    decimal exponent
+         // exponent     ->    (e | E) [+ | -] decimal
+         [PR['PR_LITERAL'],
+          /^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,
+          null, '0123456789']
+        ],
+        [
+         // Haskell does not have a regular lexical grammar due to the nested
+         // ncomment.
+         // comment      ->    dashes [ any<symbol> {any}] newline
+         // ncomment     ->    opencom ANYseq {ncomment ANYseq}closecom
+         // dashes       ->    '--' {'-'}
+         // opencom      ->    '{-'
+         // closecom     ->    '-}'
+         [PR['PR_COMMENT'],     /^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],
+         // reservedid   ->    case | class | data | default | deriving | do
+         //               |    else | if | import | in | infix | infixl | infixr
+         //               |    instance | let | module | newtype | of | then
+         //               |    type | where | _
+         [PR['PR_KEYWORD'],     /^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/, null],
+         // qvarid       ->    [ modid . ] varid
+         // qconid       ->    [ modid . ] conid
+         // varid        ->    (small {small | large | digit | ' })<reservedid>
+         // conid        ->    large {small | large | digit | ' }
+         // modid        ->    conid
+         // small        ->    ascSmall | uniSmall | _
+         // ascSmall     ->    a | b | ... | z
+         // uniSmall     ->    any Unicode lowercase letter
+         // large        ->    ascLarge | uniLarge
+         // ascLarge     ->    A | B | ... | Z
+         // uniLarge     ->    any uppercase or titlecase Unicode letter
+         [PR['PR_PLAIN'],  /^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],
+         // matches the symbol production
+         [PR['PR_PUNCTUATION'], /^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]
+        ]),
+    ['hs']);
diff --git a/assets/javascripts/prettify/src/lang-lisp.js b/assets/javascripts/prettify/src/lang-lisp.js
new file mode 100644
index 0000000..3bf75d7
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-lisp.js
@@ -0,0 +1,93 @@
+// Copyright (C) 2008 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
+ * Registers a language handler for Common Lisp and related languages.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-lisp">(my lisp code)</pre>
+ * The lang-cl class identifies the language as common lisp.
+ * This file supports the following language extensions:
+ *     lang-cl - Common Lisp
+ *     lang-el - Emacs Lisp
+ *     lang-lisp - Lisp
+ *     lang-scm - Scheme
+ *
+ *
+ * I used http://www.devincook.com/goldparser/doc/meta-language/grammar-LISP.htm
+ * as the basis, but added line comments that start with ; and changed the atom
+ * production to disallow unquoted semicolons.
+ *
+ * "Name"    = 'LISP'
+ * "Author"  = 'John McCarthy'
+ * "Version" = 'Minimal'
+ * "About"   = 'LISP is an abstract language that organizes ALL'
+ *           | 'data around "lists".'
+ *
+ * "Start Symbol" = [s-Expression]
+ *
+ * {Atom Char}   = {Printable} - {Whitespace} - [()"\'']
+ *
+ * Atom = ( {Atom Char} | '\'{Printable} )+
+ *
+ * [s-Expression] ::= [Quote] Atom
+ *                  | [Quote] '(' [Series] ')'
+ *                  | [Quote] '(' [s-Expression] '.' [s-Expression] ')'
+ *
+ * [Series] ::= [s-Expression] [Series]
+ *            |
+ *
+ * [Quote]  ::= ''      !Quote = do not evaluate
+ *            |
+ *
+ *
+ * I used <a href="http://gigamonkeys.com/book/">Practical Common Lisp</a> as
+ * the basis for the reserved word list.
+ *
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         ['opn',             /^\(+/, null, '('],
+         ['clo',             /^\)+/, null, ')'],
+         // A line comment that starts with ;
+         [PR['PR_COMMENT'],     /^;[^\r\n]*/, null, ';'],
+         // Whitespace
+         [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double quoted, possibly multi-line, string.
+         [PR['PR_STRING'],      /^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/, null, '"']
+        ],
+        [
+         [PR['PR_KEYWORD'],     /^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/, null],
+         [PR['PR_LITERAL'],
+          /^[+\-]?(?:[0#]x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],
+         // A single quote possibly followed by a word that optionally ends with
+         // = ! or ?.
+         [PR['PR_LITERAL'],
+          /^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],
+         // A word that optionally ends with = ! or ?.
+         [PR['PR_PLAIN'],
+          /^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],
+         // A printable non-space non-special character
+         [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0()\"\\\';]+/]
+        ]),
+    ['cl', 'el', 'lisp', 'scm']);
diff --git a/assets/javascripts/prettify/src/lang-lua.js b/assets/javascripts/prettify/src/lang-lua.js
new file mode 100644
index 0000000..7a3f976
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-lua.js
@@ -0,0 +1,59 @@
+// Copyright (C) 2008 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
+ * Registers a language handler for Lua.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-lua">(my Lua code)</pre>
+ *
+ *
+ * I used http://www.lua.org/manual/5.1/manual.html#2.1
+ * Because of the long-bracket concept used in strings and comments, Lua does
+ * not have a regular lexical grammar, but luckily it fits within the space
+ * of irregular grammars supported by javascript regular expressions.
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Whitespace
+         [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double or single quoted, possibly multi-line, string.
+         [PR['PR_STRING'],      /^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/, null, '"\'']
+        ],
+        [
+         // A comment is either a line comment that starts with two dashes, or
+         // two dashes preceding a long bracketed block.
+         [PR['PR_COMMENT'], /^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],
+         // A long bracketed block not preceded by -- is a string.
+         [PR['PR_STRING'],  /^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],
+         [PR['PR_KEYWORD'], /^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/, null],
+         // A number is a hex integer literal, a decimal real literal, or in
+         // scientific notation.
+         [PR['PR_LITERAL'],
+          /^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
+         // An identifier
+         [PR['PR_PLAIN'], /^[a-z_]\w*/i],
+         // A run of punctuation
+         [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]
+        ]),
+    ['lua']);
diff --git a/assets/javascripts/prettify/src/lang-ml.js b/assets/javascripts/prettify/src/lang-ml.js
new file mode 100644
index 0000000..b5a4c17
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-ml.js
@@ -0,0 +1,56 @@
+// Copyright (C) 2008 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
+ * Registers a language handler for OCaml, SML, F# and similar languages.
+ *
+ * Based on the lexical grammar at
+ * http://research.microsoft.com/en-us/um/cambridge/projects/fsharp/manual/spec.html#_Toc270597388
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Whitespace is made up of spaces, tabs and newline characters.
+         [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // #if ident/#else/#endif directives delimit conditional compilation
+         // sections
+         [PR['PR_COMMENT'],
+          /^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,
+          null, '#'],
+         // A double or single quoted, possibly multi-line, string.
+         // F# allows escaped newlines in strings.
+         [PR['PR_STRING'],      /^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])(?:\'|$))/, null, '"\'']
+        ],
+        [
+         // Block comments are delimited by (* and *) and may be
+         // nested. Single-line comments begin with // and extend to
+         // the end of a line.
+         // TODO: (*...*) comments can be nested.  This does not handle that.
+         [PR['PR_COMMENT'],     /^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],
+         [PR['PR_KEYWORD'],     /^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
+         // A number is a hex integer literal, a decimal real literal, or in
+         // scientific notation.
+         [PR['PR_LITERAL'],
+          /^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
+         [PR['PR_PLAIN'],       /^(?:[a-z_][\w']*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],
+         // A printable non-space non-special character
+         [PR['PR_PUNCTUATION'], /^[^\t\n\r \xA0\"\'\w]+/]
+        ]),
+    ['fs', 'ml']);
diff --git a/assets/javascripts/prettify/src/lang-n.js b/assets/javascripts/prettify/src/lang-n.js
new file mode 100644
index 0000000..babe8f3
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-n.js
@@ -0,0 +1,62 @@
+// Copyright (C) 2011 Zimin A.V.
+//
+// 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
+ * Registers a language handler for the Nemerle language.
+ * http://nemerle.org
+ * @author Zimin A.V.
+ */
+(function () {
+  var keywords = 'abstract|and|as|base|catch|class|def|delegate|enum|event|extern|false|finally|'
+         + 'fun|implements|interface|internal|is|macro|match|matches|module|mutable|namespace|new|'
+         + 'null|out|override|params|partial|private|protected|public|ref|sealed|static|struct|'
+         + 'syntax|this|throw|true|try|type|typeof|using|variant|virtual|volatile|when|where|with|'
+         + 'assert|assert2|async|break|checked|continue|do|else|ensures|for|foreach|if|late|lock|new|nolate|'
+         + 'otherwise|regexp|repeat|requires|return|surroundwith|unchecked|unless|using|while|yield';
+
+  var shortcutStylePatterns = [
+        [PR.PR_STRING, /^(?:\'(?:[^\\\'\r\n]|\\.)*\'|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/, null, '"'],
+        [PR.PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/, null, '#'],
+        [PR.PR_PLAIN, /^\s+/, null, ' \r\n\t\xA0']
+  ];
+  
+  var fallthroughStylePatterns = [
+        [PR.PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null],
+        [PR.PR_STRING, /^<#(?:[^#>])*(?:#>|$)/, null],
+        [PR.PR_STRING, /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/, null],
+        [PR.PR_COMMENT, /^\/\/[^\r\n]*/, null],
+        [PR.PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null],
+        [PR.PR_KEYWORD, new RegExp('^(?:' + keywords + ')\\b'), null],
+        [PR.PR_TYPE, /^(?:array|bool|byte|char|decimal|double|float|int|list|long|object|sbyte|short|string|ulong|uint|ufloat|ulong|ushort|void)\b/, null],
+        [PR.PR_LITERAL, /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR.PR_TYPE, /^@[A-Z]+[a-z][A-Za-z_$@0-9]*/, null],
+        [PR.PR_PLAIN, /^'?[A-Za-z_$][a-z_$@0-9]*/i, null],
+        [PR.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'],
+
+        [PR.PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#]*/, null]
+  ];
+  PR.registerLangHandler(PR.createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns), ['n', 'nemerle']);
+})();
diff --git a/assets/javascripts/prettify/src/lang-proto.js b/assets/javascripts/prettify/src/lang-proto.js
new file mode 100644
index 0000000..5395491
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-proto.js
@@ -0,0 +1,35 @@
+// 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
+ * Registers a language handler for Protocol Buffers as described at
+ * http://code.google.com/p/protobuf/.
+ *
+ * Based on the lexical grammar at
+ * http://research.microsoft.com/fsharp/manual/spec2.aspx#_Toc202383715
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](PR['sourceDecorator']({
+        'keywords': (
+            'bytes,default,double,enum,extend,extensions,false,'
+            + 'group,import,max,message,option,'
+            + 'optional,package,repeated,required,returns,rpc,service,'
+            + 'syntax,to,true'),
+        'types': /^(bool|(double|s?fixed|[su]?int)(32|64)|float|string)\b/,
+        'cStyleComments': true
+      }), ['proto']);
diff --git a/assets/javascripts/prettify/src/lang-scala.js b/assets/javascripts/prettify/src/lang-scala.js
new file mode 100644
index 0000000..db9b484
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-scala.js
@@ -0,0 +1,54 @@
+// Copyright (C) 2010 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
+ * Registers a language handler for Scala.
+ *
+ * Derived from http://lampsvn.epfl.ch/svn-repos/scala/scala-documentation/trunk/src/reference/SyntaxSummary.tex
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Whitespace
+         [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double or single quoted string 
+          // or a triple double-quoted multi-line string.
+         [PR['PR_STRING'],
+          /^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,
+          null, '"'],
+         [PR['PR_LITERAL'],     /^`(?:[^\r\n\\`]|\\.)*`?/, null, '`'],
+         [PR['PR_PUNCTUATION'], /^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/, null,
+          '!#%&()*+,-:;<=>?@[\\]^{|}~']
+        ],
+        [
+         // A symbol literal is a single quote followed by an identifier with no
+         // single quote following
+         // A character literal has single quotes on either side
+         [PR['PR_STRING'],      /^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],
+         [PR['PR_LITERAL'],     /^'[a-zA-Z_$][\w$]*(?!['$\w])/],
+         [PR['PR_KEYWORD'],     /^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
+         [PR['PR_LITERAL'],     /^(?:true|false|null|this)\b/],
+         [PR['PR_LITERAL'],     /^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],
+         // Treat upper camel case identifiers as types.
+         [PR['PR_TYPE'],        /^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],
+         [PR['PR_PLAIN'],       /^[$a-zA-Z_][\w$]*/],
+         [PR['PR_COMMENT'],     /^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],
+         [PR['PR_PUNCTUATION'], /^(?:\.+|\/)/]
+        ]),
+    ['scala']);
diff --git a/assets/javascripts/prettify/src/lang-sql.js b/assets/javascripts/prettify/src/lang-sql.js
new file mode 100644
index 0000000..a4adec8
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-sql.js
@@ -0,0 +1,57 @@
+// Copyright (C) 2008 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
+ * Registers a language handler for SQL.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-sql">(my SQL code)</pre>
+ *
+ *
+ * http://savage.net.au/SQL/sql-99.bnf.html is the basis for the grammar, and
+ * http://msdn.microsoft.com/en-us/library/aa238507(SQL.80).aspx as the basis
+ * for the keyword list.
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Whitespace
+         [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // A double or single quoted, possibly multi-line, string.
+         [PR['PR_STRING'],      /^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/, null,
+          '"\'']
+        ],
+        [
+         // A comment is either a line comment that starts with two dashes, or
+         // two dashes preceding a long bracketed block.
+         [PR['PR_COMMENT'], /^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],
+         [PR['PR_KEYWORD'], /^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|MATCH|MERGE|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|USING|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i, null],
+         // A number is a hex integer literal, a decimal real literal, or in
+         // scientific notation.
+         [PR['PR_LITERAL'],
+          /^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
+         // An identifier
+         [PR['PR_PLAIN'], /^[a-z_][\w-]*/i],
+         // A run of punctuation
+         [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]
+        ]),
+    ['sql']);
diff --git a/assets/javascripts/prettify/src/lang-tex.js b/assets/javascripts/prettify/src/lang-tex.js
new file mode 100644
index 0000000..57d0ac4
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-tex.js
@@ -0,0 +1,46 @@
+// Copyright (C) 2011 Martin S.
+//
+// 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
+ * Support for tex highlighting as discussed on
+ * <a href="http://meta.tex.stackexchange.com/questions/872/text-immediate-following-double-backslashes-is-highlighted-as-macro-inside-a-code/876#876">meta.tex.stackexchange.com</a>.
+ *
+ * @author Martin S.
+ */
+
+PR.registerLangHandler(
+    PR.createSimpleLexer(
+        [
+         // whitespace
+         [PR.PR_PLAIN,   /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],
+         // all comments begin with '%'
+         [PR.PR_COMMENT, /^%[^\r\n]*/, null, '%']
+        ],
+        [
+         //[PR.PR_DECLARATION, /^\\([egx]?def|(new|renew|provide)(command|environment))\b/],
+         // any command starting with a \ and contains
+         // either only letters (a-z,A-Z), '@' (internal macros)
+         [PR.PR_KEYWORD, /^\\[a-zA-Z@]+/],
+         // or contains only one character
+         [PR.PR_KEYWORD, /^\\./],
+         // Highlight dollar for math mode and ampersam for tabular
+         [PR.PR_TYPE,    /^[$&]/],
+         // numeric measurement values with attached units
+         [PR.PR_LITERAL,
+          /[+-]?(?:\.\d+|\d+(?:\.\d*)?)(cm|em|ex|in|pc|pt|bp|mm)/i],
+         // punctuation usually occurring within commands
+         [PR.PR_PUNCTUATION, /^[{}()\[\]=]+/]
+        ]),
+    ['latex', 'tex']);
diff --git a/assets/javascripts/prettify/src/lang-vb.js b/assets/javascripts/prettify/src/lang-vb.js
new file mode 100644
index 0000000..5fb4a38
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-vb.js
@@ -0,0 +1,61 @@
+// Copyright (C) 2009 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
+ * Registers a language handler for various flavors of basic.
+ *
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-vb"></pre>
+ *
+ *
+ * http://msdn.microsoft.com/en-us/library/aa711638(VS.71).aspx defines the
+ * visual basic grammar lexical grammar.
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Whitespace
+         [PR['PR_PLAIN'],       /^[\t\n\r \xA0\u2028\u2029]+/, null, '\t\n\r \xA0\u2028\u2029'],
+         // A double quoted string with quotes escaped by doubling them.
+         // A single character can be suffixed with C.
+         [PR['PR_STRING'],      /^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i, null,
+          '"\u201C\u201D'],
+         // A comment starts with a single quote and runs until the end of the
+         // line.
+         [PR['PR_COMMENT'],     /^[\'\u2018\u2019][^\r\n\u2028\u2029]*/, null, '\'\u2018\u2019']
+        ],
+        [
+         [PR['PR_KEYWORD'], /^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i, null],
+         // A second comment form
+         [PR['PR_COMMENT'], /^REM[^\r\n\u2028\u2029]*/i],
+         // A boolean, numeric, or date literal.
+         [PR['PR_LITERAL'],
+          /^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],
+         // An identifier?
+         [PR['PR_PLAIN'], /^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],
+         // A run of punctuation
+         [PR['PR_PUNCTUATION'],
+          /^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],
+         // Square brackets
+         [PR['PR_PUNCTUATION'], /^(?:\[|\])/]
+        ]),
+    ['vb', 'vbs']);
diff --git a/assets/javascripts/prettify/src/lang-vhdl.js b/assets/javascripts/prettify/src/lang-vhdl.js
new file mode 100644
index 0000000..f6410bc
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-vhdl.js
@@ -0,0 +1,34 @@
+/**
+ * @fileoverview
+ * Registers a language handler for VHDL '93.
+ *
+ * Based on the lexical grammar and keywords at
+ * http://www.iis.ee.ethz.ch/~zimmi/download/vhdl93_syntax.html
+ *
+ * @author benoit@ryder.fr
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Whitespace
+         [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0']
+        ],
+        [
+         // String, character or bit string
+         [PR['PR_STRING'], /^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],
+         // Comment, from two dashes until end of line.
+         [PR['PR_COMMENT'], /^--[^\r\n]*/],
+         [PR['PR_KEYWORD'], /^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i, null],
+         // Type, predefined or standard
+         [PR['PR_TYPE'], /^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i, null],
+         // Predefined attributes
+         [PR['PR_TYPE'], /^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i, null],
+         // Number, decimal or based literal
+         [PR['PR_LITERAL'], /^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
+         // Identifier, basic or extended
+         [PR['PR_PLAIN'], /^(?:[a-z]\w*|\\[^\\]*\\)/i],
+         // Punctuation
+         [PR['PR_PUNCTUATION'], /^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]
+        ]),
+    ['vhdl', 'vhd']);
diff --git a/assets/javascripts/prettify/src/lang-wiki.js b/assets/javascripts/prettify/src/lang-wiki.js
new file mode 100644
index 0000000..660423e
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-wiki.js
@@ -0,0 +1,53 @@
+// Copyright (C) 2009 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
+ * Registers a language handler for Wiki pages.
+ *
+ * Based on WikiSyntax at http://code.google.com/p/support/wiki/WikiSyntax
+ *
+ * @author mikesamuel@gmail.com
+ */
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Whitespace
+         [PR['PR_PLAIN'],       /^[\t \xA0a-gi-z0-9]+/, null,
+          '\t \xA0abcdefgijklmnopqrstuvwxyz0123456789'],
+         // Wiki formatting
+         [PR['PR_PUNCTUATION'], /^[=*~\^\[\]]+/, null, '=*~^[]']
+        ],
+        [
+         // Meta-info like #summary, #labels, etc.
+         ['lang-wiki.meta',  /(?:^^|\r\n?|\n)(#[a-z]+)\b/],
+         // A WikiWord
+         [PR['PR_LITERAL'],     /^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/
+          ],
+         // A preformatted block in an unknown language
+         ['lang-',           /^\{\{\{([\s\S]+?)\}\}\}/],
+         // A block of source code in an unknown language
+         ['lang-',           /^`([^\r\n`]+)`/],
+         // An inline URL.
+         [PR['PR_STRING'],
+          /^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],
+         [PR['PR_PLAIN'],       /^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]
+        ]),
+    ['wiki']);
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer']([[PR['PR_KEYWORD'], /^#[a-z]+/i, null, '#']], []),
+    ['wiki.meta']);
diff --git a/assets/javascripts/prettify/src/lang-xq.js b/assets/javascripts/prettify/src/lang-xq.js
new file mode 100644
index 0000000..38ffd72
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-xq.js
@@ -0,0 +1,67 @@
+// Copyright (C) 2011 Patrick Wied
+//
+// 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
+ * Registers a language handler for XQuery.
+ *
+ * To use, include prettify.js and this file in your HTML page.
+ * Then put your code in an HTML tag like
+ *      <pre class="prettyprint lang-xq"></pre>
+ *
+ *
+ * @author Patrick Wied ( patpa7p@live.de )
+ * @version 2010-09-28
+ */
+
+// Falls back to plain for stylesheets that don't style fun.
+var PR_FUNCTION = 'fun pln';
+// Falls back to plaiin for stylesheets that don't style var.
+var PR_VARIABLE = 'var pln';
+
+PR['registerLangHandler'](
+    PR['createSimpleLexer'](
+        [
+         // Matching $var-ia_bles
+         [PR_VARIABLE, /^\$[A-Za-z0-9_\-]+/, null, "$"]
+        ],
+        [
+         // Matching lt and gt operators
+         // Not the best matching solution but you have to differentiate between the gt operator and the tag closing char
+         [PR['PR_PLAIN'], /^[\s=][<>][\s=]/],
+         // Matching @Attributes
+         [PR['PR_LITERAL'], /^\@[\w-]+/],
+         // Matching xml tags
+         [PR['PR_TAG'], /^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+         // Matching single or multiline xquery comments -> (: <text> :)
+         [PR['PR_COMMENT'], /^\(:[\s\S]*?:\)/],
+         // Tokenizing /{}:=;*,[]() as plain
+         [PR['PR_PLAIN'], /^[\/\{\};,\[\]\(\)]$/],
+         // Matching a double or single quoted, possibly multi-line, string.
+         // with the special condition that a { in a string changes to xquery context 
+         [PR['PR_STRING'], /^(?:\"(?:[^\"\\\{]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\\{]|\\[\s\S])*(?:\'|$))/, null, '"\''],
+         // Matching standard xquery keywords
+         [PR['PR_KEYWORD'], /^(?:xquery|where|version|variable|union|typeswitch|treat|to|then|text|stable|sortby|some|self|schema|satisfies|returns|return|ref|processing-instruction|preceding-sibling|preceding|precedes|parent|only|of|node|namespace|module|let|item|intersect|instance|in|import|if|function|for|follows|following-sibling|following|external|except|every|else|element|descending|descendant-or-self|descendant|define|default|declare|comment|child|cast|case|before|attribute|assert|ascending|as|ancestor-or-self|ancestor|after|eq|order|by|or|and|schema-element|document-node|node|at)\b/],
+         // Matching standard xquery types
+         [PR['PR_TYPE'], /^(?:xs:yearMonthDuration|xs:unsignedLong|xs:time|xs:string|xs:short|xs:QName|xs:Name|xs:long|xs:integer|xs:int|xs:gYearMonth|xs:gYear|xs:gMonthDay|xs:gDay|xs:float|xs:duration|xs:double|xs:decimal|xs:dayTimeDuration|xs:dateTime|xs:date|xs:byte|xs:boolean|xs:anyURI|xf:yearMonthDuration)\b/, null],
+         // Matching standard xquery functions
+         [PR_FUNCTION, /^(?:xp:dereference|xinc:node-expand|xinc:link-references|xinc:link-expand|xhtml:restructure|xhtml:clean|xhtml:add-lists|xdmp:zip-manifest|xdmp:zip-get|xdmp:zip-create|xdmp:xquery-version|xdmp:word-convert|xdmp:with-namespaces|xdmp:version|xdmp:value|xdmp:user-roles|xdmp:user-last-login|xdmp:user|xdmp:url-encode|xdmp:url-decode|xdmp:uri-is-file|xdmp:uri-format|xdmp:uri-content-type|xdmp:unquote|xdmp:unpath|xdmp:triggers-database|xdmp:trace|xdmp:to-json|xdmp:tidy|xdmp:subbinary|xdmp:strftime|xdmp:spawn-in|xdmp:spawn|xdmp:sleep|xdmp:shutdown|xdmp:set-session-field|xdmp:set-response-encoding|xdmp:set-response-content-type|xdmp:set-response-code|xdmp:set-request-time-limit|xdmp:set|xdmp:servers|xdmp:server-status|xdmp:server-name|xdmp:server|xdmp:security-database|xdmp:security-assert|xdmp:schema-database|xdmp:save|xdmp:role-roles|xdmp:role|xdmp:rethrow|xdmp:restart|xdmp:request-timestamp|xdmp:request-status|xdmp:request-cancel|xdmp:request|xdmp:redirect-response|xdmp:random|xdmp:quote|xdmp:query-trace|xdmp:query-meters|xdmp:product-edition|xdmp:privilege-roles|xdmp:privilege|xdmp:pretty-print|xdmp:powerpoint-convert|xdmp:platform|xdmp:permission|xdmp:pdf-convert|xdmp:path|xdmp:octal-to-integer|xdmp:node-uri|xdmp:node-replace|xdmp:node-kind|xdmp:node-insert-child|xdmp:node-insert-before|xdmp:node-insert-after|xdmp:node-delete|xdmp:node-database|xdmp:mul64|xdmp:modules-root|xdmp:modules-database|xdmp:merging|xdmp:merge-cancel|xdmp:merge|xdmp:md5|xdmp:logout|xdmp:login|xdmp:log-level|xdmp:log|xdmp:lock-release|xdmp:lock-acquire|xdmp:load|xdmp:invoke-in|xdmp:invoke|xdmp:integer-to-octal|xdmp:integer-to-hex|xdmp:http-put|xdmp:http-post|xdmp:http-options|xdmp:http-head|xdmp:http-get|xdmp:http-delete|xdmp:hosts|xdmp:host-status|xdmp:host-name|xdmp:host|xdmp:hex-to-integer|xdmp:hash64|xdmp:hash32|xdmp:has-privilege|xdmp:groups|xdmp:group-serves|xdmp:group-servers|xdmp:group-name|xdmp:group-hosts|xdmp:group|xdmp:get-session-field-names|xdmp:get-session-field|xdmp:get-response-encoding|xdmp:get-response-code|xdmp:get-request-username|xdmp:get-request-user|xdmp:get-request-url|xdmp:get-request-protocol|xdmp:get-request-path|xdmp:get-request-method|xdmp:get-request-header-names|xdmp:get-request-header|xdmp:get-request-field-names|xdmp:get-request-field-filename|xdmp:get-request-field-content-type|xdmp:get-request-field|xdmp:get-request-client-certificate|xdmp:get-request-client-address|xdmp:get-request-body|xdmp:get-current-user|xdmp:get-current-roles|xdmp:get|xdmp:function-name|xdmp:function-module|xdmp:function|xdmp:from-json|xdmp:forests|xdmp:forest-status|xdmp:forest-restore|xdmp:forest-restart|xdmp:forest-name|xdmp:forest-delete|xdmp:forest-databases|xdmp:forest-counts|xdmp:forest-clear|xdmp:forest-backup|xdmp:forest|xdmp:filesystem-file|xdmp:filesystem-directory|xdmp:exists|xdmp:excel-convert|xdmp:eval-in|xdmp:eval|xdmp:estimate|xdmp:email|xdmp:element-content-type|xdmp:elapsed-time|xdmp:document-set-quality|xdmp:document-set-property|xdmp:document-set-properties|xdmp:document-set-permissions|xdmp:document-set-collections|xdmp:document-remove-properties|xdmp:document-remove-permissions|xdmp:document-remove-collections|xdmp:document-properties|xdmp:document-locks|xdmp:document-load|xdmp:document-insert|xdmp:document-get-quality|xdmp:document-get-properties|xdmp:document-get-permissions|xdmp:document-get-collections|xdmp:document-get|xdmp:document-forest|xdmp:document-delete|xdmp:document-add-properties|xdmp:document-add-permissions|xdmp:document-add-collections|xdmp:directory-properties|xdmp:directory-locks|xdmp:directory-delete|xdmp:directory-create|xdmp:directory|xdmp:diacritic-less|xdmp:describe|xdmp:default-permissions|xdmp:default-collections|xdmp:databases|xdmp:database-restore-validate|xdmp:database-restore-status|xdmp:database-restore-cancel|xdmp:database-restore|xdmp:database-name|xdmp:database-forests|xdmp:database-backup-validate|xdmp:database-backup-status|xdmp:database-backup-purge|xdmp:database-backup-cancel|xdmp:database-backup|xdmp:database|xdmp:collection-properties|xdmp:collection-locks|xdmp:collection-delete|xdmp:collation-canonical-uri|xdmp:castable-as|xdmp:can-grant-roles|xdmp:base64-encode|xdmp:base64-decode|xdmp:architecture|xdmp:apply|xdmp:amp-roles|xdmp:amp|xdmp:add64|xdmp:add-response-header|xdmp:access|trgr:trigger-set-recursive|trgr:trigger-set-permissions|trgr:trigger-set-name|trgr:trigger-set-module|trgr:trigger-set-event|trgr:trigger-set-description|trgr:trigger-remove-permissions|trgr:trigger-module|trgr:trigger-get-permissions|trgr:trigger-enable|trgr:trigger-disable|trgr:trigger-database-online-event|trgr:trigger-data-event|trgr:trigger-add-permissions|trgr:remove-trigger|trgr:property-content|trgr:pre-commit|trgr:post-commit|trgr:get-trigger-by-id|trgr:get-trigger|trgr:document-scope|trgr:document-content|trgr:directory-scope|trgr:create-trigger|trgr:collection-scope|trgr:any-property-content|thsr:set-entry|thsr:remove-term|thsr:remove-synonym|thsr:remove-entry|thsr:query-lookup|thsr:lookup|thsr:load|thsr:insert|thsr:expand|thsr:add-synonym|spell:suggest-detailed|spell:suggest|spell:remove-word|spell:make-dictionary|spell:load|spell:levenshtein-distance|spell:is-correct|spell:insert|spell:double-metaphone|spell:add-word|sec:users-collection|sec:user-set-roles|sec:user-set-password|sec:user-set-name|sec:user-set-description|sec:user-set-default-permissions|sec:user-set-default-collections|sec:user-remove-roles|sec:user-privileges|sec:user-get-roles|sec:user-get-description|sec:user-get-default-permissions|sec:user-get-default-collections|sec:user-doc-permissions|sec:user-doc-collections|sec:user-add-roles|sec:unprotect-collection|sec:uid-for-name|sec:set-realm|sec:security-version|sec:security-namespace|sec:security-installed|sec:security-collection|sec:roles-collection|sec:role-set-roles|sec:role-set-name|sec:role-set-description|sec:role-set-default-permissions|sec:role-set-default-collections|sec:role-remove-roles|sec:role-privileges|sec:role-get-roles|sec:role-get-description|sec:role-get-default-permissions|sec:role-get-default-collections|sec:role-doc-permissions|sec:role-doc-collections|sec:role-add-roles|sec:remove-user|sec:remove-role-from-users|sec:remove-role-from-role|sec:remove-role-from-privileges|sec:remove-role-from-amps|sec:remove-role|sec:remove-privilege|sec:remove-amp|sec:protect-collection|sec:privileges-collection|sec:privilege-set-roles|sec:privilege-set-name|sec:privilege-remove-roles|sec:privilege-get-roles|sec:privilege-add-roles|sec:priv-doc-permissions|sec:priv-doc-collections|sec:get-user-names|sec:get-unique-elem-id|sec:get-role-names|sec:get-role-ids|sec:get-privilege|sec:get-distinct-permissions|sec:get-collection|sec:get-amp|sec:create-user-with-role|sec:create-user|sec:create-role|sec:create-privilege|sec:create-amp|sec:collections-collection|sec:collection-set-permissions|sec:collection-remove-permissions|sec:collection-get-permissions|sec:collection-add-permissions|sec:check-admin|sec:amps-collection|sec:amp-set-roles|sec:amp-remove-roles|sec:amp-get-roles|sec:amp-doc-permissions|sec:amp-doc-collections|sec:amp-add-roles|search:unparse|search:suggest|search:snippet|search:search|search:resolve-nodes|search:resolve|search:remove-constraint|search:parse|search:get-default-options|search:estimate|search:check-options|prof:value|prof:reset|prof:report|prof:invoke|prof:eval|prof:enable|prof:disable|prof:allowed|ppt:clean|pki:template-set-request|pki:template-set-name|pki:template-set-key-type|pki:template-set-key-options|pki:template-set-description|pki:template-in-use|pki:template-get-version|pki:template-get-request|pki:template-get-name|pki:template-get-key-type|pki:template-get-key-options|pki:template-get-id|pki:template-get-description|pki:need-certificate|pki:is-temporary|pki:insert-trusted-certificates|pki:insert-template|pki:insert-signed-certificates|pki:insert-certificate-revocation-list|pki:get-trusted-certificate-ids|pki:get-template-ids|pki:get-template-certificate-authority|pki:get-template-by-name|pki:get-template|pki:get-pending-certificate-requests-xml|pki:get-pending-certificate-requests-pem|pki:get-pending-certificate-request|pki:get-certificates-for-template-xml|pki:get-certificates-for-template|pki:get-certificates|pki:get-certificate-xml|pki:get-certificate-pem|pki:get-certificate|pki:generate-temporary-certificate-if-necessary|pki:generate-temporary-certificate|pki:generate-template-certificate-authority|pki:generate-certificate-request|pki:delete-template|pki:delete-certificate|pki:create-template|pdf:make-toc|pdf:insert-toc-headers|pdf:get-toc|pdf:clean|p:status-transition|p:state-transition|p:remove|p:pipelines|p:insert|p:get-by-id|p:get|p:execute|p:create|p:condition|p:collection|p:action|ooxml:runs-merge|ooxml:package-uris|ooxml:package-parts-insert|ooxml:package-parts|msword:clean|mcgm:polygon|mcgm:point|mcgm:geospatial-query-from-elements|mcgm:geospatial-query|mcgm:circle|math:tanh|math:tan|math:sqrt|math:sinh|math:sin|math:pow|math:modf|math:log10|math:log|math:ldexp|math:frexp|math:fmod|math:floor|math:fabs|math:exp|math:cosh|math:cos|math:ceil|math:atan2|math:atan|math:asin|math:acos|map:put|map:map|map:keys|map:get|map:delete|map:count|map:clear|lnk:to|lnk:remove|lnk:insert|lnk:get|lnk:from|lnk:create|kml:polygon|kml:point|kml:interior-polygon|kml:geospatial-query-from-elements|kml:geospatial-query|kml:circle|kml:box|gml:polygon|gml:point|gml:interior-polygon|gml:geospatial-query-from-elements|gml:geospatial-query|gml:circle|gml:box|georss:point|georss:geospatial-query|georss:circle|geo:polygon|geo:point|geo:interior-polygon|geo:geospatial-query-from-elements|geo:geospatial-query|geo:circle|geo:box|fn:zero-or-one|fn:years-from-duration|fn:year-from-dateTime|fn:year-from-date|fn:upper-case|fn:unordered|fn:true|fn:translate|fn:trace|fn:tokenize|fn:timezone-from-time|fn:timezone-from-dateTime|fn:timezone-from-date|fn:sum|fn:subtract-dateTimes-yielding-yearMonthDuration|fn:subtract-dateTimes-yielding-dayTimeDuration|fn:substring-before|fn:substring-after|fn:substring|fn:subsequence|fn:string-to-codepoints|fn:string-pad|fn:string-length|fn:string-join|fn:string|fn:static-base-uri|fn:starts-with|fn:seconds-from-time|fn:seconds-from-duration|fn:seconds-from-dateTime|fn:round-half-to-even|fn:round|fn:root|fn:reverse|fn:resolve-uri|fn:resolve-QName|fn:replace|fn:remove|fn:QName|fn:prefix-from-QName|fn:position|fn:one-or-more|fn:number|fn:not|fn:normalize-unicode|fn:normalize-space|fn:node-name|fn:node-kind|fn:nilled|fn:namespace-uri-from-QName|fn:namespace-uri-for-prefix|fn:namespace-uri|fn:name|fn:months-from-duration|fn:month-from-dateTime|fn:month-from-date|fn:minutes-from-time|fn:minutes-from-duration|fn:minutes-from-dateTime|fn:min|fn:max|fn:matches|fn:lower-case|fn:local-name-from-QName|fn:local-name|fn:last|fn:lang|fn:iri-to-uri|fn:insert-before|fn:index-of|fn:in-scope-prefixes|fn:implicit-timezone|fn:idref|fn:id|fn:hours-from-time|fn:hours-from-duration|fn:hours-from-dateTime|fn:floor|fn:false|fn:expanded-QName|fn:exists|fn:exactly-one|fn:escape-uri|fn:escape-html-uri|fn:error|fn:ends-with|fn:encode-for-uri|fn:empty|fn:document-uri|fn:doc-available|fn:doc|fn:distinct-values|fn:distinct-nodes|fn:default-collation|fn:deep-equal|fn:days-from-duration|fn:day-from-dateTime|fn:day-from-date|fn:data|fn:current-time|fn:current-dateTime|fn:current-date|fn:count|fn:contains|fn:concat|fn:compare|fn:collection|fn:codepoints-to-string|fn:codepoint-equal|fn:ceiling|fn:boolean|fn:base-uri|fn:avg|fn:adjust-time-to-timezone|fn:adjust-dateTime-to-timezone|fn:adjust-date-to-timezone|fn:abs|feed:unsubscribe|feed:subscription|feed:subscribe|feed:request|feed:item|feed:description|excel:clean|entity:enrich|dom:set-pipelines|dom:set-permissions|dom:set-name|dom:set-evaluation-context|dom:set-domain-scope|dom:set-description|dom:remove-pipeline|dom:remove-permissions|dom:remove|dom:get|dom:evaluation-context|dom:domains|dom:domain-scope|dom:create|dom:configuration-set-restart-user|dom:configuration-set-permissions|dom:configuration-set-evaluation-context|dom:configuration-set-default-domain|dom:configuration-get|dom:configuration-create|dom:collection|dom:add-pipeline|dom:add-permissions|dls:retention-rules|dls:retention-rule-remove|dls:retention-rule-insert|dls:retention-rule|dls:purge|dls:node-expand|dls:link-references|dls:link-expand|dls:documents-query|dls:document-versions-query|dls:document-version-uri|dls:document-version-query|dls:document-version-delete|dls:document-version-as-of|dls:document-version|dls:document-update|dls:document-unmanage|dls:document-set-quality|dls:document-set-property|dls:document-set-properties|dls:document-set-permissions|dls:document-set-collections|dls:document-retention-rules|dls:document-remove-properties|dls:document-remove-permissions|dls:document-remove-collections|dls:document-purge|dls:document-manage|dls:document-is-managed|dls:document-insert-and-manage|dls:document-include-query|dls:document-history|dls:document-get-permissions|dls:document-extract-part|dls:document-delete|dls:document-checkout-status|dls:document-checkout|dls:document-checkin|dls:document-add-properties|dls:document-add-permissions|dls:document-add-collections|dls:break-checkout|dls:author-query|dls:as-of-query|dbk:convert|dbg:wait|dbg:value|dbg:stopped|dbg:stop|dbg:step|dbg:status|dbg:stack|dbg:out|dbg:next|dbg:line|dbg:invoke|dbg:function|dbg:finish|dbg:expr|dbg:eval|dbg:disconnect|dbg:detach|dbg:continue|dbg:connect|dbg:clear|dbg:breakpoints|dbg:break|dbg:attached|dbg:attach|cvt:save-converted-documents|cvt:part-uri|cvt:destination-uri|cvt:basepath|cvt:basename|cts:words|cts:word-query-weight|cts:word-query-text|cts:word-query-options|cts:word-query|cts:word-match|cts:walk|cts:uris|cts:uri-match|cts:train|cts:tokenize|cts:thresholds|cts:stem|cts:similar-query-weight|cts:similar-query-nodes|cts:similar-query|cts:shortest-distance|cts:search|cts:score|cts:reverse-query-weight|cts:reverse-query-nodes|cts:reverse-query|cts:remainder|cts:registered-query-weight|cts:registered-query-options|cts:registered-query-ids|cts:registered-query|cts:register|cts:query|cts:quality|cts:properties-query-query|cts:properties-query|cts:polygon-vertices|cts:polygon|cts:point-longitude|cts:point-latitude|cts:point|cts:or-query-queries|cts:or-query|cts:not-query-weight|cts:not-query-query|cts:not-query|cts:near-query-weight|cts:near-query-queries|cts:near-query-options|cts:near-query-distance|cts:near-query|cts:highlight|cts:geospatial-co-occurrences|cts:frequency|cts:fitness|cts:field-words|cts:field-word-query-weight|cts:field-word-query-text|cts:field-word-query-options|cts:field-word-query-field-name|cts:field-word-query|cts:field-word-match|cts:entity-highlight|cts:element-words|cts:element-word-query-weight|cts:element-word-query-text|cts:element-word-query-options|cts:element-word-query-element-name|cts:element-word-query|cts:element-word-match|cts:element-values|cts:element-value-ranges|cts:element-value-query-weight|cts:element-value-query-text|cts:element-value-query-options|cts:element-value-query-element-name|cts:element-value-query|cts:element-value-match|cts:element-value-geospatial-co-occurrences|cts:element-value-co-occurrences|cts:element-range-query-weight|cts:element-range-query-value|cts:element-range-query-options|cts:element-range-query-operator|cts:element-range-query-element-name|cts:element-range-query|cts:element-query-query|cts:element-query-element-name|cts:element-query|cts:element-pair-geospatial-values|cts:element-pair-geospatial-value-match|cts:element-pair-geospatial-query-weight|cts:element-pair-geospatial-query-region|cts:element-pair-geospatial-query-options|cts:element-pair-geospatial-query-longitude-name|cts:element-pair-geospatial-query-latitude-name|cts:element-pair-geospatial-query-element-name|cts:element-pair-geospatial-query|cts:element-pair-geospatial-boxes|cts:element-geospatial-values|cts:element-geospatial-value-match|cts:element-geospatial-query-weight|cts:element-geospatial-query-region|cts:element-geospatial-query-options|cts:element-geospatial-query-element-name|cts:element-geospatial-query|cts:element-geospatial-boxes|cts:element-child-geospatial-values|cts:element-child-geospatial-value-match|cts:element-child-geospatial-query-weight|cts:element-child-geospatial-query-region|cts:element-child-geospatial-query-options|cts:element-child-geospatial-query-element-name|cts:element-child-geospatial-query-child-name|cts:element-child-geospatial-query|cts:element-child-geospatial-boxes|cts:element-attribute-words|cts:element-attribute-word-query-weight|cts:element-attribute-word-query-text|cts:element-attribute-word-query-options|cts:element-attribute-word-query-element-name|cts:element-attribute-word-query-attribute-name|cts:element-attribute-word-query|cts:element-attribute-word-match|cts:element-attribute-values|cts:element-attribute-value-ranges|cts:element-attribute-value-query-weight|cts:element-attribute-value-query-text|cts:element-attribute-value-query-options|cts:element-attribute-value-query-element-name|cts:element-attribute-value-query-attribute-name|cts:element-attribute-value-query|cts:element-attribute-value-match|cts:element-attribute-value-geospatial-co-occurrences|cts:element-attribute-value-co-occurrences|cts:element-attribute-range-query-weight|cts:element-attribute-range-query-value|cts:element-attribute-range-query-options|cts:element-attribute-range-query-operator|cts:element-attribute-range-query-element-name|cts:element-attribute-range-query-attribute-name|cts:element-attribute-range-query|cts:element-attribute-pair-geospatial-values|cts:element-attribute-pair-geospatial-value-match|cts:element-attribute-pair-geospatial-query-weight|cts:element-attribute-pair-geospatial-query-region|cts:element-attribute-pair-geospatial-query-options|cts:element-attribute-pair-geospatial-query-longitude-name|cts:element-attribute-pair-geospatial-query-latitude-name|cts:element-attribute-pair-geospatial-query-element-name|cts:element-attribute-pair-geospatial-query|cts:element-attribute-pair-geospatial-boxes|cts:document-query-uris|cts:document-query|cts:distance|cts:directory-query-uris|cts:directory-query-depth|cts:directory-query|cts:destination|cts:deregister|cts:contains|cts:confidence|cts:collections|cts:collection-query-uris|cts:collection-query|cts:collection-match|cts:classify|cts:circle-radius|cts:circle-center|cts:circle|cts:box-west|cts:box-south|cts:box-north|cts:box-east|cts:box|cts:bearing|cts:arc-intersection|cts:and-query-queries|cts:and-query-options|cts:and-query|cts:and-not-query-positive-query|cts:and-not-query-negative-query|cts:and-not-query|css:get|css:convert|cpf:success|cpf:failure|cpf:document-set-state|cpf:document-set-processing-status|cpf:document-set-last-updated|cpf:document-set-error|cpf:document-get-state|cpf:document-get-processing-status|cpf:document-get-last-updated|cpf:document-get-error|cpf:check-transition|alert:spawn-matching-actions|alert:rule-user-id-query|alert:rule-set-user-id|alert:rule-set-query|alert:rule-set-options|alert:rule-set-name|alert:rule-set-description|alert:rule-set-action|alert:rule-remove|alert:rule-name-query|alert:rule-insert|alert:rule-id-query|alert:rule-get-user-id|alert:rule-get-query|alert:rule-get-options|alert:rule-get-name|alert:rule-get-id|alert:rule-get-description|alert:rule-get-action|alert:rule-action-query|alert:remove-triggers|alert:make-rule|alert:make-log-action|alert:make-config|alert:make-action|alert:invoke-matching-actions|alert:get-my-rules|alert:get-all-rules|alert:get-actions|alert:find-matching-rules|alert:create-triggers|alert:config-set-uri|alert:config-set-trigger-ids|alert:config-set-options|alert:config-set-name|alert:config-set-description|alert:config-set-cpf-domain-names|alert:config-set-cpf-domain-ids|alert:config-insert|alert:config-get-uri|alert:config-get-trigger-ids|alert:config-get-options|alert:config-get-name|alert:config-get-id|alert:config-get-description|alert:config-get-cpf-domain-names|alert:config-get-cpf-domain-ids|alert:config-get|alert:config-delete|alert:action-set-options|alert:action-set-name|alert:action-set-module-root|alert:action-set-module-db|alert:action-set-module|alert:action-set-description|alert:action-remove|alert:action-insert|alert:action-get-options|alert:action-get-name|alert:action-get-module-root|alert:action-get-module-db|alert:action-get-module|alert:action-get-description|zero-or-one|years-from-duration|year-from-dateTime|year-from-date|upper-case|unordered|true|translate|trace|tokenize|timezone-from-time|timezone-from-dateTime|timezone-from-date|sum|subtract-dateTimes-yielding-yearMonthDuration|subtract-dateTimes-yielding-dayTimeDuration|substring-before|substring-after|substring|subsequence|string-to-codepoints|string-pad|string-length|string-join|string|static-base-uri|starts-with|seconds-from-time|seconds-from-duration|seconds-from-dateTime|round-half-to-even|round|root|reverse|resolve-uri|resolve-QName|replace|remove|QName|prefix-from-QName|position|one-or-more|number|not|normalize-unicode|normalize-space|node-name|node-kind|nilled|namespace-uri-from-QName|namespace-uri-for-prefix|namespace-uri|name|months-from-duration|month-from-dateTime|month-from-date|minutes-from-time|minutes-from-duration|minutes-from-dateTime|min|max|matches|lower-case|local-name-from-QName|local-name|last|lang|iri-to-uri|insert-before|index-of|in-scope-prefixes|implicit-timezone|idref|id|hours-from-time|hours-from-duration|hours-from-dateTime|floor|false|expanded-QName|exists|exactly-one|escape-uri|escape-html-uri|error|ends-with|encode-for-uri|empty|document-uri|doc-available|doc|distinct-values|distinct-nodes|default-collation|deep-equal|days-from-duration|day-from-dateTime|day-from-date|data|current-time|current-dateTime|current-date|count|contains|concat|compare|collection|codepoints-to-string|codepoint-equal|ceiling|boolean|base-uri|avg|adjust-time-to-timezone|adjust-dateTime-to-timezone|adjust-date-to-timezone|abs)\b/],
+         // Matching normal words if none of the previous regular expressions matched
+         [PR['PR_PLAIN'], /^[A-Za-z0-9_\-\:]+/],
+         // Matching whitespaces
+         [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/]
+         ]),
+    ['xq', 'xquery']);
diff --git a/assets/javascripts/prettify/src/lang-yaml.js b/assets/javascripts/prettify/src/lang-yaml.js
new file mode 100644
index 0000000..c2e52b2
--- /dev/null
+++ b/assets/javascripts/prettify/src/lang-yaml.js
@@ -0,0 +1,27 @@
+// Contributed by ribrdb @ code.google.com
+
+/**
+ * @fileoverview
+ * Registers a language handler for YAML.
+ *
+ * @author ribrdb
+ */
+
+PR['registerLangHandler'](
+  PR['createSimpleLexer'](
+    [
+      [PR['PR_PUNCTUATION'], /^[:|>?]+/, null, ':|>?'],
+      [PR['PR_DECLARATION'],  /^%(?:YAML|TAG)[^#\r\n]+/, null, '%'],
+      [PR['PR_TYPE'], /^[&]\S+/, null, '&'],
+      [PR['PR_TYPE'], /^!\S*/, null, '!'],
+      [PR['PR_STRING'], /^"(?:[^\\"]|\\.)*(?:"|$)/, null, '"'],
+      [PR['PR_STRING'], /^'(?:[^']|'')*(?:'|$)/, null, "'"],
+      [PR['PR_COMMENT'], /^#[^\r\n]*/, null, '#'],
+      [PR['PR_PLAIN'], /^\s+/, null, ' \t\r\n']
+    ],
+    [
+      [PR['PR_DECLARATION'], /^(?:---|\.\.\.)(?:[\r\n]|$)/],
+      [PR['PR_PUNCTUATION'], /^-/],
+      [PR['PR_KEYWORD'], /^\w+:[ \r\n]/],
+      [PR['PR_PLAIN'], /^\w+/]
+    ]), ['yaml', 'yml']);
diff --git a/assets/javascripts/prettify/src/prettify.css b/assets/javascripts/prettify/src/prettify.css
new file mode 100644
index 0000000..19d78a4
--- /dev/null
+++ b/assets/javascripts/prettify/src/prettify.css
@@ -0,0 +1,53 @@
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #080 }  /* string content */
+  .kwd { color: #008 }  /* a keyword */
+  .com { color: #800 }  /* a comment */
+  .typ { color: #606 }  /* a type name */
+  .lit { color: #066 }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #660 }
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { padding: 2px; border: 1px solid #888;}
+pre {font-size:12px !important;}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
diff --git a/assets/javascripts/prettify/src/prettify.js b/assets/javascripts/prettify/src/prettify.js
new file mode 100644
index 0000000..eef5ad7
--- /dev/null
+++ b/assets/javascripts/prettify/src/prettify.js
@@ -0,0 +1,28 @@
+var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
+(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
+[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
+f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
+(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
+{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
+t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
+"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
+l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
+q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
+q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
+"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
+a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
+for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
+m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
+a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
+j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
+"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"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,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
+H=[G,"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"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"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"],
+J=[v,"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"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"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"+
+I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
+["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["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"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
+["cv","py"]);k(u({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",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({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",
+hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
+!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
+250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
+PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
diff --git a/assets/javascripts/prettify/src/prettycss.css b/assets/javascripts/prettify/src/prettycss.css
new file mode 100644
index 0000000..d437aff
--- /dev/null
+++ b/assets/javascripts/prettify/src/prettycss.css
@@ -0,0 +1,30 @@
+.com { color: #93a1a1; }
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #93a1a1; }
+.fun { color: #dc322f; }
+.str, .atv { color: #D14; }
+.kwd, .prettyprint .tag { color: #1e347b; }
+.typ, .atn, .dec, .var { color: teal; }
+.pln { color: #48484c; }
+
+.prettyprint {
+  padding: 8px;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+.prettyprint.linenums {
+  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0 0 0 33px; /* IE indents via margin-left */
+}
+ol.linenums li {
+  padding-left: 12px;
+  color: #bebec5;
+  line-height: 20px;
+  text-shadow: 0 1px 0 #fff;
+}
\ No newline at end of file
diff --git a/assets/javascripts/scripts.js b/assets/javascripts/scripts.js
new file mode 100644
index 0000000..b5979cd
--- /dev/null
+++ b/assets/javascripts/scripts.js
@@ -0,0 +1,11 @@
+$(document).ready(function(){
+  prettyPrint();
+
+  // Altera links externos para abrirem em uma nova aba
+  var domain = document.location.protocol+'//'+document.location.host,
+    links = $('.content a').each(function(index,element) {
+    if(element.href.substr(0,domain.length) !== domain) {
+      element.target = '_blank';
+    }
+  });
+});
diff --git a/assets/stylesheets/smallscreens.css b/assets/stylesheets/smallscreens.css
new file mode 100644
index 0000000..e72f868
--- /dev/null
+++ b/assets/stylesheets/smallscreens.css
@@ -0,0 +1,76 @@
+.lnk-fork {
+  display: none;
+}
+
+.limit {
+  width: 90%;
+  margin: 0 auto;
+}
+
+.box {
+  display: block;
+  width: 100%;
+  margin: 0 auto 20px;
+}
+.box:nth-child(even) {margin: 0 auto 20px;}
+
+.box:before {
+  padding: 20px 0;
+  font-size: 2em;
+}
+
+.box h1 {
+  font-size: 1em;
+}
+
+.box p {
+  padding: 10px 10px 7px;
+  line-height: 20px;
+  font-size: 1em;
+}
+
+
+/*****
+****** SIDEBAR
+*****/
+.sidebar {
+  float: none;
+  margin-right: 20px;
+  position: relative;
+  top: -70px;
+}
+
+.navside {
+  margin-right: 0;
+  margin-bottom: 20px;
+  float: none;
+  clear: left;
+  width: 100%;
+}
+
+
+
+.navside ul {position: absolute; top: -1000px}
+
+.navside:target ul {
+  position: relative;
+  top: 0;
+}
+
+.navside h3:before {
+  display: inline-block;
+  content: " ";
+  position: absolute;
+  right: 15px;
+  top: 20px;
+  width: 10px;
+  height: 5px;
+  background: url(../img/arrow-menu.png) no-repeat center;
+  background-size: 100%;
+  -webkit-transform: rotate(-90deg);
+}
+
+.navside:target h3:before {
+  background: url(../img/arrow-menu.png) no-repeat center;
+  -webkit-transform: rotate(0deg);
+}
diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
new file mode 100644
index 0000000..0ab99d3
--- /dev/null
+++ b/assets/stylesheets/style.css
@@ -0,0 +1,347 @@
+/* -------------------------------------
+    GLOBAL
+------------------------------------- */
+* {
+  margin:0;
+  padding:0;
+}
+body {
+  font-family: 'Lato', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+  font-size: 100%;
+  background-color: #e1e1e1;
+}
+.limit {max-width: 900px; margin: 0 auto;}
+
+header  {
+  padding: 40px 0 100px;
+  background: rgb(41,41,41);
+  overflow: hidden;
+  color: #FFF;
+  position: relative;
+}
+
+header .limit {position: relative; overflow: hidden;}
+header h1 a {color: #FFF; text-decoration: none;}
+header h1 {
+  font-weight: 500;
+  text-transform: uppercase;
+  max-width: 310px;
+  float: left;
+}
+header h1 img {max-width: 100%;}
+
+header h2 {
+  float: right;
+  font-weight: 300;
+  padding: 3px 0 0;
+}
+
+.socialLinks {position: absolute; right: 0; bottom: 10px;}
+
+.socialLinks li {display:inline; list-style:none;}
+
+.socialLinks li a {
+  display: inline-block;
+  width:20px; height:20px;
+  background:url(http://tableless.com.br/wp-content/themes/tableless/img/social.png) no-repeat;
+  margin-left: 10px;
+  opacity:0.7;
+  text-indent: -9999px;
+  overflow: hidden;
+}
+.socialLinks li a:hover {opacity:1;}
+
+.socialLinks a.ico-twitter {background-position:2px center;}
+.socialLinks a.ico-facebook {background-position:-38px center;}
+.socialLinks a.ico-rss {background-position:-76px center;}
+.socialLinks a.ico-google {background-position:-117px center;}
+
+.btn {
+  background: rgb(95,134,255);
+  background: -moz-linear-gradient(top,  rgba(95,134,255,1) 0%, rgba(88,126,239,1) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(95,134,255,1)), color-stop(100%,rgba(88,126,239,1)));
+  background: -webkit-linear-gradient(top,  rgba(95,134,255,1) 0%,rgba(88,126,239,1) 100%);
+  background: -o-linear-gradient(top,  rgba(95,134,255,1) 0%,rgba(88,126,239,1) 100%);
+  background: -ms-linear-gradient(top,  rgba(95,134,255,1) 0%,rgba(88,126,239,1) 100%);
+  background: linear-gradient(to bottom,  rgba(95,134,255,1) 0%,rgba(88,126,239,1) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f86ff', endColorstr='#587eef',GradientType=0 );
+
+  border: 1px solid #476eef;
+  border-radius: 3px;
+  color: #FFF;
+  text-decoration: none;
+  padding: 10px 15px;
+  font-size: 0.9em;
+  letter-spacing: 1px;
+  margin: 20px auto 0;
+  width: 180px;
+  display: block;
+  text-align: center;
+}
+.btn:hover {opacity: 0.9;}
+
+/* -------------------------------------
+                 SIDEBAR
+--------------------------------------*/
+.sidebar {
+  float: left;
+  width: 225px;
+  margin-right: 20px;
+  position: relative;
+  top: -70px;
+}
+
+.navside {
+  box-shadow: 0 0 7px 0px rgba(0,0,0,0.2);
+  background: #FFF;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  float: left;
+  clear: left;
+  width: 225px;
+  position: relative;
+  top: -70px;
+}
+
+.navside h3 {
+  text-transform: uppercase;
+  font-size: 0.8em;
+  cursor: default;
+  background: rgba(0,0,0,0.13);
+  border-bottom: 1px solid rgba(0,0,0,0.07);
+}
+.navside h3 a {
+  color: #000;
+  text-decoration: none;
+  padding: 15px 20px;
+  display: block;
+}
+
+.navside li {list-style: none;}
+
+.navside li a {
+  display: block;
+  padding: 15px 20px;
+  font-size:0.8em;
+  text-decoration: none;
+  border-top: 1px solid #EFEFEF;
+  color: rgba(0,0,0,0.7);
+}
+
+.navside li a:hover {
+  background: rgba(0,0,0,0.07);
+  color: rgba(0,0,0,0.9);
+}
+
+/* -------------------------------------
+                 ARTICLE
+--------------------------------------*/
+.content {
+  box-shadow: 0 0 7px 0px rgba(0,0,0,0.2);
+  background: #FFF;
+  padding: 0 0 30px;
+  position: relative;
+  top: -70px;
+}
+article.content {overflow: hidden;}
+.nobg {background: none; box-shadow: none;}
+
+.box {
+  display: inline-block;
+  width: 48.3%;
+  text-align: center;
+  margin-right: 3%;
+  margin-bottom: 30px;
+  padding: 0 0 30px 0;
+  vertical-align: top;
+  box-shadow: 0 0 7px 0px rgba(0,0,0,0.2);
+  background: #FFF;
+}
+
+.box:nth-child(even) {margin-right: 0;}
+
+article img {
+    max-width: 100%;
+    display: block;
+    margin: auto;
+}
+
+.box:before {
+  text-align: center;
+  background: yellow;
+  content: "HTML";
+  display: block;
+  padding: 40px 0;
+  font-weight: 300;
+  font-size: 3em;
+  color: #FFF;
+  text-transform: uppercase;
+}
+
+.box.concept-box:before {
+  content: "O Básico";
+  background-color: #7f8c8d;
+}
+
+.box.html-box:before {
+  content: "HTML";
+  background-color: #EF4523;
+}
+.box.css-box:before {
+  content: "CSS";
+  background-color: #27ae60;
+}
+
+.box.js-box:before {
+  content: "JS";
+  background-color: #F6D54A;
+  color: #323330;
+}
+
+.box h1 {
+  font-size: 1.5em;
+  font-weight: 300;
+  padding: 10px 20px 0;
+  margin: 0;
+  display: none;
+}
+
+article h1 {
+  font-size: 2em;
+  font-weight: 500;
+  padding-top: 30px;
+  padding-bottom: 5px;
+}
+article h1 + h2 {
+  font-weight: 300;
+  padding: 0 20px 30px;
+  margin-bottom: 30px;
+  font-size: 1.4em;
+  border-bottom: 1px solid rgba(0,0,0,0.15)
+}
+
+article h2 {
+  font-weight: 500;
+  padding: 20px 0 10px;
+}
+
+article h3 {
+  font-weight: 500;
+  padding-bottom: 10px;
+  padding-top: 15px;
+}
+
+article h4 {
+  font-weight: normal;
+  padding-top: 15px;
+}
+
+.box p,
+article p {
+  font-weight: 500;
+  font-size: 0.9em;
+  line-height: 23px;
+  margin-bottom: 15px;
+  color: rgba(0,0,0,0.7);
+}
+
+.box p {
+  padding: 20px 20px 10px;
+  line-height: 30px;
+  font-size: 1.2em;
+  font-weight: 300;
+}
+
+.box li,
+article li {
+  line-height: 23px;
+  font-weight: 500;
+  font-size: 0.9em;
+  color: rgba(0,0,0,0.7);
+}
+
+article p,
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article li {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+article ul {
+  margin-bottom: 20px;
+  margin-left: 40px;
+}
+article ul li {padding-left: 0  }
+
+article pre {margin: 20px 0; overflow-x: auto}
+
+p code {
+  font-weight: bold;
+  font-family: courier, sans-serif;
+}
+
+#questions {
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  top: -600px;
+  margin: 0 0 0 -285px;
+  -webkit-transition: all .3s linear;
+  -moz-transition: all .3s linear;
+  -ms-transition: all .3s linear;
+  transition: all .3s linear;
+}
+
+#questions:target {
+  opacity: 1;
+  top: 121px;
+}
+
+.lnk-fork {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 0;
+  z-index: 1;
+}
+
+.example {
+  background: #EFEFEF;
+  border: 1px solid #CCC;
+  margin: 20px 0;
+  padding: 25px 0;
+}
+
+.example h1 {
+  margin: 0;
+  padding: 0 20px;
+}
+dl {
+  overflow: hidden;
+  padding: 0 20px;
+}
+dt {
+  background-color: #eee;
+  border: 1px solid #ccc;
+  border-radius: 5px 5px 0 0;
+  padding: 5px;
+}
+dd {
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 5px 5px;
+  margin-bottom: 20px;
+  padding: 15px 20px 0px;
+}
+dd p {
+  padding-left: 0;
+  padding-right: 0;
+}
+hr {
+  color: rgba(0,0,0,0.15);
+  margin: 20px 0;
+}
diff --git a/index.html b/index.html
index 682efed..f77c055 100644
--- a/index.html
+++ b/index.html
@@ -1,243 +1,31 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-<head>
-	<title>Para iniciantes</title>
-	<meta charset="utf-8">
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="description" content="Informações básicas sobre desenvolvimento front-end para iniciantes.">
-
-    <link href="css/normalize.css" rel="stylesheet">
-    <link href="css/functional-classes.css" rel="stylesheet">
-    <link href="css/fonts/style.css" rel="stylesheet">
-    <link href="css/gallery/gallery.build.css" rel="stylesheet">
-    <link href="css/gallery/gallery.theme.css" rel="stylesheet">
-    <link href="css/style.css" rel="stylesheet">
-</head>
-<body>
-
-<div class="gallery items-11">
-  <div id="item-1" class="control-operator"></div>
-  <div id="item-2" class="control-operator"></div>
-  <div id="item-3" class="control-operator"></div>
-  <div id="item-4" class="control-operator"></div>
-  <div id="item-5" class="control-operator"></div>
-  <div id="item-6" class="control-operator"></div>
-  <div id="item-7" class="control-operator"></div>
-  <div id="item-8" class="control-operator"></div>
-  <div id="item-9" class="control-operator"></div>
-  <div id="item-10" class="control-operator"></div>
-  <div id="item-11" class="control-operator"></div>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-code">O que é desenvolvimento front-end?</h1>
-				<h2>Um guia para iniciantes na área</h2>
-				<p class="txtCenter">A ideia é que você, que está começando, tenha o mínimo de informação e saiba por onde começar.</p>
-			</article>
-		</div>
-	</figure>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-earth">O que é o W3C?</h1>
-				<p><a href="http://www.w3.org/">W3C</a> (World Wide Web Consortium) é uma organização sem fins lucrativos criado pelo Tim Berners-Lee (esse cara criou a web!). Diversas empresas como Microsoft, Google, Yahoo!, Samsung, Nokia e <a href="http://www.w3.org/Consortium/Member/List" title="veja a lista de membros">uma pancada de outras</a>, investem dinheiro no W3C para que ele pesquise e desenvolva novas tecnologias para web.</p>
-				<p>O W3C é quem regulamenta e cria padrões de codificação para internet. Se não tiver ninguém para criar, testar, ter novas ideias e etc, isso tudo vira bagunça, por isso o W3C faz esse papel.
-				</p>
-			</article>
-		</div>
-	</figure>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-code">O termo front-end / client-side</h1>
-				<p>Quando codificamos algum site ou serviço para internet, nos referimos a dois tipos de linguagem: a linguagem back-end e a front-end. O dev <strong>back-end</strong> (ou server-side), é o responsável em programar as funcionalidades do site/serviço escrevendo código em linguagens como <strong>PHP, Ruby, Python, Java, etc</strong>. </p><p>O dev <strong>front-end</strong> (ou client-side) é responsável por implementar o design do layout usando códigos de <strong>HTML, CSS e Javascript</strong>.</p>
-			</article>
-		</div>
-	</figure>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-code">O termo front-end / client-side</h1>
-				<p>Por exemplo: se criarmos um script em linguagem back-end (php, asp, java, ruby etc) que apenas calcula a soma de 2 + 2, será o SERVIDOR (ou back, o server) que calculará este resultado. Se fizermos esse cálculo em alguma linguagem front-end, como o Javascript, quem calcula essa conta é o BROWSER do usuário. Por isso o termo <strong>client</strong> ou <strong>front</strong>.</p>
-
-				<div class="info">
-					<span class="icon-layers">
-						Cálculo no Servidor
-					</span>
-					<span class="middleEqual">=</span>
-					<span class="icon-console">
-						Back-end ou Server-side
-					</span>
-				</div>
-				<br>
-				<div class="info">
-					<span class="icon-laptop">
-						Cálculo no Browser
-					</span>
-					<span class="middleEqual">=</span>
-					<span class="icon-code">
-						Client-side ou Front-end
-					</span>
-				</div>
-			</article>
-		</div>
-	</figure>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-stack">Desenvolvimento em Camadas</h1>
-				<p class="txtCenter">O desenvolvimento front-end é dividido em 3 camadas independentes:</p>
-				<div class="info">
-					<span class="icon-html5">
-						<p class="txtCenter">Informação <br><strong>HTML</strong></p>
-					</span>
-					<span class="icon-css3">
-						<p class="txtCenter">Formatação <br><strong>CSS</strong></p>
-					</span>
-					<span class="icon-rocket">
-						<p class="txtCenter">Comportamento <br><strong>JS</strong></p>
-					</span>
-				</div>
-				<p class="cBoth txtCenter">
-					Leia <a href="http://tableless.com.br/camadas-de-desenvolvimento-client-side/">mais sobre desenvolvimento em camadas aqui</a>.
-				</p>
-			</article>
-		</div>
-	</figure>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-html5">HTML</h1>
-		<p>O HTML é uma linguagem de marcação. Isso quer dizer que você marca com tags as informações da página. Por exemplo, se eu quiser criar um texto em negrito, eu escrevo algo assim:</p>
-		<p>&lt;strong&gt;<strong>texto em negrito</strong>&lt;/strong&gt;</p>
-		<p>Para saber mais sobre o que é HTML, visite o link: <a href="http://tableless.com.br/o-que-html-basico/">O que é HTML e para que serve?</a></p>
-			</article>
-		</div>
-	</figure>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-css3">CSS</h1>
-				<p>O CSS é uma linguagem de formatação. Ele é responsável por deixar as coisas mais bonitas, com o visual exatamente igual ao layout criado pelo designer. Sua sintaxe é muito simples:</p>
-				<div class="txtLeft" style="width: 500px; margin: 0 auto;">
-					<p class="fLeft" style="margin-right: 100px">
-						<strong>seletor</strong> {<br>
-							&nbsp;&nbsp;&nbsp;&nbsp;propriedade: valor;
-						<br>}
-					</p>
-					<p class="fLeft">
-						<strong>div</strong> {<br>
-							&nbsp;&nbsp;&nbsp;&nbsp;background: white;
-						<br>}
-					</p>
-				</div>
-			</article>
-		</div>
-	</figure>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-rocket">Javascript</h1>
-				<p>Javascript é uma linguagem de programação front-end, que manipula o CSS e o HTML para que você possa executar comportamentos específicos, como animações, mudanças de valores, inserção de conteúdo e outras tarefas. O Javascript então cuida do comportamento do seu site.</p>
-				<p>Existem muitos frameworks que facilitam o trabalho com Javascript, abstraindo o código original por um código mais simples. O <a href="http://jquery.com/">JQuery</a> é um desses frameworks. Ele é o mais utilizado pelo mundo. Por conta da sua facilidade e por causa da sua compatibilidade entre todos os browsers.</p>
-				<p>Mas lembre-se: aprenda pelo menos o básico do JAVASCRIPT antes de aprender qualquer Framework. Só assim você entenderá de fato o código gerado a como os frameworks funcionam.</p>
-			</article>
-		</div>
-	</figure>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-file-xml">Editores de código</h1>
-				<p>Para iniciar, você precisa escolher um editor de código. Para iniciantes, o mais indicado é o Sublime Text. Esse editor também é usado por desenvolvedores experientes por causa da sua simplicidade.<br> <a href="http://www.sublimetext.com/">Baixe o Sublime Text aqui.</a></p>
-				<p>Geralmente há um preconceito contra editores como o Dreamweaver, os chamados WYSIWYG (What You See Is What You Get) por que com o passar do tempo, o desenvolvedor não aprende realmente o HTML e o CSS, utilizando o editor como uma muleta, aprendendo apenas como a ferramenta e não o código propriamente dito.</p>
-			</article>
-		</div>
-	</figure>
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-question">Onde aprender?</h1>
-				<p>Existem vários sites e cursos brasileiros para aprender a desenvolver para web. Alguns deles:</p>
-				<nav>
-					<h2>Websites</h2>
-					<ul>
-						<li><a href="http://tableless.com.br/">Tableless</a></li>
-						<li><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas na Web</a></li>
-						<li><a href="http://loopinfinito.com.br/">Loop Infinito</a></li>
-						<li><a href="http://maujor.com/">Site do Maujor</a></li>
-						<li><a href="http://simplesideias.com.br/">Simples ideias</a></li>
-						<li><a href="http://imasters.com.br/">iMasters</a></li>
-					</ul>
-				</nav>
-				<nav>
-					<h2>Cursos livres</h2>
-					<ul>
-						<li><a href="http://campus.tableless.com.br/">Campus Online do Tableless</a></li>
-						<li><a href="http://tableless.com.br/servicos/aula-particular.php">Aula Particular do Tableless</a></li>
-						<li><a href="http://howtocode.com.br/">HowTo</a></li>
-						<li><a href="http://www.caelum.com.br/">Caelum</a></li>
-					</ul>
-				</nav>
-			</article>
-		</div>
-	</figure>
-
-	<figure class="item">
-		<div class="limit">
-			<article>
-				<h1 class="icon-grin">Obrigado!</h1>
-				<p>Esperamos que tenha aprendido a base do desenvolvimento front-end!<br> Agora é mãos à obra!</p>
-				<p>
-					<a href="http://twitter.com/tableless">@tableless</a><br>
-					<a href="http://facebook.com/tablelessbr">facebook/tablelessbr</a><br>
-					<a href="http://google.com/+tableless">+tableless</a><br>
-				</p>
-			</article>
-		</div>
-	</figure>
-
-
-  <div class="controls">
-    <a href="#item-1" class="control-button">•</a>
-    <a href="#item-2" class="control-button">•</a>
-    <a href="#item-3" class="control-button">•</a>
-    <a href="#item-4" class="control-button">•</a>
-    <a href="#item-5" class="control-button">•</a>
-    <a href="#item-6" class="control-button">•</a>
-    <a href="#item-7" class="control-button">•</a>
-    <a href="#item-8" class="control-button">•</a>
-    <a href="#item-9" class="control-button">•</a>
-    <a href="#item-10" class="control-button">•</a>
-    <a href="#item-11" class="control-button">•</a>
+---
+layout: base
+title: Para iniciantes
+---
+<div class="content limit nobg">
+  <div class="box concept-box">
+    <h1>Comece aqui</h1>
+    <p>Informa&ccedil;&otilde;es b&aacute;sicas e important&iacute;ssimas para voc&ecirc; n&atilde;o se perder no caminho.</p>
+    <a href="{{site.baseurl}}/manual/obasico/" class="btn">Continue lendo</a>
+  </div>
+  <div class="box html-box">
+    <h1>O que &eacute; HTML?</h1>
+    <p>Saiba como funciona o HTML e quais as suas principais tags.</p>
+    <a href="{{site.baseurl}}/manual/html/" class="btn">Continue lendo</a>
+  </div>
+  <div class="box css-box">
+    <h1>O que é CSS?</h1>
+    <p>Entenda como funciona a linguagem visual que formata o layout de sites.</p>
+    <a href="{{site.baseurl}}/manual/css/" class="btn">Continue lendo</a>
+  </div>
+  <div class="box js-box">
+    <h1>O que é JavaScript?</h1>
+    <p>Como funciona o JavaScript, linguagem usada para controlar elementos e muito mais.</p>
+    <a href="{{site.baseurl}}/manual/js/" class="btn">Continue lendo</a>
   </div>
 </div>
 
-<a href="http://tableless.com.br/" class="logo-tableles" title="Tableless - Tentando ajudar a todos"><img src="img/logo-tableless.png"></a>
-
-<a href="https://github.com/tableless/iniciantes" class="lnk-fork"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-
-<script src="js/script.js"></script>
-
-<script type="text/javascript">
-
-  var _gaq = _gaq || [];
-  _gaq.push(['_setAccount', 'UA-335027-1']);
-  _gaq.push(['_setDomainName', 'tableless.com.br']);
-  var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
-  _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
-  _gaq.push(['_trackPageview']);
-
-</script>
-
-</body>
-</html>
+<article class="content limit">
+  <h1>Sobre este guia</h1>
+  <p>Este guia foi criado pela comunidade brasileira de desenvolvimento web para ajudar iniciantes da área que queiram encontrar conteúdo básico de qualidade e assim ingressar na área com mais confian&ccedil;a e conhecimento. Aproveite e divulgue o máximo possível!</p>
+</article>
diff --git a/manual/css/background.html b/manual/css/background.html
new file mode 100644
index 0000000..23fdff0
--- /dev/null
+++ b/manual/css/background.html
@@ -0,0 +1,106 @@
+---
+layout: interna
+title: Propriedade Background
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Propriedade Background</h1>
+  <h2>Inserindo fundo nos elementos</h2>
+  <p>O background trata do fundo dos elementos. O elemento que mais recebe esta propriedade é o <i>body</i>.</p>
+  <p>As propriedades do background são:</p>
+  <dl>
+    <dt>color</dt>
+    <dd>
+      <p>Define a cor do fundo.</p>
+      <p>Possíveis valores:</p>
+      <ul>
+        <li><b>inherit</b>: Herda o valor do elemento pai.</li>
+        <li><b>transparent</b>: Define cor como transparente.</li>
+        <li><b>&lt;cor&gt;</b>: Define uma determinada cor.</li>
+      </ul>
+<pre class="lang-css prettyprint linenums">
+div {
+  background-color: gray;
+}
+</pre>
+    </dd>
+    <dt>image</dt>
+    <dd>
+      <p>Define a imagem de fundo.</p>
+      <p>Possíveis valores:</p>
+      <ul>
+        <li><b>inherit</b>: Herda o valor do elemento pai.</li>
+        <li><b>none</b>: Indica que não há imagem de fundo.</li>
+        <li><b>url()</b>: Define a localização da imagem de fundo.</li>
+      </ul>
+<pre class="lang-css prettyprint linenums">
+div {
+  background-image: url("../img/bg.png");
+}
+</pre>
+    </dd>
+    <dt>repeat</dt>
+    <dd>
+      <p>Define a posição de repetição da imagem de fundo.</p>
+      <p>Possíveis valores:</p>
+      <ul>
+        <li><b>inherit</b>: Herda o valor do elemento pai.</li>
+        <li><b>repeat</b>: Repete a imagem vertical e horizontalmente.</li>
+        <li><b>repeat-x</b>: Repete a imagem horizontalmente.</li>
+        <li><b>repeat-y</b>: Repete a imagem verticalmente.</li>
+        <li><b>no-repeat</b>: Não repete a imagem.</li>
+      </ul>
+<pre class="lang-css prettyprint linenums">
+div {
+  background-repeat: no-repeat;
+}
+</pre>
+    </dd>
+    <dt>attachment</dt>
+    <dd>
+      <p>Define se a imagem definida irá rolar juntamente com o viewport, ou se irá ficar fixo.</p>
+      <p>Possíveis valores:</p>
+      <ul>
+        <li><b>inherit</b>: Herda o valor do elemento pai.</li>
+        <li><b>fixed</b>: Mantém a imagem de fundo fixa na posição definida independente da rolagem do viewport.</li>
+        <li><b>scroll</b>: A imagem de fundo acompanha a rolagem do viewport.</li>
+      </ul>
+<pre class="lang-css prettyprint linenums">
+div {
+  background-attachment: fixed;
+}
+</pre>
+    </dd>
+    <dt>position</dt>
+    <dd>
+      <p>Define a posição da imagem de fundo. Observe que esta propriedade necessita de atenção de acordo com o <i>background-repeat</i> definido.</p>
+      <p>Possíveis valores:</p>
+      <ul>
+        <li><b>inherit</b>: Herda o valor do elemento pai.</li>
+        <li><b>&lt;porcentagem&gt;</b>: sendo <i>A</i> e <i>B</i> dois números, quando declaramos o position com <i>A</i>% e <i>B</i>%, a posição <i>A</i>,<i>B</i> da imagem ficará na posição <i>A</i>%, <i>B</i>% do elemento.</li>
+        <li><b>&lt;comprimento&gt;</b>: sendo <i>A</i> e <i>B</i> dois números, quando declaramos o position com <i>A</i>px e <i>B</i>px, a posição <i>A</i>,<i>B</i> da imagem ficará na posição <i>A</i>px, <i>B</i>px do elemento.</li>
+        <li><b>top</b>: Equivale a 0% na posição vertical.</li>
+        <li><b>bottom</b>: Equivale a 100% na posição vertical.</li>
+        <li><b>left</b>: Equivale a 0% na posição horizontal.</li>
+        <li><b>right</b>: Equivale a 100% na posição horizontal.</li>
+        <li><b>center</b>: Caso não tenha sido declarado um valor horizontal, equivale a 50% na posição horizontal, ou, caso não tenha sido declarado um valor vertical, equivale a 50% na posição vertical.</li>
+      </ul>
+<pre class="lang-css prettyprint linenums">
+div {
+  background-position: top center;
+}
+</pre>
+    </dd>
+    <dt>background</dt>
+    <dd>
+      <p>É uma propriedade abreviada que une todas as propriedades do background.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  background: gray url("../img/bg.png") no-repeat fixed top center;
+}
+</pre>
+    </dd>
+  </dl>
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/css/box-model.html b/manual/css/box-model.html
new file mode 100644
index 0000000..67a9469
--- /dev/null
+++ b/manual/css/box-model.html
@@ -0,0 +1,133 @@
+---
+layout: interna
+title: Box Model
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Box Model</h1>
+  <h2>Entendendo como funciona elementos no HTML</h2>
+
+  <p>Sempre quando vamos estilizar algum elemento via CSS, é comum, e precisamos estar cientes, que alguma alteração que iremos fazer possa impactar em outros elementos. Isso fica fácil de compreender quando entendemos o conceito de box model.</p>
+
+  <p>Basicamente, a idéia do box model é composta por quatro partes:</p>
+  <ul>
+    <li>conteúdo</li>
+    <li>espaçamento</li>
+    <li>bordas</li>
+    <li>margens</li>
+  </ul>
+
+  <p>Resumindo, podemos dizer que o <strong>box model</strong> trata-se de como as 4 propriedades acima se relacionam para compor a dimensão do elemento.</p>
+
+  <img src="/iniciantes/assets/img/box-model.png" alt="Imagem demonstrando o conceito de box-model">
+
+<pre class="lang-css prettyprint linenums">
+.classe {
+    width: 50px;
+    height: 50px;
+    border: 1px solid gray;
+    padding: 10px 20px;
+}
+</pre>
+
+  <p>Se aplicarmos a classe acima em um elemento, ele vai ter as dimensões que setamos (<i>50 pixels de altura e largura</i>), certo? Errado. O elemento vai ser renderizado com <i>72 pixels de altura e 92 pixels de largura</i>. Isso acontece devido ao fato das propriedades <i>padding</i> e <i>border</i> serem somadas à largura e altura já definidas, aumentando as dimensões do elemento. Isso nos leva a ver que as propriedades <i>width</i> e <i>height</i> definem as dimensões do seu conteúdo e não do elemento como um todo.</p>
+
+  <dl>
+    <dt>Largura</dt>
+    <dd><p><strong>50</strong> (largura definida) + <br><strong>20</strong> (padding left) + <br><strong>20</strong> (padding right) + <br><strong>1</strong> (border left) + <br><strong>1</strong> (border right) => <strong>92</strong> pixels de largura</p></dd>
+  </dl>
+
+  <dl>
+    <dt>Altura</dt>
+    <dd><p><strong>50</strong> (altura definida) + <br><strong>10</strong> (padding top) + <br><strong>10</strong> (padding bottom) + <br><strong>1</strong> (border top) + <br><strong>1</strong> (border bottom) => <strong>72</strong> pixels de altura</p></dd>
+  </dl>
+
+  <p>Um exemplo prático pra vermos a dor de cabeça que você pode ter no seu dia a dia. Imagine que você precise ter um elemento que ocupe 100% da largura disponível. Mas também precisa que esse elemento tenha <i>10 pixels</i> de <i>padding</i> e uma borda de <i>1 pixel</i>.</p>
+
+<pre class="lang-css prettyprint linenums">
+.dor-de-cabeca {
+    width: 100%;
+    padding: 10px;
+    border: solid 1px gray;
+}
+</pre>
+
+  <p>Seu elemento com a classe <code>dor-de-cabeca</code> ultrapassa o limite de 100% que você tinha definido, provavelmente <i>quebrando</i> o layout. A nova largura dele é resultante da soma: 100% (largura definida) + 20 pixels (padding left e right) + 2 pixels (border left e right).</p>
+
+  <h3>A propriedade box-sizing</h3>
+
+  <p>Já vimos o tanto de facilidades que o <i>CSS3</i> trouxe para a vida dos desenvolvedores. Uma delas é a propriedade <code>box-sizing</code> que permite que mudemos o comportamento do box-model.</p>
+
+  <p>Por padrão, todos os elementos possuem o valor <code>content-box</code> para essa propriedade. Trata-se do que vimos nos exemplos acima: o box-model é definido apenas pelo conteúdo.</p>
+
+<pre class="lang-css prettyprint linenums">
+box-sizing: content-box;
+</pre>
+
+  <p>Um outro exemplo para exemplificar o box-model com o uso do <code>content-box</code>. Considere os elementos, abaixo:</p>
+
+<pre class="lang-css prettyprint linenums">
+.elemento1 {
+    background: #ddd;
+    width: 250px;
+    height: 50px;
+}
+
+.elemento2 {
+    background: #ddd;
+    width: 250px;
+    height: 50px;
+    padding: 0 50px;
+}
+</pre>
+
+  <img src="/iniciantes/assets/img/box-model-content-box.png" alt="Imagem demonstrando o valor content-box para a propriedade box-sizing e as diferenças no cálculo da largura de elementos">
+
+  <p>Os elementos são definidos com a mesma largura, mas como podemos ver na imagem acima, o <code>elemento2</code> é renderizado maior devido ao <code>padding</code>.</p>
+
+<h3>A solução border-box</h3>
+
+  <p>A propriedade <code>box-sizing</code> permite um novo valor que resolve todos os problemas apresentados nos exemplos anteriores:</p>
+
+<pre class="lang-css prettyprint linenums">
+    box-sizing: border-box;
+</pre>
+
+  <p>O que ela faz? Simples. Ela altera o comportamento do box-model, fazendo com que o navegador calcule a largura/altura do elemento contando não apenas o seu conteúdo (como visto no <code>content-box</code>), mas também considerando o <code>padding</code> (espaçamento) e <code>border</code> (borda) do elemento.</p>
+
+  <p>O exemplo anterior, com a aplicação do <code>border-box:</code></p>
+
+<pre class="lang-css prettyprint linenums">
+.elemento1,
+.elemento2 { box-sizing: border-box; }
+
+.elemento1 {
+    background: #ddd;
+    width: 250px;
+    height: 50px;
+}
+
+.elemento2 {
+    background: #ddd;
+    width: 250px;
+    height: 50px;
+    padding: 0 50px;
+}
+</pre>
+
+  <img src="/iniciantes/assets/img/box-model-border-box.png" alt="Imagem demonstrando o valor border-box para a propriedade box-sizing e o novo comportamento do box-model para o cálculo da largura de um elemento">
+
+  <h3>Suporte</h3>
+
+  <p>O  <a href="http://caniuse.com/#search=box-sizing">suporte</a> atual é bem grande, com mais de 90% (em torno de 77% com suporte parcial e 15% com suporte total), o que nos leva a utilizar os prefixos sempre que formos utilizar a propriedade.</p>
+
+<pre class="lang-css prettyprint linenums">
+* {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+}
+</pre>
+</article>
diff --git a/manual/css/class-id.html b/manual/css/class-id.html
new file mode 100644
index 0000000..aa3d273
--- /dev/null
+++ b/manual/css/class-id.html
@@ -0,0 +1,77 @@
+---
+layout: interna
+title: Diferença de CLASS e ID
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Qual a diferença entre CLASS e ID?</h1>
+  <p>Em HTML e CSS, há a possibilidade de aplicar estilos através de 'class' e 'id' e, em JavaScript é possível indentificar algum elemento de uma página por sua classe, id ou tag. Mas qual a diferença entre 'class' e 'id'?</p>
+
+  <h2>O que são classes?</h2>
+  <p>As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a VÁRIOS elementos de uma vez. Exemplo:</p>
+
+  <p>Código CSS:</p>
+<pre class="lang-css prettyprint linenums">
+.classe1 {
+  background: blue;
+}
+</pre>
+
+  <p>Código HTML:</p>
+<pre class="lang-html prettyprint linenums">
+&lt;!DOCTYPE html&gt;
+&lt;html lang=&quot;pt-br&quot;&gt;
+  &lt;head&gt;
+    &lt;title&gt;&lt;/title&gt;
+    &lt;meta charset=&quot;utf-8&quot;&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div class=&quot;classe1&quot;&gt;Div1&lt;/div&gt;
+    &lt;div class=&quot;classe1&quot;&gt;Div2&lt;/div&gt;
+    &lt;div class=&quot;classe1&quot;&gt;Div3&lt;/div&gt;
+    &lt;div class=&quot;classe1&quot;&gt;Div4&lt;/div&gt;
+    &lt;div class=&quot;classe1&quot;&gt;Div5&lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  <p>Então, todas as 'divs' que estiverem com a classe "classe1" estarão com um background azul(blue).</p>
+
+
+  <h2>O que são ids?</h2>
+  <p>As ids são uma forma de identificar um elemento, e devem ser ÚNICAS para cada elemento. É como se fossem impressões digitais de nossos dedos ou RGs. Através delas, pode-se atribuir formatação a um elemento em especial. Exemplo:</p>
+
+  <p>Código CSS:</p>
+<pre class="lang-css prettyprint linenums">
+#idUm {
+  background: blue;
+}
+#idDois {
+  background: yellow;
+}
+#idTres {
+  background: lightblue;
+}
+#idQuatro {
+  background: lightgreen;
+}
+</pre>
+
+  <p>Código HTML:</p>
+<pre class="lang-html prettyprint linenums">
+&lt;!DOCTYPE html&gt;
+&lt;html lang=&quot;pt-br&quot;&gt;
+  &lt;head&gt;
+    &lt;title&gt;&lt;/title&gt;
+    &lt;meta charset=&quot;utf-8&quot;&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div id=&quot;idUm&quot;&gt;Div1&lt;/div&gt;
+    &lt;div id=&quot;idDois&quot;&gt;Div2&lt;/div&gt;
+    &lt;div id=&quot;idTres&quot;&gt;Div3&lt;/div&gt;
+    &lt;div id=&quot;idQuatro&quot;&gt;Div4&lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  <p>Então, como mostra o código acima, não podemos repetir uma 'id'. Deve ser especialmente única para cada elemento.</p>
+</article>
diff --git a/manual/css/display.html b/manual/css/display.html
new file mode 100644
index 0000000..3f4b35e
--- /dev/null
+++ b/manual/css/display.html
@@ -0,0 +1,35 @@
+---
+layout: interna
+title: Propriedade Display
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Propriedade Display</h1>
+  <h2>Entendendo e manipulando o fluxo dos elementos</h2>
+
+  <p>Entender a propriedade <code>display</code> é fundamental para que possamos compreender o fluxo e estruturação de uma página web. Todos os elementos por padrão já possuem um valor para a propriedade e, geralmente estas são <code>block</code> ou <code>inline</code>.</p>
+
+  <p>Essa propriedade CSS especifica o tipo de renderização do elemento na página. Uma definição que pode auxiliar no entendimento da propriedade é a do <a href="https://twitter.com/chriscoyier">Chris Coyier</a>, bastante reconhecido no mundo do CSS, que é a seguinte: </p>
+
+  <p><i>Todo elemento em uma página web é renderizado como uma caixa retangular. A propriedade <code>display</code> de CSS vai determinar como essa caixa vai ser comportar</i></p>
+
+  <h3>Os possíveis tipos</h3>
+
+  <h4>Block</h4>
+  <p>O elemento se comporta como um bloco. Ocupando praticamente toda a largura disponível na página. Elementos de parágrafo (<code>p</code>) e título(<code>h1</code>, <code>h2</code>, ...) possuem esse comportamento por padrão.</p>
+
+  <h4>Inline</h4>
+  <p>O elemento se comporta como um elemento em linha. Exemplos de elemento que se comportam assim são por exemplo as tags <code>span</code> e <code>a</code>.</p>
+
+  <h4>None</h4>
+  <p>Ao contrários dos valores atuais, o valor <code>none</code> permite, informalmente dizendo, que você <i>desative a propriedade do elemento</i>. Quando você utiliza essa propriedade, o elemento e todos seus elementos filhos não são renderizados na página.</p>
+
+  <p>Uma coisa importante a ressaltar que a propriedade <code>display: none</code> não é a mesma coisa da propriedade <code>visibility: hidden</code>. Nessa última o elemento não aparece na tela mas é renderizado na página, ou seja, vemos um <i>espaço vazio</i> no lugar do elemento; já a propriedade <code>display: none</code> não renderiza o elemento e, o espaço que era ocupado por ele, é ocupado pelo elemento seguinte no fluxo do documento.</p>
+
+  <h4>Table</h4>
+  <p>O elemento se comporta como uma tabela.</p>
+
+  <h4>Inline-block</h4>
+  <p>Semelhante ao <code>inline</code>, no entanto, ao definirmos <code>inline-block</code> em um elemento, conseguimos definir as propriedades de largura e altura para ele. Coisa que não conseguimos em um elemento com <code>display: inline</code>.</p>
+</article>
\ No newline at end of file
diff --git a/manual/css/float-clear.html b/manual/css/float-clear.html
new file mode 100644
index 0000000..308fbf2
--- /dev/null
+++ b/manual/css/float-clear.html
@@ -0,0 +1,91 @@
+---
+layout: interna
+title: Propriedade Float e Clear
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Propriedade Float e Clear</h1>
+  <h2>Estruturando e flutuando elementos</h2>
+
+  <p>Algo comum ao lermos alguma matéria em revistas ou jornais é uma imagem relacionada ao texto estar posicionada de um lado e, o conteúdo textual contornar a imagem. Algo parecido com isso:</p>
+  <img src="/iniciantes/assets/img/float-left.png" alt="Representação de uma simulação de um layout clássico de revistas e jornais com uma foto do lado esquerdo e texto ao redor dela">
+  <p>E se precisássemos desenvolver um <i>template</i> parecido com a imagem acima. Provavelmente começaríamos com um código HTML assim:</p>
+  <pre class="lang-html prettyprint linenums">
+&lt;div&gt;
+  &lt;figure&gt;
+  	&lt;img src="img/imagem.jpg" alt="Imagem Xis"&gt;
+  	&lt;figcaption&gt;Legenda da imagem"&lt;/figcaption&gt;
+  &lt;/figure&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.&lt;/p&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.&lt;/p&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+<p>O que teríamos seria algo assim:</p>
+<img src="/iniciantes/assets/img/exemplo-sem-float.png" alt="Representação mostrando uma imagem no topo e um bloco de texto abaixo dela">
+<p>Por que isso? O que acontece é que a tag <code>figure</code> ocupa toda a largura da página e entra no empilhamento do documento/página, o que não permite que outros elementos apareçam ao seu lado.</p>
+<p>É aí que entra o <i>float</i>. Em resumo, essa propriedade permite que tiremos um elemento do fluxo vertical da página e automaticamente faz com que o conteúdo que venha a seguir <i>flutue</i> ao seu redor.</p>
+<p>O <i>CSS</i> ficaria assim:</p>
+<pre class="lang-css prettyprint linenums">
+figure {
+  float: left;
+  margin: 0 10px 10px 0;
+}
+</pre>
+<p>O que fizemos foi <i>flutuar</i> a tag <code>figure</code> para o lado esquerdo e, colocar uma margem inferior e direita para que os parágrafos não fiquem grudados na imagem. Com isso conseguiríamos reproduzir um layout igual ao da primeira imagem. Poderíamos até variar e colocar nossa imagem do lado direito:</p>
+<pre class="lang-css prettyprint linenums">
+figure {
+  float: right;
+  margin: 0 0 10px 10px;
+}
+</pre>
+<p>Aqui mudamos a direção que a tag <code>figure</code> vai flutuar e alteramos a margem do lado direito para o lado esquerdo. E teríamos um resultado assim:</p>
+<img src="/iniciantes/assets/img/float-right.png" alt="Representação simulando um layout clássico de revistas e jornais com uma foto do lado direito e texto ao redor dela">
+<h3>A propriedade <i>clear</i></h3>
+<p>Continuando com o nosso exemplo anterior, imagine que agora precisássemos inserir um novo título com mais parágrafos abaixo da imagem. Algo parecido com isso: (para fins de exemplo, diminui o conteúdo textual ao redor da imagem)</p>
+<img src="/iniciantes/assets/img/propriedade-clear.png" alt="Representação de um layout com imagem localizada no topo esquerdo com parágrafos ao redor dela e um título com mais parágrafos no fluxo da página">
+<p>Para representar esse conteúdo, teríamos um <i>HTML</i> semelhante a esse:</p>
+  <pre class="lang-html prettyprint linenums">
+&lt;div&gt;
+  &lt;figure&gt;
+    &lt;img src="img/imagem.jpg" alt="Imagem Xis"&gt;
+    &lt;figcaption&gt;Legenda da imagem"&lt;/figcaption&gt;
+  &lt;/figure&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.&lt;/p&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.&lt;/p&gt;
+  &lt;h3&gt;Novo título&lt;/h3&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.&lt;/p&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+<p>No entanto, chegaríamos num resultado assim:</p>
+<img src="/iniciantes/assets/img/exemplo-sem-clear.png" alt="Representação de um layout com imagem localizada no topo esquerdo com conteúdo textual ao redor dela">
+<p>Por que isso? Como definimos que a tag <code>figure</code> flutuaria à esquerda, saindo assim do fluxo vertical da página, todo conteúdo que vem após ela começa a preencher o espaço ao redor da imagem. O que acontece é que os parágrafos que vem logo após a tag <code>figure</code> são menores que a altura da imagem, fazendo com que o título (tag <code>h3</code>) ao invés de ser renderizada abaixo da imagem, apareça ao lado dela e seguindo o fluxo do documento.</p>
+<p>É aí que entra a propriedade <i>clear</i>. Ela tem a função de controlar o comportamento de elementos que apareçam no fluxo do documento após determinado elemento que possue a propriedade <i>float</i>. Em outras palavras, ela especifica se um elemento deve ser posicionado ao lado de elementos com <i>float</i> ou se devem ser colocados abaixo deles. A propriedade aceita 4 valores: </p>
+<ul>
+  <li><b>left</b>: Elemento é empurrado para baixo de elementos com <i>float left</i>;</li>
+  <li><b>right</b>: Elemento é empurrado para baixo de elementos com <i>float right</i>;</li>
+  <li><b>both</b>: Elemento é empurrado para baixo de elementos com <i>float left ou right</i>;</li>
+  <li><b>none</b>: Elemento não é empurrado para baixo de elementos com <i>float</i>.</li>
+</ul>
+<p>O <i>CSS</i> ficaria assim:</p>
+<pre class="lang-css prettyprint linenums">
+figure {
+  float: left;
+  margin: 0 10px 10px 0;
+}
+
+h3 { clear: both; }
+/* Pelo fato da tag figure utilizar float left, aqui também poderíamos usar clear: left; */
+</pre>
+<p>E com isso, conseguiríamos fazer com que o título (tag <code>h3</code>) fosse empurrado para baixo, sendo renderizado abaixo da tag <code>figure</code> e ficando igual ao layout que queríamos.</p>
+<h3>Mais exemplos</h3>
+<p>Esse foi apenas um exemplo da utilização da propriedade <i>float</i>. Outros casos que você pode ver em vários websites são:</p>
+<dl>
+  <dt>Menus de navegação</dt>
+  <dd><p><i>Float</i> usado nos itens da lista. Mais precisamente em cada <code>li</code>, para dispor os itens do menu na horizontal.</p></dd>
+  <dt>Grids</dt>
+  <dd><p><i>Float</i> usado para dividir partes do grid. Por exemplo, colocar um bloco de conteúdo à esquerda e um outro bloco à direita.</p></dd>
+</dl>
+</article>
diff --git a/manual/css/font.html b/manual/css/font.html
new file mode 100644
index 0000000..cadd5ae
--- /dev/null
+++ b/manual/css/font.html
@@ -0,0 +1,31 @@
+---
+layout: interna
+title: Propriedade Font
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Propriedade Font</h1>
+  <h2>Formatando fonts de texto</h2>
+  <p>A font trata das caracteristicas de todos os textos do site. Ela pode ser aplicada diretamente ao elemento <i>body</i> e por consequência todos os elementos filhos herdarão esta propriedade.</p>
+  <p>As propriedades da font são:</p>
+  <dl>
+    <dt>family</dt>
+    <dd>
+      <p>Determina a familia da font a ser usada. Existem dois tipos básicos: as <b>famílias</b> e as <b>famílias genéricas</b></p>
+      <p>As famílias genéricas podem ser três:</p>
+      <ul>
+        <li><b>serif</b>: Font com serifa.</li>
+        <li><b>sans-serif</b>: Font sem serifa.</li>
+        <li><b>monoespace</b>: Font com a mesma largura em todos os caracteres.</li>
+      </ul>
+      <p><i>Serifa</i> nada mais é do que aquelas pontinhas que tem em algumas fontes tipo Times, ou seja, Times é uma font com serifa e Arial é uma font sem serifa.</p>
+      <pre class="lang-css prettyprint linenums">
+      div {
+        font-family: "Times New Roman", Times, serif;;
+      }
+      </pre>
+      <p>Entre aspas vai o nome da font, seguido da familia (Times) e depois da família genérica (serif).</p>
+    </dd>
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/css/index.html b/manual/css/index.html
new file mode 100644
index 0000000..5ab4b55
--- /dev/null
+++ b/manual/css/index.html
@@ -0,0 +1,33 @@
+---
+layout: interna
+title: O que é CSS?
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>O que é CSS?</h1>
+  <p>
+    O Cascading Style Sheets (CSS) é uma linguagem utilizada para definir a apresentação (aparência) de documentos que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML e etc..). O CSS define como serão exibidos os elementos contidos no código de um documento e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.
+  </p>
+
+  <h2>Por que o CSS foi criado?</h2>
+  <p>
+    Com a evolução dos recursos de programação, as tecnologias estavam adotando cada vez mais estilos e variações para deixá-las mais elegantes e atrativas para os usuários. Com isto, linguagens de marcação simples como o HTML, que era destinada para apresentar os conteúdos, também precisaram ser aprimoradas.
+  </p>
+
+  <p>
+    Foram criadas novas tags e atributos de estilo para o HTML e em resumo, ele passou a exercer tanto a função de estruturar o conteúdo quanto de apresentá-lo para o usuário final. Entretanto, isto começou a trazer um problema para os desenvolvedores, pois não havia uma forma de definir, por exemplo, um padrão para todos os cabeçalhos ou conteúdos em diversas páginas. Ou seja, as alterações teriam que ser feitas manualmente, uma a uma.
+  </p>
+
+  <p>
+    A partir destas complicações, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separação do conteúdo e formato de um documento (na linguagem de formatação utilizada) de sua apresentação, incluindo elementos como cores, formatos de fontes e layout. Esta separação proporcionou uma maior flexibilidade e controle na especificação de como as características serão exibidas, permitiu um compartilhamento de formato e reduziu a repetição no conteúdo estrutural de um documento.
+  </p>
+
+  <p>
+    Com isto, as linguagens de marcação passaram novamente a exercer sua função de marcar e estruturar o conteúdo de um documento, enquanto o CSS encarregou-se da aplicação dos estilos necessários para a aparência dela. Isto é feito por meio da criação de um arquivo externo que contém todas as regras aplicadas e com isto, é possível fazer alterações de estilo em todas as páginas de um site e outros documentos que utilizam CSS de forma fácil e rápida.
+  </p>
+
+  <p>
+    O CSS também permite que as mesmas marcações de um documento sejam apresentadas em diferentes estilos, conforme os métodos de renderização (como em uma tela, impressão, via voz, baseadas em dispositivos táteis, etc.). A maioria dos menus em cascata, estilos de cabeçalho e rodapé de páginas da internet, por exemplo, atualmente são desenvolvidos em CSS.
+  </p>
+</article>
diff --git a/manual/css/inserindo-css.html b/manual/css/inserindo-css.html
new file mode 100644
index 0000000..42f6f10
--- /dev/null
+++ b/manual/css/inserindo-css.html
@@ -0,0 +1,37 @@
+---
+layout: interna
+title: Inserindo CSS
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Incluindo CSS na página</h1>
+  <h2>Existem três formas para incluir o código CSS em seu projeto</h2>
+
+  <h3>Inline</h3>
+  <p>A primeira forma de aplicar CSS a uma página é utilizando o atributo <code>style</code> em elementos do HTML:</p>
+<pre class="lang-html prettyprint linenums">
+&lt;p style=&quot;color: blue&quot;&gt;Par&aacute;grafo com fonte azul.&lt;/p&gt;
+&lt;p&gt;Esse outro par&aacute;grafo n&atilde;o &eacute; azul, a n&atilde;o ser que
+exista &lt;span style=&quot;color: red&quot;&gt;CSS em outro lugar&lt;/span&gt;.&lt;/p&gt;
+</pre>
+
+  <h3>Interno</h3>
+  <p>A segunda forma é utilizar a tag <code>style</code> dentro do <code>head</code> da página HTML:</p>
+<pre class="lang-html prettyprint linenums">
+&lt;head&gt;
+  &lt;style type=&quot;text/css&quot;&gt;
+    seletor { propriedade: valor; }
+  &lt;/style&gt;
+&lt;/head&gt;
+</pre>
+
+  <h3>Externo</h3>
+  <p>E a última - porém a mais utilizada - maneira de aplicar CSS é criar um ou mais arquivos com extensão <code>.css</code> e incluí-los na estrutura <code>head</code> do HTML:</p>
+<pre class="lang-html prettyprint linenums">
+&lt;head&gt;
+  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;reset.css&quot;&gt;
+  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot;&gt;
+&lt;/head&gt;
+</pre>
+</article>
diff --git a/manual/css/margin-padding.html b/manual/css/margin-padding.html
new file mode 100644
index 0000000..ec4d64e
--- /dev/null
+++ b/manual/css/margin-padding.html
@@ -0,0 +1,139 @@
+---
+layout: interna
+title: Propriedade Margin e Padding
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Propriedade Margin e Padding</h1>
+  <h2>Manipulando espaços nos elementos</h2>
+  <h3>Margin</h3>
+  <p>É a margem do elemento, ou seja, o espaçamento externo do elemento.</p>
+  <p>Algumas formas de escrita:</p>
+  <dl>
+    <dt>margin-top</dt>
+    <dd>
+      <p>Define a margem superior do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  margin-top: 10px;
+}
+</pre>
+    </dd>
+    <dt>margin-right</dt>
+    <dd>
+      <p>Define a margem direita do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  margin-right: 20px;
+}
+</pre>
+    </dd>
+    <dt>margin-bottom</dt>
+    <dd>
+      <p>Define a margem inferior do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  margin-bottom: 30px;
+}
+</pre>
+    </dd>
+    <dt>margin-left</dt>
+    <dd>
+      <p>Define a margem esquerda do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  margin-left: 40px;
+}
+</pre>
+    </dd>
+    <dt>margin</dt>
+    <dd>
+      <p>Define a margem do elemento. Este tipo de declaração pode ser dar de diversas formas.</p>
+<pre class="lang-css prettyprint linenums">
+/* t = topo; d = direita; b = baixo; e = esquerda; */
+.div1 {
+  /* t = 20px; d = 20px; b = 20px; e = 20px; */
+  margin: 20px;
+}
+.div2 {
+  /* t = 10px; d = 20px; b = 10px; e = 20px; */
+  margin: 10px 20px;
+}
+.div3 {
+  /* t = 10px; d = 20px; b = 30px; e = 20px; */
+  margin: 10px 20px 30px;
+}
+.div4 {
+  /* t = 10px; d = 20px; b = 30px; e = 40px; */
+  margin: 10px 20px 30px 40px;
+}
+</pre>
+    </dd>
+  </dl>
+  <h3>Padding</h3>
+  <p>É o preenchimento do elemento, ou seja, o espaçamento interno do elemento.</p>
+  <p>Algumas formas de escrita:</p>
+  <dl>
+    <dt>padding-top</dt>
+    <dd>
+      <p>Define o preenchimento superior do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  padding-top: 10px;
+}
+</pre>
+    </dd>
+    <dt>padding-right</dt>
+    <dd>
+      <p>Define o preenchimento direito do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  padding-right: 20px;
+}
+</pre>
+    </dd>
+    <dt>padding-bottom</dt>
+    <dd>
+      <p>Define o preenchimento inferior do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  padding-bottom: 30px;
+}
+</pre>
+    </dd>
+    <dt>padding-left</dt>
+    <dd>
+      <p>Define o preenchimento esquerdo do elemento.</p>
+<pre class="lang-css prettyprint linenums">
+div {
+  padding-left: 40px;
+}
+</pre>
+    </dd>
+    <dt>padding</dt>
+    <dd>
+      <p>Define o preenchimento geral do elemento. Assim como na margem, o padding pode declarado de várias formas.</p>
+<pre class="lang-css prettyprint linenums">
+/* t = topo; d = direita; b = baixo; e = esquerda; */
+.div1 {
+  /* t = 20px; d = 20px; b = 20px; e = 20px; */
+  padding: 20px;
+}
+.div2 {
+  /* t = 10px; d = 20px; b = 10px; e = 20px; */
+  padding: 10px 20px;
+}
+.div3 {
+  /* t = 10px; d = 20px; b = 30px; e = 20px; */
+  padding: 10px 20px 30px;
+}
+.div4 {
+  /* t = 10px; d = 20px; b = 30px; e = 40px; */
+  padding: 10px 20px 30px 40px;
+}
+</pre>
+    </dd>
+  </dl>
+    <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/css/overflow.html b/manual/css/overflow.html
new file mode 100644
index 0000000..cf3a1fc
--- /dev/null
+++ b/manual/css/overflow.html
@@ -0,0 +1,35 @@
+---
+layout: interna
+title: Propriedade Overflow
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Propriedade Overflow</h1>
+  <h2>Cuidando dos limites de conteúdo em caixas</h2>
+
+  <p>A propriedade overflow define o comportamento de um elemento quando suas dimensões são excedidas pelo conteúdo.</p>
+  <p>Os valores possíveis dessa propriedade são os seguintes:</p>
+
+  <h3>visible</h3>
+  <p>É o valor padrão e define que o conteúdo não será cortado se exceder o tamanho do elemento.</p>
+
+  <h3>hidden</h3>
+  <p>O conteúdo excedido não ficará visível.</p>
+
+  <h3>scroll</h3>
+  <p>O conteúdo excedido será cortado mas haverá uma barra de rolagem para permitir a visualização completa do mesmo.</p>
+
+  <h3>auto</h3>
+  <p>A barra de rolagem será adicionada automaticamente se o conteúdo exceder o tamanho do elemento.</p>
+
+  <h3>initial</h3>
+  <p>Ajusta a propriedade para o valor padrão.</p>
+
+  <h3>inherit</h3>
+  <p>Herda a propriedade do elemento pai.</p>
+
+  <hr/>
+
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/css/position.html b/manual/css/position.html
new file mode 100644
index 0000000..4121a67
--- /dev/null
+++ b/manual/css/position.html
@@ -0,0 +1,44 @@
+---
+layout: interna
+title: Propriedade Position
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Propriedade Position</h1>
+  <h2>Posicionando elementos via coordenadas</h2>
+  <p>Determina a posição do elemento.</p>
+  <p>Possíveis valores:</p>
+  <dl>
+    <dt>relative</dt>
+    <dd>
+      <p>A posição do elemento é relativa ao elemento anterior.</p>
+<pre class="lang-css prettyprint linenums">
+aside {
+  position: relative;
+}
+</pre>
+    </dd>
+
+    <dt>fixed</dt>
+    <dd>
+      <p>A posição do elemento é relativa ao viewport. Esta posição não é influenciada pela rolagem da página.</p>
+<pre class="lang-css prettyprint linenums">
+aside {
+  position: fixed;
+}
+</pre>
+    </dd>
+
+    <dt>absolute</dt>
+    <dd>
+      <p>A posição do elemento é relativa ao viewport, ou ao elemento pai quando este tem um <i>position</i> definido. Esta posição é influenciada pela rolagem da página.</p>
+<pre class="lang-css prettyprint linenums">
+aside {
+  position: absolute;
+}
+</pre>
+    </dd>
+  </dl>
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/css/seletores-complexos.html b/manual/css/seletores-complexos.html
new file mode 100644
index 0000000..d915727
--- /dev/null
+++ b/manual/css/seletores-complexos.html
@@ -0,0 +1,68 @@
+---
+layout: interna
+title: Seletores Complexos
+---
+{% include submenu-css.html %}
+
+<article class="content">
+	<h1>Seletores complexos</h1>
+	<h2>Formatando elementos fora do fluxo normal do DOM</h2>
+
+    <h3>Selecionando diferentes elementos de um formulário</h3>
+
+    <h4>Tipos de <i>Inputs</i></h4>
+<pre class="lang-css prettyprint linenums">
+input[type="text"] { ... }
+input[type="email"] { ... }
+</pre>
+    <p>No exemplo acima, selecionamos respectivamente elementos <code>input</code> do tipo <i>text</i> e <i>email</i>.</p>
+
+    <h4>Input checkbox</h4>
+<pre class="lang-css prettyprint linenums">input[type="checkbox"]:checked { ... }</pre>
+    <p>A própria declaração é bem intuitiva. Seleciona elementos do tipo <i>checkobx</i> que estiverem selecionado (ou <i>ticados</i>).</p>
+
+    <h4>Input inativo</h4>
+<pre class="lang-css prettyprint linenums">input:disabled { ... }</pre>
+    <p>Acima, selecionamos um input que esteja com o atributo <code>disabled</code>, estando assim inativo.</p>
+
+    <h3>Selecionamento elementos pela extensão do arquivo</h3>
+
+<pre class="lang-css prettyprint linenums">:lang(en) .flag { ... }</pre>
+
+    <p>No exemplo, selecionamos o elemento com a classe <code>.flag</code> que é filho de uma página que possui o valor <code>en</code>.</p>
+
+<pre class="lang-css prettyprint linenums">
+a[href$=".jpg"] { ... }
+a[href$=".pdf"] { ... }
+</pre>
+    <p>Imagine uma lista de arquivos e que você precisa adicionar um ícone ou aplicar um estilo diferente de acordo com o tipo de arquivo em cada link. Com os seletores acima você consegue sem a necessidade de adicionar uma classe para cada um.</p>
+
+    <h3>Selecionando elementos pelo <i>target</i></h3>
+<pre class="lang-css prettyprint linenums">#element-id:target { ... }</pre>
+    <p>Elementos com âncora linkam o usuário a outras partes da página. Então o elemento acima seria selecionado quando seu <i>id</i> aparecesse na <i>URL</i> do usuário. Geralmente depois de um clique.</p>
+
+    <h3>Selecionando elementos pelo atributo</h3>
+    <p>Existem seis maneiras diferentes de selecionarmos elementos por seus atributos:</p>
+<pre class="lang-css prettyprint linenums">[att=valor]</pre>
+    <p>O atributo tem exatamente o mesmo valor especificado.</p>
+
+<pre class="lang-css prettyprint linenums">[att~=valor]</pre>
+    <p>O valor do atributo precisar ser uma lista de valores com espaço. Por exemplo <code>class="box box-color box-sidebar"</code>, e um dos valores precisa ser exatamente igual ao valor que foi especificado.</p>
+
+<pre class="lang-css prettyprint linenums">[att|=valor]</pre>
+    <p>O atributo possui exatamente o mesmo valor que foi especificado ou é imediatamente seguindo de um traço. Dessa maneira, uma classe válida seria <code>valor-X</code>.</p>
+
+<pre class="lang-css prettyprint linenums">[att^=valor]</pre>
+    <p>O valor do atributo começa com o valor que foi especificado na regra.</p>
+
+<pre class="lang-css prettyprint linenums">[att$=valor]</pre>
+    <p>O valor do atributo termina com o valor que foi especificado na regra.</p>
+
+<pre class="lang-css prettyprint linenums">[att*=valor]</pre>
+    <p>O valor do atributo contém o valor do atributo especificado na regra.</p>
+
+    <h3>Selecionando elementos pela negação</h3>
+<pre class="lang-css prettyprint linenums">div:not(.estilo) { ... }</pre>
+    <p>Acima, selecionamos todas as <code>divs</code> do documento, <i>exceto</i> as que possuem a classe <code>.estilo</code>.</p>
+
+</article>
\ No newline at end of file
diff --git a/manual/css/seletores.html b/manual/css/seletores.html
new file mode 100644
index 0000000..9121eae
--- /dev/null
+++ b/manual/css/seletores.html
@@ -0,0 +1,74 @@
+---
+layout: interna
+title: Seletores do CSS
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Selecionando elementos</h1>
+  <h2>Entenda como formatar os elementos do CSS</h2>
+  <p>Seletores CSS ajudam a especificar melhor o elemento que deve ser afetado.</p>
+  <p>Vejamos alguns seletores:</p>
+
+  <dl>
+    <dt>Elemento Filho (A > B)</dt>
+    <dd>
+      <p>Para selecionar um elemento (B) que tenha um elemento pai específico (A), deve-se utilizar o "&gt;".</p>
+      <p>Ex.:
+<pre class="lang-css prettyprint linenums">
+nav.menu-principal > ul {
+  padding: 0;
+}
+// neste caso, somente o elemento ul, que tem como pai um elemento nav com classe "menu-principal", receberá a alteração de preenchimento
+</pre>
+      </p>
+    </dd>
+
+    <dt>Elemento Irmão (A + B)</dt>
+    <dd>
+      <p>Quando um elemento (B) está ao lado de outro específico (A).</p>
+      <p>Ex.:
+<pre class="lang-css prettyprint linenums">
+label + input {
+  border: 1px solid #333;
+}
+// todos os inputs que estiverem ao lado de um label receberão borda cinza
+</pre>
+      </p>
+    </dd>
+
+    <dt>Não este elemento (A:not(b))</dt>
+    <dd>
+      <p>Exclui determinado elemento (A) de acordo com a especificação (b).</p>
+<pre class="lang-css prettyprint linenums">
+div:not(.principal) {
+  border: 1px solid #F00;
+}
+// todas as divs que não tenham a classe "principal" receberão borda vermelha
+</pre>
+    </dd>
+
+    <dt>Primeiro Filho (A:first-child)</dt>
+    <dd>
+      <p>Seleciona o primeiro elemento que aparecer, de acordo com o elemento definido (A).</p>
+<pre class="lang-css prettyprint linenums">
+li:first-child {
+  background-color: #0F0;
+}
+// O primeiro li terá fundo verde
+</pre>
+    </dd>
+
+    <dt>Enésimo Elemento (A:nth-child(b))</dt>
+    <dd>
+      <p>Seleciona o elemento definido (A) de acordo com a posição informada (b).</p>
+<pre class="lang-css prettyprint linenums">
+li:nth-child(7) {
+  background-color: #666;
+}
+// O sétimo li terá fundo cinza
+</pre>
+    </dd>
+  </dl>
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/css/sintaxe-css.html b/manual/css/sintaxe-css.html
new file mode 100644
index 0000000..33607a0
--- /dev/null
+++ b/manual/css/sintaxe-css.html
@@ -0,0 +1,33 @@
+---
+layout: interna
+title: Sintaxe do CSS
+---
+{% include submenu-css.html %}
+
+<article class="content">
+  <h1>Escrevendo CSS</h1>
+  <h2>Como escrever código CSS</h2>
+
+  <h3>Sintaxe</h3>
+  <p>Para escrever código CSS é necessário seguir uma regra. A regra é uma declaração que possui uma sintaxe própria bem simples que define a forma com que o estilo será aplicado aos nossos elementos HTML. Você pode ver a regra a seguir:</p>
+<pre class="lang-css prettyprint linenums">
+seletor{
+  propriedade: valor;
+}
+</pre>
+
+  <p>A nossa regra como pode ser visto é composta de três partes principais: um seletor, uma propriedade e um valor a se aplicar.</p>
+  <p>Explicando de forma grotesca o seletor nada mais é do que o nosso elemento HTML ao qual queremos aplicar a regra (por exemplo: div, body). </p>
+  <p>A propriedade é o atributo do elemento que será aplicado a regra. (por exemplo: color, font, position).</p>
+  <p>Valor é a característica que o elemento irá assumir (por exemplo: cor azul, tamanho 14 para a fonte).</p>
+
+  <h3>Exemplificando</h3>
+  <p>Vamos para um exemplo:</p>
+<pre class="lang-css prettyprint linenums">
+body{
+  background-color: #000;
+}
+</pre>
+
+  <p>No nosso exemplo o elemento ao qual estamos aplicando a regra é o BODY este é o nosso seletor, a nossa propriedade é background-color que define a cor de fundo do documento e o nosso valor #000 qué é igual a cor preta.</p>
+</article>
diff --git a/manual/html/estruturabasica.html b/manual/html/estruturabasica.html
new file mode 100644
index 0000000..0ddf10e
--- /dev/null
+++ b/manual/html/estruturabasica.html
@@ -0,0 +1,42 @@
+---
+layout: interna
+title: Estrutura básica
+---
+{% include submenu-html.html %}
+
+<article class="content">
+  <h1>Estrutura básica</h1>
+  <h2>Iniciando o código básico de HTML</h2>
+
+  <p>O documento HTML sempre inicia com o que chamamos de <strong>estrutura básica</strong>. Esta estrutura é quase que imutável. Sempre será dessa forma e você sempre, sempre começará seu HTML começando por esse código. Geralmente os editores como o Sublime Text já tem atalhos para iniciar os documentos HTMLs com essa estrutura, logo, você não precisa se preocupar em decorá-la, mas é bom que faça. Veja abaixo como ela se inicia:</p>
+<pre class="lang-html prettyprint linenums">
+&lt;!DOCTYPE html&gt;
+&lt;html lang=&quot;pt-br&quot;&gt;
+  &lt;head&gt;
+    &lt;title&gt;Título da página&lt;/title&gt;
+    &lt;meta charset=&quot;utf-8&quot;&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    Aqui vai o código HTML que fará seu site aparecer.
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+  <p>É possível compreender o documento em HTML de uma maneira muito simples, através de uma divisão de blocos das tags essenciais, conforme a a seguinte estrutura:</p>
+  <ul>
+    <li>Definição do documento (doctype)</li>
+    <li>Cabeça (head)</li>
+    <li>Corpo (body)</li>
+  </ul>
+  <h3>Doctype - Definindo o documento</h3>
+  <p>Uma coisa importante: SEMPRE deve existir o doctype, que é este código <code>&lt;!DOCTYPE html&gt;</code>.</p>
+  <p>O doctype não é uma tag HTML, mas uma instrução para o navegador e outros programas que podem ler seu site, que o código encontrado ali é um código HTML. Assim eles sabem o que fazer para mostrar seu site da melhor forma possível. Lembre-se: o doctype é OBRIGATÓRIO e deve ser sempre a PRIMEIRA LINHA do seu documento.</p>
+
+  <h3>HEAD</h3>
+  <p>Contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São dados implícitos, de uso e controle do documento: vinculação com outros arquivos, aplicação de lógica de programação de scripts e metadados. Na prática, todo o conteúdo do cabeçalho fica delimitado entre a abertura e fechamento tag <code>head</code>.</p>
+
+  <h3>BODY</h3>
+  <p>Trata-se do documento em si, ou seja, a informação legível para o usuário/leitor do documento. É todo e qualquer texto que se deseja apresentar, assim como toda e qualquer forma de mídia de saída (imagens, sons, miniaplicativos embutidos, conteúdo multimídia, etc). Além disso, toda a apresentação de entrada de dados (formulários) também se aplica neste seção do documento. Na prática, o corpo do documento é delimitado pelo par de tags <code>&lt;body&gt;</code> e <code>&lt;/body&gt;</code>.</p>
+  <p>Este é o preceito básico que deve estar muito bem claro para você: onde as marcações se aplicam, e quais são os resultados deste modelo. Por exemplo: se vocês deseja informar conteúdo textual para saída legível ao usuário do seu sistema web, esta marcação deverá obrigatoriamente estar no bloco do corpo da página. Ainda: para definir qual o tipo de codificação da página (uma meta informação do documento), esta deve obrigatoriamente estar marcada no cabeçalho do mesmo documento.</p>
+  <p>Dentro do elemento BODY sua estrutura de página terá os elementos semânticos da construção da sua página, onde serão declarados e identificados cabeçalhos, rodapé, conteúdo principal, etc. </p>
+</article>
diff --git a/manual/html/index.html b/manual/html/index.html
new file mode 100644
index 0000000..f8ea35c
--- /dev/null
+++ b/manual/html/index.html
@@ -0,0 +1,50 @@
+---
+layout: interna
+title: O HTML
+---
+{% include submenu-html.html %}
+
+<article class="content">
+  <h1>O que é HTML?</h1>
+  <h2>Linguagem base dos websites</h2>
+
+  <h2>Camadas de desenvolvimento</h2>
+  <p>
+    Existem 3 linguagens básicas que utilizamos para criar websites: HTML, CSS e JavaScript.<br>
+    O HTML é a linguagem que irá exibir a informação. O CSS é a linguagem que vai deixar essa informação bonitona. O JavaScript é a linguagem que vai fazer essa informação receber alguns comportamentos, como por exemplo ao criar um submenu ou controlar algo que aparece e desaparece na tela.
+  </p>
+  <p>
+    O HTML sem dúvida é a mais importante de todas, por que como dissemos no começo, é ela que exibe a informação. Além de exibir a informação, ela dá <a href="oquesemantica.html">significado</a>. Isso é importante por que alguns sistemas como o Google, que irão ler sua página, precisam entender o que é cada elemento nela e o que cada um desses elementos significam.
+  </p>
+
+  <h2>O nome HTML</h2>
+  <p>
+    O acrônico HTML significa em inglês: HyperText Markup Language. Para gente aqui fica: Linguagem de Marcação de Hipertexto. Bonito, né?<br>
+    Por trás das palavras <strong>Hipertexto</strong> e <strong>Marcação</strong> tem muita história e guardam a real essência da função do HTML. Você vai saber mais na próxima página, onde falamos sobre Semântica, que nada mais é do que a organização da informação usando HTML.
+  </p>
+  <p>Se você tiver que guardar alguma coisa sobre o que é HTML, guarde isso: <em>HTML serve para dar significado e organizar a informação dos websites.</em>
+  </p>
+  <p>
+    Tendo isso em mente, você já saberá muito mais do que a maioria dos profissionais por aí.</p>
+
+  <h2>Marcação</h2>
+  <p>Já que o HTML serve para dar significado para a informação, como ele faz isso? Simples: ele marca a informação com as tags.</p>
+
+  <p>Por exemplo, para falarmos que um título é um título colocamos um pedaço de texto entre uma tag chamada H1. Veja o código abaixo:</p>
+<pre class="lang-html linenums prettyprint">
+&lt;h1&gt;Aqui vai o texto que é um título&lt;/h1&gt;
+</pre>
+
+  <p>E dessa forma vamos fazendo todos os outros elementos. Um parágrafo, por exemplo:</p>
+<pre class="lang-html linenums prettyprint">
+&lt;p&gt;Aqui vai muito texto, um parágrafo&lt;/p&gt;
+</pre>
+
+  <p>O resultado fica assim:</p>
+  <div class="example">
+    <h1>Aqui vai o texto que é um título</h1>
+    <p>Aqui vai muito texto, um parágrafo</p>
+  </div>
+
+  <p><a href="/iniciantes/manual/html/oquetags.html">Continue lendo sobre isso aqui</a>.</p>
+</article>
diff --git a/manual/html/oquemetatags.html b/manual/html/oquemetatags.html
new file mode 100755
index 0000000..3840ec6
--- /dev/null
+++ b/manual/html/oquemetatags.html
@@ -0,0 +1,25 @@
+---
+layout: interna
+title: O que são metatags?
+---
+{% include submenu-html.html %}
+
+<article class="content">
+  <h1>O que são metatags?</h1>
+  <h2>Informação sobre seu site</h2>
+  <p>A <strong>Meta Tag</strong>, representada pela tag &lt;meta&gt; é uma tag diferenciada das demais por não ter nenhum efeito aparente na página em si, mas sim por ser responsável por ações externas à página, como por exemplo informar à buscadores como Google ou Bing algumas informações a respeito da página, como título e uma breve descrição.</p>
+  <h2>Tipos de Meta Tags</h2>
+  <dl>
+    <dt>Author</dt>
+    <dd><p>O nome do autor da página.</p></dd>
+    <dt>Copyright</dt>
+    <dd><p>Direito autoral da página.</p></dd>
+    <dt>Description</dt>
+    <dd><p>Descrição da página.</p></dd>
+    <dt>Expires</dt>
+    <dd><p>Data em que o documento deve ser considerado expirado.</p></dd>
+    <dt>Keywords</dt>
+    <dd><p>Aqui é um dos locais onde os motores de busca procuram informações a respeito da página.</p></dd>
+  </dl>
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/html/oquesemantica.html b/manual/html/oquesemantica.html
new file mode 100644
index 0000000..461cb40
--- /dev/null
+++ b/manual/html/oquesemantica.html
@@ -0,0 +1,31 @@
+---
+layout: interna
+title: O que é semântica?
+---
+{% include submenu-html.html %}
+
+<article class="content">
+  <h1>O que é Semântica?</h1>
+  <h2>Organização e Significado</h2>
+
+  <p>
+    Quando eu era criança era costume fazer muitos trabalhos para a escola. O processo era quase sempre igual: a professora definia o assunto e ao chegar em casa, pegava um bocado de papel almaço e ia para casa da minha tia. Ela era a única da família que tinha enciclopédias. Se eu precisava fazer um trabalho escolar, certamente as enciclopédias da minha tia me ajudariam na tarefa. As tais enciclopédias eram pesadas. Chatas de serem manipuladas. Mas tinham tudo ou quase tudo do que precisava para completar o meu trabalho com o máximo de detalhes possível.
+  </p>
+  <h2>Organizando a informação: forma linear ou não linear</h2>
+  <p>
+    Você já pensou em como se organiza informação? A informação - um texto por exemplo - pode ser organizada de forma <strong>linear</strong> ou <strong>não linear</strong>. Imagine um livro. Toda a informação contida no livro está organizada de forma linear, isto é, há começo, meio e fim. Você não consegue absorver todo o significado da história contada se iniciar sua leitura pela metade do livro. Você precisa, necessariamente, iniciar do primeiro capítulo até o último para absorver o máximo possível de informação sobre a história.
+  </p>
+  <p>
+    As enciclopédias tem suas informações organizadas de forma <strong>não linear</strong>. Isto é: as informações não estão organizadas em uma ordem específica, mas sim de forma relacional, associativa. Há uma série de assuntos e todos eles estão organizadas de uma maneira que se relacionam por meio de referências. Por exemplo: quando você procura informações sobre carros na enciclopédia, ao final do texto você encontra uma série de outras referências aos assuntos relacionados, como por exemplo: motores a combustão interna, rodas, combustíveis e etc.
+  </p>
+  <h3>Como você e a web funcionam</h3>
+  <p>
+    É mais ou menos assim que a sua mente funciona também: quando você pensa em um assunto, você consegue fazer uma série de associações com outros assuntos, formando uma ideia, uma memória, uma lembrança. Por isso seu cérebro consegue guardar essas informações de uma jeito que se torna fácil de recuperá-las não apenas pensando nessa informação diretamente, mas também quando se pensa nos assuntos relacionados a esta informação.
+  </p>
+  <p>
+    Se levarmos isso para web, percebemos que apenas uma tag faz esse trabalho de referência e associação de informação: o link. Na web você relaciona informações, sites e etc utilizando diretamente a tag "A". Quando você linka um texto, uma imagem, um gráfico etc, você associa essa informação ao destino do link. Você está referenciando assuntos, como na enciclopédia. Sem os links não há web. Não conseguimos associar informação alguma. Perde-se a referência. Nós usamos o link todos os dias e aposto que a metade dos desenvolvedores não imagina a importância dessa tag.
+  </p>
+  <p>
+    Sugiro que você pesquise sobre a história do hipertexto. Você vai entender a amplitude do que significa organizar informação e da importância que isso teve para os dias de hoje tanto para web quanto para o mundo em si. É um assunto fascinante. Se quiser, comece por aqui: <a href="http://bit.ly/History_of_hypertext">http://bit.ly/History_of_hypertext</a>
+  </p>
+</article>
diff --git a/manual/html/oquetags.html b/manual/html/oquetags.html
new file mode 100644
index 0000000..7cc0687
--- /dev/null
+++ b/manual/html/oquetags.html
@@ -0,0 +1,108 @@
+---
+layout: interna
+title: O que são tags e atributos
+---
+{% include submenu-html.html %}
+
+<article class="content">
+  <h1>O que são Tags, Elementos e Atributos?</h1>
+  <h2>Conhecendo as principais Tags, Elementos e seus Atributos</h2>
+
+  <h3>O que são Tags?</h3>
+  <p>Tags são o conjunto de caracteres que formam um elemento, ou seja, quando nos referenciamos à Tag "p" estamos falando disso: &lt;p&gt;</p>
+  <p>Existem dois tipos de Tags, as que necessitam de fechamento e as que não necessitam de fechamento.</p>
+  <p>Para as que necessitam de fechamento, utilizamos o sinal de menor ( <i>&lt;</i> ), seguido do nome do elemento e o sinal de maior ( <i>&gt;</i> ) para abertura. Para fechamento, utilizamos o sinal de menor ( <i>&lt;</i> ), seguido de barra ( <i>/</i> ), nome do elemento e o sinal de maior ( <i>&gt;</i> ).</p>
+
+  <pre class="lang-html prettyprint linenums">
+    &lt;!-- Exemplo de elemento que necessita de fechamento --&gt;
+    &lt;p&gt;A tag do elemento de parágrafo necessita de fechamento.&lt;/p&gt;
+  </pre>
+
+  <p>Os elementos que não necessitam de fechamento, também conhecidos como <em>elementos vazios</em>, somente utilizamos o sinal de menor ( <i>&lt;</i> ), seguido do nome do elemento e o sinal de maior ( <i>&gt;</i> ).</p>
+
+  <pre class="lang-html prettyprint linenums">
+    &lt;!-- Exemplo de elemento vazio --&gt;
+    Texto utilizando&lt;br&gt;
+    quebra de linha
+  </pre>
+
+  <h3>O que são Elementos?</h3>
+  <p>Elementos são formados a partir de Tags e entre as Tags é que está o conteúdo do Elemento.</p>
+  <p>Se quisermos exibir um parágrafo em um site utilizamos a Tag &lt;p&gt; que semanticamente quer dizer que o conteúdo que se espera nesse Elemento é um parágrafo. </p>
+
+  <p>Alguns exemplos:</p>
+
+  <pre class="lang-html prettyprint linenums">
+    &lt;!-- A Tag &lt;label&gt; define que o conteúdo do Elemento é uma label (rótulo)  --&gt;
+    &lt;label&gt;Informe o seu nome&lt;/label&gt;
+  </pre>
+
+  <pre class="lang-html prettyprint linenums">
+    &lt;!-- A Tag &lt;address&gt; define que o conteúdo do Elemento é um endereço (endereços físicos à virtuais)  --&gt;
+    &lt;address&gt;
+      Este guia é uma iniciativa da comunidade e do Tableless &lt;a href="http://tableless.com.br/contato">www.tableless.com.br&lt;/a&gt;
+    &lt;/address&gt;
+  </pre>
+
+  <h3>Não confunda Tags com Elementos</h3>
+  <p>As Tags servem para marcar onde começam e terminam os Elementos. Já os Elementos são uma parte conceitual/semântica que têm um começo e fim determinados.</p>
+  <p>Parece uma diferença boba, mas mantenha ela sempre em mente e isso vai fazer toda a diferença no seu entendimento de HTML.</p>
+
+  <h3>O que são Atributos?</h3>
+  <p>Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag, através de especificação).</p>
+  <p>Os Atributos possuem nome e um valor, existem Atributos que você vai usar praticamente sempre e existem outros que serão mais raros.</p>
+
+  <h4>Atributos globais</h4>
+  <p>Seguem alguns atributos globais importantes e suas descrições simplificadas:</p>
+  <dl>
+    <dt>accesskey</dt>
+    <dd><p>Determina uma (ou mais) tecla(s) de atalho para o elemento. Para definir mais de uma tecla, coloque-as separadas por espaço.</p></dd>
+
+    <dt>class</dt>
+    <dd><p>Determina uma (ou mais) classe(s) para o elemento. Para definir mais de uma classe, coloque-as separadas por espaço.</p></dd>
+
+    <dt>draggable</dt>
+    <dd><p>Define se um elemento é arrastável ou não.</p></dd>
+    
+    <dt>hidden</dt>
+    <dd><p>Oculta o elemento onde for declarado.</p></dd>
+
+    <dt>id</dt>
+    <dd><p>É o identificador único do elemento. Somente deve ser declarado um id por elemento. E este id não deve ser repetido na mesma página.</p></dd>
+
+    <dt>lang</dt>
+    <dd><p>Determina o idioma em que está escrito o conteúdo do elemento.</p></dd>
+
+    <dt>style</dt>
+    <dd><p>Determina propriedades CSS diretamente no elemento.</p></dd>
+
+    <dt>tabindex</dt>
+    <dd><p>Organiza os elementos por ordem de tabulação. Deve-se usar valor numérico.</p></dd>
+
+    <dt>title</dt>
+    <dd><p>Representa um auxílio ao elemento. Semelhante a dica do elemento.</p></dd>
+  </dl>
+  <p>Como você pôde ver, a sintaxe de Atributos é muito simples, porém, por mais simples que seja é sempre bom ter em mente boas práticas para que se tenha qualidade e fácil manutenção em seu HTML.</p>
+  <p>Existem Atributos em que os valores não precisam ser passados entre aspas, mas manter um padrão ajuda você e ajuda quem quer que seja que no futuro tenha que trabalhar com o seu HTML. Portanto, não é uma regra mas uma boa prática você envolver os valores dos Atributos entre aspas.</p>
+
+  <pre class="lang-html prettyprint linenums">
+    &lt;!-- Isso funciona, mas não é recomendável --&gt;
+    &lt;a href="http://tableless.com.br" target=_blank>www.tableless.com.br&lt;/a&gt;
+
+    &lt;!-- Isso funciona e é recomendável --&gt;
+    &lt;a href="http://tableless.com.br" target="_blank">www.tableless.com.br&lt;/a&gt;
+  </pre>
+
+  <h4>Na prática</h4>
+  <p>Agora que você entendeu separadamente o papel das Tags, Elementos e Atributos, vamos ver um exemplo prático:</p>
+
+  <pre class="lang-html prettyprint linenums">
+    &lt;!-- A Tag &lt;img&gt; define que o conteúdo do Elemento é uma imagem e os atributos que utilizamos são <em>src</em> e <em>alt</em> --&gt;
+    &lt;img src="logo.png" alt="HTML 5 Logo" /&gt;
+  </pre>
+  
+  <h5>Analisando o exemplo:</h5>
+  <p>No exemplo acima definimos o caminho onde está a imagem com o Atributo <em>src</em> e utilizamos o Atributo <em>alt</em> para descrever que imagem é essa (a utilização do atributo alt é altamente recomendado, pois, mesmo que a imagem não seja carregada por qualquer motivo, o usuário conseguirá identificar que ali era para ser carregado o logo do HTML5). </p>
+  
+  <p>Fácil, não? Para saber quais Tags existem e como podem ser utilizadas, acesse a documentação do Mozilla clicando <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element" target="_blank">aqui</a></p>
+</article>
diff --git a/manual/js/arrays.html b/manual/js/arrays.html
new file mode 100644
index 0000000..bb9203e
--- /dev/null
+++ b/manual/js/arrays.html
@@ -0,0 +1,80 @@
+---
+layout: interna
+title: Arrays
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>Arrays</h1>
+  <h2>Valores agrupados</h2>
+
+  <p>Com o Array é possível armazenar um conjunto de quaisquer valores javascript, como números, caracteres ou textos ou uma mistura deles. Imagine o array como um gaveteiro onde você pode adicionar ou retirar gavetas e cada gaveta comtém o objeto que quiser, vamos criar aqui um gaveteiro onde a primeira gaveta contém o valor 10 a segunda 20 e a terceira 30.</p>
+  <p>Vejamos:</p>
+<pre class="lang-javascript linenums prettyprint">
+var  gaveteiro = [10,20,30];
+</pre>
+
+  <p>Simples não é? A diferença no Javascript é que a contagem de cada posição do array começa em zero, assim temos: gaveta 0, gaveta 1 e gaveta 2.</p>
+
+  <p><b>Acessando elementos do array</b></p>
+  <p>Com o nosso array criado podemos visualizar cada uma das posições individualmente colocando o indice dentro de colchetes:</p>
+  <pre class="lang-javascript linenums prettyprint">
+console.log(gaveteiro[2]); //30
+console.log(gaveteiro[1]); //20
+console.log(gaveteiro[0]); //10
+</pre>
+
+  <p>Também podemos alterar o valor de cada posição da seguinte forma:</p>
+<pre class="lang-javascript linenums prettyprint">
+var  gaveteiro = [10,20,30];
+gaveteiro[2] = 99;
+console.log(gaveteiro[2]);
+</pre>
+  <p>Assim dizemos que gaveteiro na posição 2 recebeu o valor 99.</p>
+
+  <p><b>Adicionando elementos no array</b></p>
+  <p>Caso precise adicionar uma nova gaveta, podemos usar o método <i>push</i>:</p>
+<pre class="lang-javascript linenums prettyprint">
+var  gaveteiro = [10,20,30];
+gaveteiro.push(100);
+console.log(gaveteiro[3]); //100
+</pre>
+  <p> O método <i>push</i> recebe <b>100</b> como parametro e adiciona na ultima posição do array.</p>
+
+  <p><b>Removendo elementos no array</b></p>
+  <p>Caso precise remover/recortar uma gaveta, podemos usar os seguintes métodos:</p>
+<p> - Para remover a ultima gaveta, utilizamos o <i>pop</i>:
+<pre class="lang-javascript linenums prettyprint">
+var  gaveteiro = [10,20,30];
+console.log(gaveteiro[2]); //30
+gaveteiro.pop();
+console.log(gaveteiro[2]); //undefined
+</pre>
+<p> - Para remover a primeira gaveta, utilizamos o <i>shift</i>:
+<pre class="lang-javascript linenums prettyprint">
+var  gaveteiro = [10,20,30];
+console.log(gaveteiro[0]); //10
+gaveteiro.shift();
+console.log(gaveteiro[0]); //20
+</pre>
+<p> - Para retornar apenas algumas gavetas (recortar), utilizamos o <i>slice</i>:
+<pre class="lang-javascript linenums prettyprint">
+var  gaveteiro = [10,20,30];
+var novaGaveta = gaveteiro.slice(1,3);
+console.log(novoGaveteiro); //[20, 30]
+</pre>
+
+  <p><b>Quantidade de elementos do array</b></p>
+  <p>Depois de ter adicionado várias gavetas, pode surgir a necessidade de saber quantas já existem, para isso vamos acessar a propridade <i>length</i>: </p>
+<pre class="lang-javascript linenums prettyprint">
+var  gaveteiro = [1,2,3,10,20,30];
+console.log(gaveteiro.length); //6
+gaveteiro.push(100);
+gaveteiro.push(200);
+gaveteiro.push(300);
+gaveteiro.push(400);
+console.log(gaveteiro.length); //10
+gaveteiro.push(200);
+console.log(gaveteiro.length); //9
+</pre>
+</article>
diff --git a/manual/js/controles-de-fluxo-e-controles-de-repeticao.html b/manual/js/controles-de-fluxo-e-controles-de-repeticao.html
new file mode 100644
index 0000000..d36264e
--- /dev/null
+++ b/manual/js/controles-de-fluxo-e-controles-de-repeticao.html
@@ -0,0 +1,149 @@
+---
+layout: interna
+title: Controles de Fluxo e Controles de Repetição
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>Declarações (Statements)</h1>
+  <h2>Entendendo Controles de Fluxo e Controles de Repetição</h2>
+
+  <h2>Controles de Fluxo</h2>
+  <p>São comandos da linguagem que permitem desviar o fluxo do programa, dependendo de um teste.</p>
+
+  <h3>IF</h3>
+  <p>A sintaxe do if é a seguinte:</p>
+<pre class="lang-javascript linenums prettyprint">
+if (&lt;teste>) {
+  &lt;código a ser executado caso o teste seja verdadeiro>
+}
+</pre>
+
+  <p>Podemos, por exemplo, executar um trecho do código unicamente se uma variavel nossa for maior do que dez.</p>
+<pre class="lang-javascript linenums prettyprint">
+var x = 11;
+if (x > 10) {
+  console.log('x é maior do que dez, corram para as colinas!');
+}
+</pre>
+
+  <p>Note, que o console.log não apareceria caso o valor de x fosse 10, 9, 8...</p>
+<pre class="lang-javascript linenums prettyprint">
+var x = 9;
+if (x > 10) {
+  console.log('x é maior do que dez, corram para as colinas!');
+}
+console.log('Serei executado independente do if ser true ou false');
+</pre>
+
+  <h3>ELSE</h3>
+  <p>o else não existe sem o if, pois ele não testa nada. Só é executado caso o teste do if retorne falso.</p>
+<pre class="lang-javascript linenums prettyprint">
+var x = 9;
+if (x > 10) {
+  console.log('x é maior do que dez, corram para as colinas!');
+} else {
+  console.log('Está tudo bem, podemos ficar tranquilos.');
+}
+</pre>
+
+  <h3>SWITCH</h3>
+  <p>O switch é uma estrutura para testes simples, muito usado quando temos que testar uma mesma condição diversas vezes, pois é mais legível do que uma cadeia de else if.</p>
+<pre class="lang-javascript linenums prettyprint">
+var tinta = 'azul';
+switch (tinta) {
+  case 'azul':
+    console.log('Irei pintar o carro de azul');
+    break;
+  case 'amarela':
+    console.log('Vou pintar a casa de amarelo');
+    break;
+  case 'verde':
+    console.log('Vou pintar o chão da garagem de verde');
+    break;
+  default:
+    console.log('Não vou pintar nada');
+    break;
+}
+</pre>
+
+  <p>Note que para cada uma das cores, eu farei uma coisa completamente diferente da outra. Caso a tinta seja verde, eu vou pintar o chão da garagem, mas se a tinha for amarela, irei pintar a casa.</p>
+
+  <p>Se fossemos reescrever esses testes com elseif, ficaria assim:</p>
+<pre class="lang-javascript linenums prettyprint">
+var tinta = 'azul';
+
+if (tinta === 'azul') {
+  console.log('Irei pintar o carro de azul');
+} else if(tinta === 'amarela') {
+  console.log('Vou pintar a casa de amarelo');
+} else if (tinta === 'verde') {
+  console.log('Vou pintar o chão da garagem de verde');
+} else {
+  console.log('Não vou pintar nada');
+}
+</pre>
+  <p>Fica melhor com o switch, ne?!</p>
+
+  <h2>Laços de repetição (loops)</h2>
+  <p>Se existe uma coisa que os computadores são muito bons é em executar algo várias vezes. Desde que saibamos o que queremos que o computador faça. Felizmente, para não precisamos repetir inúmeras vezes a invocação de uma função ou certo código, existe os loops (laços de repetição).</p>
+
+  <h3>FOR</h3>
+  <p>Formado por três partes: inicialização, condição e incremento. A sintaxe é:</p>
+<pre class="lang-javascript linenums prettyprint">
+for (var i = 0; i &lt;= 10; i++) {
+  //código a ser executado até a condição se tornar falsa
+}
+</pre>
+
+  <h3>FOR IN</h3>
+  <p>É utilizado quando não sabemos quantas vezes temos que interar sobre um array ou objeto.</p>
+<pre class="lang-javascript linenums prettyprint">
+var arr = [1,2,3];
+for(var n in arr) {
+  console.log(n);
+}
+</pre>
+
+  <h3>FOREACH</h3>
+  <p>Utilizamos o <code>foreach</code> quando queremos percorrer as propriedades de um objeto ou os itens de um array, sem precisamos nos preocupar em contar quantos são.</p>
+<pre class="lang-javascript linenums prettyprint">
+var arr = [1,2,3];
+arr.forEach(function(each){
+  console.log(each);
+});
+</pre>
+
+  <h3>WHILE</h3>
+  <p>Funciona basicamente igual ao for, e é possível sempre trocar o for() por um while(). Escolhemos um ou outro pela clareza do que estamos fazendo. Geralmente preferimos utilizar o loop for() para interar com contadores e loops while() até que alguma condição mude (de true para false, por exemplo).</p>
+<pre class="lang-javascript linenums prettyprint">
+var x = true;
+while(x) {
+  console.log('Jane Doe');
+  x = false;
+}
+</pre>
+
+  <p>Nesse caso acima, o console.log será executado uma única vez, pois eu altero para false a variavel x, logo na primeira interação do laço. Mas eu poderia ter feito algo assim:</p>
+<pre class="lang-javascript linenums prettyprint">
+var i = 1,
+    x = 2;
+
+while(x &lt; 20) {
+  x = x + (x * i);
+
+  console.log('O valor atual de x é: ' + x);
+  i++;
+}
+</pre>
+
+  <h3>DO WHILE</h3>
+  <p>Segue o mesmo princípio do while, mas o corpo é sempre executado pelo menos uma vez, independente da condição, pois primeiro ele faz <b>do</b> e depois testa a condição.</p>
+<pre class="lang-javascript linenums prettyprint">
+do {
+  console.log('Jane Doe');
+} while(false);
+</pre>
+  <p>Apesar da condição já começar como falsa, veremos a string "Jane Doe" uma vez no console do browser.</p>
+
+</article>
diff --git a/manual/js/funcoes.html b/manual/js/funcoes.html
new file mode 100644
index 0000000..30b03f2
--- /dev/null
+++ b/manual/js/funcoes.html
@@ -0,0 +1,91 @@
+---
+layout: interna
+title: Funções
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>Funções</h1>
+  <h2>Criando e usando funções personalizadas</h2>
+
+  <p>Inicialmente, pense em funções como caixinhas mágicas: você joga coisas dentro, algo acontece e você recebe de volta uma transformação do que foi colocado. Por exemplo: imagine uma caixinha em que você coloca dois números: 3 e 5 e a caixa te devolve 8.</p>
+
+  <p>Os números 3 e 5 que colocamos dentro da caixa iremos chamar de <b>argumentos</b> e o 8 que recebemos, iremos chamar de <b>retorno</b>.</p>
+
+  <p>Nem sempre uma função terá argumentos e nem sempre terá um retorno, mas certamente ela irá realizar alguma coisa de nosso interesse, seja mudar a cor de algum elemento, abrir uma janela popup, ou qualquer uma das outras coisas que a linguagem JavaScript pode fazer.</p>
+
+  <p>As linguagens de programação já possuem algumas funções pré-definidas para nos ajudar. Da linguagem JavaScript podemos citar: <code>open()</code>(usada para abrir janelas popup), <code>parseInt()</code> (usada para converter um número ou string em inteiro), <code>encodeURI()</code> (codifica uma cadeia de caracteres em um URI válido)... </p>
+
+  <h2>Resolvendo problemas</h2>
+
+  <p>Sempre que estivermos programando em qualquer linguagem, temos que ter em mente uma coisa muito importante: <em>"o melhor jeito de resolver um problema grande é dividi-lo em problemas menores"</em>, cada um desses "problemas menores" serão resolvidos por funções pequenas, assim juntando as várias pequenas funções, teremos resolvido "o todo".</p>
+
+  <p>Apesar de ser possível escrever todo o código que resolve o problema grande numa única função gigante, não fazemos isso. Pois isso tornaria muito complexo nosso código, dificultaria uma futura manutenção e impossibilitaria o reaproveitamento de pequenas rotinas. Por isso preferimos dividir e depois criar uma função grande que utilize nossas outras funções pequenas, do que escrever tudo num só lugar.</p>
+
+  <h2>Declarando</h2>
+
+  <p>A declaração de uma função é quando construimos a caixa mágica.</p>
+
+<pre class="lang-javascript linenums prettyprint">
+function foo() {
+  //corpo
+}
+</pre>
+
+  <p><code>foo</code> é o nome da função e o código entre as chaves {}, é o corpo da nossa função. A palavra <code>function</code> é a forma da linguagem JavaScript indicar que estamos <b>declarando</b> uma função (criando a caixa mágica).</p>
+
+  <h2>Invocando</h2>
+
+  <p>Após construirmos a caixa, ela por si só não faz absolutamente nada até a chamarmos. A invocação consiste em colocar o nome da função seguido pelos parênteses. Isso faz com que o código dentro do corpo da nossa função seja executado.</p>
+<pre class="lang-javascript linenums prettyprint">
+foo();
+</pre>
+
+  <p>Experimente salvar um arquivo .html e abrir com o seu navegador, contendo o seguinte código:</p>
+<pre class="lang-html linenums prettyprint">
+&lt;script>
+function bar() {
+  alert('Hello World');
+}
+&lt;/script>
+</pre>
+  <p>Após abrir o arquivo com qualquer navegador, você irá notar que não irá acontecer absolutamente nada. Sim, nada. Pois ainda não <b>invocamos</b> a função. Apenas a <b>declaramos</b>. Para invocar, o arquivo ficaria com o seguinte conteúdo:</p>
+
+<pre class="lang-html linenums prettyprint">
+&lt;script>
+// declarando
+function bar() {
+  alert('Hello World');
+}
+
+// invocando
+bar();
+&lt;/script>
+</pre>
+
+  <h2>Exemplo de função com argumentos e retorno</h2>
+
+  <p>Lembram que eu iniciei o texto falando de uma caixa mágica que recebia 2 números e devolvia a soma deles ? Essa função ficaria assim:</p>
+<pre class="lang-javascript linenums prettyprint">
+function somar(x, y) {
+  return x + y;
+}
+</pre>
+  <p>E para invocar essa função <code>somar()</code> podemos passar quaisquer dois números:</p>
+<pre class="lang-javascript linenums prettyprint">
+somar(3, 5);
+somar(1, 2);
+somar(10, 32);
+</pre>
+  <p>Só que não vermos nada, pois não direcionamos o <code>return</code> para lugar nenhum.</p>
+
+<pre class="lang-javascript linenums prettyprint">
+&lt;p id="resultado">&lt;/p>
+&lt;p id="resultado2">&lt;/p>
+&lt;script>
+alert(somar(3, 5));
+document.getElementById('resultado').innerHTML = somar(1, 2);
+document.getElementById('resultado2').innerHTML = somar(10, 32);
+&lt;/script>
+</pre>
+</article>
diff --git a/manual/js/index.html b/manual/js/index.html
new file mode 100644
index 0000000..0e857ea
--- /dev/null
+++ b/manual/js/index.html
@@ -0,0 +1,73 @@
+---
+layout: interna
+title: O que é JavaScript?
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>O que é JavaScript?</h1>
+  <h2>Controlando o comportamento do HTML e o CSS</h2>
+
+  <h2>JavaScript não é Java</h2>
+  <p>A primeira coisa que você precisa saber: JavaScript não tem nada a ver com Java. Java é uma <a href="/iniciantes/manual/obasico/o-que-front-back.html">linguagem server-side</a>, como PHP, Ruby, Python e tantas outras. A única coisa parecida entre eles é o nome. ;-)</p>
+
+  <p>Sabendo disso, quero que saiba que JavaScript é uma linguagem de programação client-side. Ela é utilizada para controlar o HTML e o CSS para manipular comportamentos na página. Me pergunte agora: "Como assim comportamento?". Agora eu respondo: um comportamento comum, por exemplo, é um submenu. Sabe quando você passa o mouse em um ítem do menu, e aparece um submenu com vários outros ítens? Pois é. A obrigação de fazer aparecer esse submenu é do JavaScript. O submenu estava escondido, e quando passamos o mouse no ítem, o submenu aparece. Todo esse comportamento quem vai executar é o JavaScript.</p>
+
+  <h2>Quem criou o JavaScript?</h2>
+  <p>O JavaScript não foi criado pelo W3C, como muitos pensam. Na verdade ele foi criado por um cara chamado Brendan Eich na Netscape (um dos precursores dos navegadores web). Ele se chamava LiveScript, mas logo seu nome foi mudado para JavaScript. Mesmo assim o nome original é ECMAScript, por que o JavaScript é mantido pela European Computer Manufacturer's Association. Ou seja, chame de JavaScript mesmo, que é como todo mundo chama.</p>
+
+  <p>Voltando ao assunto principal: o JavaScript não é mantido pelo W3C, ele é uma linguagem criada e mantida pela ECMA. Eles mantém uma documentação da <a href="http://www.ecma-international.org/publications/standards/Stnindex.htm">linguagem no site deles</a>, mas a melhor documentação ainda são os materiais que você pode encontrar na web mesmo.</p>
+
+  <h2>Camada de comportamento</h2>
+  <p>Você já deve ter lido a parte que fala sobre <a href="/iniciantes/manual/obasico/desenvolvimentocamadas.html">o desenvolvimento separando em camadas</a>, onde explicamos que existem três camadas básicas no desenvolvimento para Web: a informação que fica com o HTML, a formatação, que fica com o CSS e o comportamento, que fica com o JavaScript.</p>
+  <p>O JavaScript é a terceira camada de desenvolvimento por que ele manipula as duas primeiras camadas, isto é: HTML e CSS. Imagine que você precise de um Slider de imagens. Toda a movimentação, ações de cliques nas setinhas e etc, é o JavaScript que vai cuidar. É isso que chamamos de comportamento.</p>
+
+  <h2>Orientado a Objeto</h2>
+  <p>Talvez seja cedo demais para falar sobre orientação a objetos em linguagens de programação, mas você precisa saber, pelo menos, que o JavaScript é uma linguagem com Orientação a Objetos. Não vamos entrar em detalhes agora, não queremos que você confunda as bolas. Mas saiba que um objeto na programação é um conjunto de informações. Objeto é um grupo de dados. Mas por hora, fique apenas com essas informações. Vamos nos aprofundar em momento oportuno.</p>
+
+  <h2>Hello World!</h2>
+  <p>Vamos fazer seu primeiro Hello World com JavaScript?</p>
+  <p>Primeiro, escreva a <a href="/iniciantes/manual/html/estruturabasica.html">estrutura básica do HTML</a>:</p>
+<pre class="lang-javascript linenums prettyprint">
+&lt;!DOCTYPE html&gt;
+&lt;html lang=&quot;pt-br&quot;&gt;
+  &lt;head&gt;
+    &lt;title&gt;T&iacute;tulo&lt;/title&gt;
+    &lt;meta charset=&quot;utf-8&quot;&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+  <p>Agora, antes do <code>&lt;/body&gt;</code> coloque este código:</p>
+<pre class="lang-html linenums prettyprint">
+&lt;script type=&quot;text/javascript&quot;&gt;
+  alert('Hello World!');
+&lt;/script&gt;
+</pre>
+
+  <p>O código final fica assim:</p>
+<pre class="lang-html linenums prettyprint">
+&lt;!DOCTYPE html&gt;
+&lt;html lang=&quot;pt-br&quot;&gt;
+  &lt;head&gt;
+    &lt;title&gt;T&iacute;tulo&lt;/title&gt;
+    &lt;meta charset=&quot;utf-8&quot;&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;script type=&quot;text/javascript&quot;&gt;
+    alert('Hello World!');
+  &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  <p>E pronto, você já escreveu seu primeiro código JavaScript. Abra esse documento HTML no browser e você vai ver uma janela de alerta aparecendo.</p>
+
+  <p>Você pode entender também tudo o que envolve o JavaScript nessa simples apresentação:</p>
+  <script async class="speakerdeck-embed" data-id="506d82b72d77290002058ec3" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
+
+  <p>Seria interessante você entender melhor <a href="/iniciantes/manual/js/inserindo-js.html">como que se insere um JavaScript na sua página</a>.</p>
+</article>
diff --git a/manual/js/inserindo-js.html b/manual/js/inserindo-js.html
new file mode 100644
index 0000000..0ad866c
--- /dev/null
+++ b/manual/js/inserindo-js.html
@@ -0,0 +1,51 @@
+---
+layout: interna
+title: Inserindo JS na página?
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>Inserindo JS na página</h1>
+  <h2>Como relacionar um arquivo JavaScript no seu HTML?</h2>
+
+  <p>Para adicionar códigos JavaScript à uma página devemos usar a <a href="../html/oquetags.html"><i>tag</i></a> <code>&lt;script&gt;</code>, podendo fazer essa inserção de duas formas:</p>
+
+  <h2>1. Inserindo códigos na própria página (<i>inline</i>):</h2>
+  <p>Cria-se uma <i>tag</i> &lt;script&gt;, informando que o valor do atributo 'type' é 'text/javascript', então, coloca-se o código JavaScript dentro dessa <i>tag</i>.</p>
+  <p>Exemplo:</p>
+<pre class="lang-javascript lang-html prettyprint linenums">
+&lt;script type="text/javascript"&gt;
+  alert('Olá mundo!');
+&lt;/script&gt;
+</pre>
+
+  <h2>2. Relacionando um arquivo externo na página:</h2>
+  <p>Essa forma é bem parecida com a inserção de códigos JavaScript <i>inline</i>, a maior diferença é que não coloca-se o código JavaScript dentro da <i>tag</i>, visto que esse código estará em um arquivo externo. Assim, simplesmente é preenchido o atributo 'src' da <i>tag</i> <code>&lt;script&gt;</code> com o caminho para o arquivo em questão.</p>
+  <p>Essa forma também permite carregar arquivos JavaScript sem ter que baixá-los para o seu projeto. Isso é bastante utilizado como uma forma de fazer com que arquivos que são usados por muitos projetos, como por exemplo a <a href="o-que-jquery.html">jQuery</a>, fiquem armazenados em <a href="https://pt.wikipedia.org/wiki/Cache" target="_blank">cache</a>, sendo então carregados de forma mais rápida.</p>
+
+  <h3>Exemplo 1 - adicionando um JavaScript do nosso projeto:</h3>
+  <p>Imagine que o projeto está com a seguinte estrutura de diretórios:</p>
+  <p>
+    projeto/<br/>
+    &nbsp;&nbsp;arquivo.html (página que irá adicionar o arquivo JavaScript)<br/>
+    &nbsp;&nbsp;js/<br/>
+    &nbsp;&nbsp;&nbsp;&nbsp;<b>meu-arquivo.js</b>
+  </p>
+  <p>Assim, se queremos que a página 'arquivo.html' carregue o arquivo 'js/meu-arquivo.js', utilizamos a seguinte marcação:</p>
+<pre class="lang-html prettyprint linenums">
+&lt;script type="text/javascript" src="js/meu-arquivo.js"&gt;&lt;/script&gt;
+</pre>
+
+  <h3>Exemplo 2 - adicionando um JavaScript da internet:</h3>
+  <p>Nesse exemplo, é carregado o <a href="o-que-framework.html"><i>framework</i></a> JavaScript <a href="o-que-jquery.html">jQuery</a> disponibilizado pela Google por um serviço de hospedagem de <i>libraries</i> (bibliotecas) JavaScript. Disponível em <a href="https://developers.google.com/speed/libraries/devguide?hl=pt-br#jquery" target="_blank">https://developers.google.com/speed/libraries/devguide?hl=pt-br#jquery</a>:</p>
+<pre class="lang-html prettyprint linenums">
+&lt;script
+  type="text/javascript"
+  src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
+&lt;/script&gt;
+</pre>
+
+  <h2>Qual é o melhor local para colocar a <i>tag</i> <code>&lt;script&gt;</code>?</h2>
+  <p>No geral, o melhor local para ser inserida uma <i>tag</i> <code>&lt;script&gt;</code> é antes do fechamento da <i>tag</i> <code>&lt;body&gt;</code>. Isso se dá devido ao fato de que o browser, ao encontrar uma <i>tag</i> <code>&lt;script&gt;</code>, precisa executar o que foi específicado ou dentro da <i>tag</i> ou pelo atributo 'src', bloqueando assim a renderização do restante da página.</p>
+  <p>Assim, o código JavaScript é executado assim que é interpretado, logo, se existem elementos abaixo do código em questão que são manipulados por esse código (por exemplo, quer-se remover todos os links de uma determinada página e os links encontram-se abaixo da <i>tag</i> <code>&lt;script&gt;</code>), é necessário adicionar eventos indicando que a página já foi carregada completamente, caso contrário, é bem possível que o código não funcione corretamente. </p>
+</article>
diff --git a/manual/js/o-que-framework.html b/manual/js/o-que-framework.html
new file mode 100644
index 0000000..d0da70a
--- /dev/null
+++ b/manual/js/o-que-framework.html
@@ -0,0 +1,27 @@
+---
+layout: interna
+title: O que é um framework?
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>O que é um Framework?</h1>
+  <h2>Entendendo o conceito</h2>
+  <p>
+  	Em uma busca rápida na web, é possível encontrar diversas definições para <strong>Framework</strong>, algumas simples, outras mais elaboradas, mas o ponto comum entre todas é a <strong>reusabilidade</strong>.
+  </p>
+  <p>
+  	Assim um Framework tem como principal objetivo resolver problemas recorrentes com uma abordagem genérica, permitindo ao desenvolvedor focar seus esforços na resolução do problema em si, e não ficar reescrevendo software. Você pode se perguntar, então Framework é uma biblioteca? Bem quase isso, pode-se dizer que é um conjunto de bibliotecas ou componentes que são usados para criar uma base onde sua aplicação será construída.
+  </p>
+  <p>
+    As frameworks ajudam no desenvolvimento rápido e seguro de aplicações mas é recomendável, estudar antes a tecnologia em que a mesma é desenvolvida. Logo é importante estudar os aspectos básicos do javascript antes de se aventurar em uma framework da Linguagem.  Possuindo o conhecimento das tecnologias da Framework é possível fazer suas própias modificações para que a framework possa atender todas as necessidades do desenvolvedor.
+  </p>
+  <h2>Frameworks em Destaque no Desenvolvimento Web </h2>
+  <p>
+   Existe diversas frameworks para desenvolvimento de aplicações, mas o nosso foco será em ferramentas para criação de sites. Abaixo são listados alguns que podem ajudar na sua carreira.
+  </p>
+  <h3>Boostrap</h3>
+  <p>
+    É utilizado para desenvolvimento de componentes de interface de sites, utilizado html, css e javascript e foi desenvolvido levando em consideração técnicas de design, para melhorar a experiência visual do usuário.
+  </p>
+</article>
diff --git a/manual/js/o-que-jquery.html b/manual/js/o-que-jquery.html
new file mode 100644
index 0000000..2fe1f7e
--- /dev/null
+++ b/manual/js/o-que-jquery.html
@@ -0,0 +1,45 @@
+---
+layout: interna
+title: O que é jQuery?
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>O que é jQuery?</h1>
+  <h2>É um framework JavaScript</h2>
+  <p>Lançada em 2006, por <a href="https://twitter.com/jeresig">John Resig</a>, jQuery, segundo definição consta em seu site, trata-se de uma rápida, pequena e rica em <i>features</i> biblioteca JavaScript.</p>
+  <p>Como o lema <i>"Write less, do more."</i> (escreva menos, faça mais), jQuery revolucionou o desenvolvimento web, sendo presente em inúmeros projetos atualmente.</p>
+  <h3>Mas, por que é tão utilizado?</h3>
+  <p>Exatamente pelo seu lema. Com jQuery é possível fazer diversos efeitos com poucas linhas e, que custariam dezenas de linhas em JavaScript puro.</p>
+  <p>Alguns recursos oferecidos facilmente pelo jQuery:</p>
+  <ul>
+  	<li>Seleção e manipulação de elementos HTML</li>
+  	<li>Manipulação de CSS</li>
+  	<li>Efeitos e animações</li>
+  	<li><i>Navegação</i> pelo DOM</li>
+  	<li>Ajax</li>
+  	<li>Eventos</li>
+  </ul>
+  <h3>Como uso?</h3>
+  <p>Igualmente qualquer arquivo JavaScript você precisa inseri-lo na página com as tags <code>script</code>. Você pode fazer o link para uma CDN como a do <a href="https://developers.google.com/speed/libraries/devguide?hl=pt-br#jquery">Google</a> ou fazer o download do framework no seu projeto e linkar direto (vale lembrar que se optar por essa opção, faça o link para a versão <b>minificada</b>).</p>
+<pre class="lang-html prettyprint linenums">
+&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
+</pre>
+  <h3>A sintaxe</h3>
+  <p>A sintaxe básica é a seguinte:</p>
+<pre class="lang-javascript prettyprint linenums">$('seletorHTML').acao();</pre>
+  <h3>Alguns exemplos práticos</h3>
+  <h4>Manipulação HTML</h4>
+  <pre class="lang-javascript prettyprint linenums">$( "#botao" ).html( "Sucesso!" )</pre>
+  <p>No exemplo acima, selecionamos o elemento com <i>ID</i> botão e inserimos a <i>string</i> "Sucesso!".</p>
+  <h4>Eventos</h4>
+<pre class="lang-javascript prettyprint linenums">
+var box = $( "#box" );
+$( "#botao" ).on( "click", function( event ) {
+  box.show();
+});
+</pre>
+  <p>No <i>snippet</i> acima, guardarmos em uma <a href="variaveis.html">variável</a> o elemento com <i>ID</i> box. Em seguida, adicionao ao elemento com <i>ID</i> 'botao' o evento do <i>clique</i>. Ao ser disparado, esse evento mostra o elemento, que guardarmos na variável box anteriormente, através do método <code>show()</code>.</p>
+
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/js/objetos.html b/manual/js/objetos.html
new file mode 100644
index 0000000..3ced0cc
--- /dev/null
+++ b/manual/js/objetos.html
@@ -0,0 +1,114 @@
+---
+layout: interna
+title: O que são Objetos
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>O que são Objetos?</h1>
+  <h2>Programação orientada a objetos</h2>
+
+  <p>Objetos são como uma espécie de "super <a href="variaveis.html">variáveis</a>" que armazenam uma "coleção de valores" referenciados por nome, e que podem ser recuperados para serem utilizados em diversas outras partes de um programa. Em JavaScript praticamente qualquer tipo de dado é um objeto.</p>
+
+  <p>Cada item dessa "coleção de valores", é chamado de <em>propriedade</em>. Cada propriedade é composta por um par de "nome: valor". Quando uma propriedade armazena uma <a href="funcoes.html">função</a>, ela se torna o que chamamos de <em>método</em>.</p>
+
+  <h2>Criando objetos</h2>
+  <p>Agora que já sabemos o que são objetos, vamos ver um pouco sobre como trabalhar com eles. Primeiramente vamos conhecer duas maneiras de se criar objetos.</p>
+
+  <p><b>Notação literal</b></p>
+
+  <p>A maneira mais simples (e recomendável) de se criar objetos em JavaScript é usando o que chamamos de <em>notação literal</em>. Um objeto literal é composto por um par de chaves "<code>{ }</code>", que envolve uma ou mais propriedades. Cada propriedade segue o formato "<code>nome: valor</code>" e devem ser separadas por vírgula.</p>
+
+  <p>Para entender bem, nada melhor que um exemplo. Imagine que você vai criar um programa para organizar álbuns de vários cantores e bandas. Aqui vamos criar um objeto para armazenar informações sobre um álbum da banda Metallica, depois você pode praticar criando objetos com suas bandas favoritas. Então, mãos a obra!</p>
+<pre class="lang-javascript prettyprint linenums">
+var album = {
+  title: "Metallica (Black Album)",
+  released: 1991,
+  showInfo: function() {
+    alert("Título do álbum: " + this.title + "Lançado em: " + this.released);
+  }
+};
+</pre>
+
+  <p>Conseguiu entender o que o código acima faz? Veja, é bem simples: primeiro criamos uma variável chamada "album". Depois criamos um objeto - note a abertura e fechamento das chaves: <code>{</code> e <code>}</code>. Então adicionamos duas propriedades e um método ao nosso objeto, que são: "title", "released" e "showInfo". Nas propriedades nós armazenamos o título e ano de lançamento do álbum, e no método temos uma função que irá exibir as informações sobre o álbum em uma "caixa de alerta" para o usuário. Mais fácil do que parece, não é mesmo?</p>
+
+  <p><b>Função construtora</b></p>
+
+  <p>Outra maneira de criar objetos em JavaScript é utilizando uma <em>função construtora</em>. Se quisermos criar o mesmo objeto que criamos anteriormente, só que usando uma função construtora para isso, basta escrever o seguinte código:</p>
+<pre class="lang-javascript prettyprint linenums">
+var album = new Object();
+album.title = "Metallica (Black Album)";
+album.released = 1991;
+album.showInfo = function() {
+  alert("Título do álbum: " + this.title + "Lançado em: " + this.released);
+};
+</pre>
+
+  <p>Como você pôde notar, a sintaxe ficou um pouco diferente. Aqui devemos utilizar a palavra-chave <code>new</code> seguida pela função construtora <code>Object()</code> ao invés de abrir e fechar chaves. Depois nós adicionamos as propriedades e métodos utilizando <code>album.title</code>, <code>album.released</code> e <code>album.showInfo</code> e atribuimos os valores à elas ao invés de colocar os pares de "nome: valor".</p>
+
+  <h2>Acessando propriedades e métodos</h2>
+
+  <p>Após ter criado um objeto, você vai precisar acessar os valores que ele armazena. Podemos acessar (ou se preferir: "recuperar") os valores guardados em um objeto, de duas maneiras: utilizando <em>notação de ponto</em> ou <em>notação de colchetes</em>. Veja um exemplo:</p>
+<pre class="lang-javascript prettyprint linenums">
+// notação de ponto
+album.title // Retorna: Metallica (Black Album)
+
+// notação de colchetes
+album["title"] // Retorna: Metallica (Black Album)
+</pre>
+
+  <p>Repare que no código acima, acessamos a mesma propriedade de duas maneiras diferentes. Geralmente é recomendável que você utilize a notação de ponto - <code>album.title</code> - por ser mais simples de ler e escrever.</p>
+
+  <p>Como os métodos são funções, você deve adicionar um par de parênteses - <code>()</code> - quando for acessá-los. Fora isso, nada de diferente. Veja no exemplo abaixo:</p>
+<pre class="lang-javascript prettyprint linenums">
+// notação de ponto
+album.showInfo() // Exibe alerta:
+// Título do álbum: Metallica (Black Album) Lançado em: 1991
+
+// notação de colchetes
+album["showInfo"]() // Exibe alerta:
+// Título do álbum: Metallica (Black Album) Lançado em: 1991
+</pre>
+
+  <h2>Alterando e adicionando propriedades</h2>
+  <p><b>Alterando</b></p>
+
+  <p>Vez por outra vamos precisar alterar os valores armazenados nas propriedades de nossos objetos. Fazer isso também é bem tranquilo. Basta acessar a propriedade que deseja alterar, utilizando a notação de ponto que acabamos de conhecer, e atribuir o novo valor à ela. Quer um exemplo?</p>
+<pre class="lang-javascript prettyprint linenums">
+album.title = "Powerslave";
+album.released = 1984;
+</pre>
+
+  <p>O que aconteceu no código acima? Isso mesmo. Alteramos o título do álbum e o ano de lançamento. Agora nosso objeto armazena informações sobre um outro álbum de outra banda.</p>
+
+  <p>Para fixar, antes de prosseguir a leitura (supondo que você esteja lendo e digitando os códigos para treinar), altere os valores de <code>title</code> e <code>released</code> para Metallica (Black Album) e 1991 novamente.</p>
+
+  <p><b>Adicionando</b></p>
+
+  <p>Bom, agora que o título do nosso álbum voltou a ser "Metallica (Black Album)", que tal adicionar uma lista com os títulos das faixas do álbum? Sim, nós podemos adicionar novas propriedades e métodos aos nossos objetos mesmo após ter criado eles. A sintaxe é a mesma utilizada para alterar valores, que nós acabamos de ver.</p>
+
+  <p>Objetos podem armazenar qualquer tipo de dado válido em JavaScript, então, para criar uma lista com os títulos das faixas de nosso álbum, basta seguir o exemplo abaixo:</p>
+<pre class="lang-javascript prettyprint linenums">
+// Aqui adicionamos um array com os nomes de algumas faixas do álbum.
+// Para praticar você pode adicionar todas as 12 faixas.
+album.tracks = ["Enter Sandman", "Sad but True", "Holier Than Thou", "The Unforgiven"];
+</pre>
+
+  <h2>Deletando propriedades</h2>
+  <p>Você pode deletar uma propriedade ou método de um objeto utilizando o operador <code>delete</code> seguido pelo nome da propriedade. Vamos testar?</p>
+<pre class="lang-javascript prettyprint linenums">
+typeof album.showInfo // "function"
+
+delete album.showInfo // deleta o método showInfo
+
+typeof album.showInfo // "undefined"
+</pre>
+
+  <h2>Leitura adicional</h2>
+  <p>Agora você já sabe o básico sobre objetos em JavaScript. Para uma abordagem mais profunda sobre o assunto, consultar <strong>bons livros</strong> pode ser de grande ajuda. Seguem algumas recomendações:</p>
+
+  <ul>
+    <li>"O Melhor do JavaScript", por Douglas Crockford. Capítulo 4, Página 26.</li>
+    <li>"JavaScript - O Guia Definitivo" - 6ª Edição, por David Flanagan. Capítulo 6, Página 112.</li>
+  </ul>
+</article>
diff --git a/manual/js/operadores.html b/manual/js/operadores.html
new file mode 100644
index 0000000..b0b330f
--- /dev/null
+++ b/manual/js/operadores.html
@@ -0,0 +1,128 @@
+---
+layout: interna
+title: Operadores
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>Operadores</h1>
+  <p>Os operadores vão nos permitir fazer operações(mesmo!? Não me diga...) matemáticas, de comparação e lógicas</p>
+
+  <h2>Aritiméticos</h2>
+  <p>Para as operações matemáticas básicas são utilizados os seguintes, adição(+), subtração(-), multiplicação(*) e divisão(/).
+	<pre class="lang-javascript prettyprint linenums">
+//Adição
+2+2 //4
+2.3+4 //6.3
+1.5+1.5 //3
+
+//Subtração
+2-2 //0
+8-5 //-8
+3.2-1 //2.2
+
+//Multiplicação
+2*3 //6
+1.5*2 //3
+
+//Divisão
+1/2 //0.5
+1.5/2 //0.75
+2/0 //Infinity
+	</pre>
+  </p>
+  <p>Você notou que podemos ter resultados com casas decimais e que é retornada a constante Infinity em qualquer número divido por zero.</p>
+  <p>Além dos desses operadores básicos temos outros operadores bem úteis:</p>
+  <dl>
+  	<dt>Resto (%)</dt>
+  	<dd>Retorna o resto inteiro da divisão.
+		<pre class="lang-javascript prettyprint linenums">
+5%4 //1
+4%5 //4
+		</pre>
+  	</dd>
+  	<dt>Incremento (++)</dt>
+  	<dd>Adiciona um a variável. Se utilizado antes(++x) adiciona um e retorna o valor, caso o operador seja utilizado depois da variável(x++) retorna o valor e adiciona um.
+		<pre class="lang-javascript prettyprint linenums">
+var x = 1;
+++x //2
+x++ //2
+		</pre>
+  	</dd>
+  	<dt>Decremento (--)</dt>
+  	<dd>O comportamento desse operador é parecido com o de incremento(acho que você já entendeu).Ele subtrai um da variável. Se utilizado antes(--x) subtrai um e retorna o valor, caso o operador seja utilizado depois da variável(x--) retorna o valor e subtrai um.
+		<pre class="lang-javascript prettyprint linenums">
+var x = 2;
+--x //1
+x-- //1
+		</pre>
+  	</dd>
+  </dl>
+  <h2>De comparaçao</h2>
+  <dl>
+  	<dt>Igual (==)</dt>
+  	<dd>Retorna verdadeiro se os valores comparados forem iguais.
+		<pre class="lang-javascript prettyprint linenums">
+1=='1' //true
+		</pre>
+  	</dd>
+  	<dt>Não igual (!=)</dt>
+  	<dd>Retorna verdadeiro se os valores comparados não forem iguais. Esse operador também pode ser chamado de diferente de.
+		<pre class="lang-javascript prettyprint linenums">
+4!=1 //true
+		</pre>
+  	</dd>
+  	<dt>Igual estrito (===)</dt>
+  	<dd>Esse operador é mais severo, só retorna verdadeiro se o valor e o tipo comparados forem iguais.
+		<pre class="lang-javascript prettyprint linenums">
+3==='3' //false
+3===3 //true
+		</pre>
+  	</dd>
+  	<dt>Não igual estrito (!==)</dt>
+  	<dd>Não se engane, esse operador vai retornar verdadeiro se os valores e ou os tipos forem diferentes
+		<pre class="lang-javascript prettyprint linenums">
+3!=='3' //true
+3!==3 //false
+3!==4 //true
+		</pre>
+  	</dd>
+    <dt>Maior que (>)</dt>
+    <dd>Compara se o operador da esquerda é maior que o da direita. Caso seja retorna verdadeiro
+    <pre class="lang-javascript prettyprint linenums">
+1>2 //false
+5>3 //true
+4>'1' //true
+    </pre>
+    <dt>Maior ou igual que (>=)</dt>
+    <dd>Compara se o operador da esquerda é maior ou igual ao da direita. Caso seja retorna verdadeiro
+    <pre class="lang-javascript prettyprint linenums">
+1>=2 //false
+5>=3 //true
+4>='1' //true
+2>=2 // true
+    </pre>
+    </dd>
+    <dt>Menor que (<)</dt>
+    <dd>Compara se o operador da esquerda é menor que o da direita. Caso seja retorna verdadeiro
+    <pre class="lang-javascript prettyprint linenums">
+1<2 //true
+5<3 //false
+4<'1' //false
+    </pre>
+    </dd>
+    <dt>Menor ou igual que (<=)</dt>
+    <dd>Compara se o operador da esquerda é menor ou igual ao da direita. Caso seja retorna verdadeiro
+    <pre class="lang-javascript prettyprint linenums">
+1<=2 //true
+5<=3 //false
+4<='1' //false
+2<=2 // true
+    </pre>
+    </dd>
+  </dl>
+  <h2>Lógicos</h2>
+  <p>Operadores lógicos são utilizados normalmente com expressões que retornam verdadeiro ou falso, entretanto caso seja utilizado com valores não booleanos o retorno será não booleano</p>
+
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/js/variaveis.html b/manual/js/variaveis.html
new file mode 100644
index 0000000..8177402
--- /dev/null
+++ b/manual/js/variaveis.html
@@ -0,0 +1,219 @@
+---
+layout: interna
+title: O que são variáveis?
+---
+{% include submenu-js.html %}
+
+<article class="content">
+  <h1>O que são variáveis?</h1>
+  <h2>Crie, manipule e use valores variáveis</h2>
+
+  <p>Variável é um dos conceitos mais importantes no estudo de programação, independente da plataforma ou linguagem utilizada. Uma variável referencia a um espaço na memória do computador utilizado para guardar informações que serão usadas em seus programas.</p>
+
+  <p>Para elucidar o conceito, imagine que a memória de seu computador é um armário com 100 gavetas e você guarda cada tipo de objeto em uma gaveta diferente. Provavelmente você vai querer criar etiquetas para referenciar o que guarda em cada gaveta.</p>
+
+  <p>
+    Mas por que o nome "variável"?<br />
+    Porque uma variável pode ter o seu valor alterado durante a execução de um programa. Ainda na analogia anterior, suponha que há uma gaveta "Meias" com 2 meias; se necessário, pode-se adicionar mais 5 meias e, caso seja um colecionador, até 200. Assim a gaveta "Meias" muda o seu valor.
+  </p>
+
+  <h2>Criando variáveis</h2>
+
+  <p>Para criar uma variável utiliza-se <code>var</code> (opcional) e, para determinar o seu valor, o operador de atribuição (<code>=</code>). Para facilitar a compreensão do código, deve-se sempre escolher um nome que identifique o tipo de dado a ser armazenado.</p>
+
+  <p>Exemplo:</p>
+<pre class="lang-html prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+  var nome = &quot;Gabriel Mendon&ccedil;a&quot;;
+  var idade = 25;
+&lt;/script&gt;
+</pre>
+
+  <p>Note também que no final de cada linha foi utilizado o ponto-e-vírgula (;), responsável por delimitar expressões, <i>statements</i> e construtores. Embora não seja obrigatório, faz com que o seu código seja mais preciso e claro.</p>
+
+  <p>Observação: o código ainda pode ser simplificado deixando apenas uma declaração <code>var</code> e separando cada variável por vírgula e fechando a declaração em seu final com ponto-e-vírgula.</p>
+
+  <p><b>Brincando um pouco!</b></p>
+
+  <p>Abra seu editor de texto preferido; salve o arquivo HTML em uma pasta de sua preferência com a <a href="/iniciantes/manual/html/estruturabasica.html" title="Estrutura básica de uma página HTML">estrutura básica</a>, e abra o arquivo em um navegador. <br />
+    Observação: Em vez de copiar e colar, é interessante que você digite o código para que se adapte à sintaxe da linguagem.</p>
+
+  <p><b>Exemplo 1</b></p>
+<pre class="lang-html prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+  var nome = prompt('Digite seu nome: ');
+  alert(nome + ', seja bem vindo!');
+&lt;/script&gt;
+</pre>
+
+  <p>Nesse exemplo, declaramos a variável "nome", onde guardamos o nome que foi solicitado ao usuário através do método <code>prompt()</code>. Após o nome informado ser armazenado (isso é, se tornado valor da variável), uma mensagem de boas vindas é apresentada ao usuário através do método <code>alert()</code> utilizando o nome armazenado na variável.</p>
+
+  <p><b>Exemplo 2</b></p>
+<pre class="lang-html prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+  /* Este é um script para cálculo de idade! */
+
+  // Declara o ano atual para fazer o cálculo
+  var anoAtual = 2014;
+
+  // Pede que o usuário digite o ano em que nasceu
+  var anoNascimento = prompt('Digite o ano em que você nasceu.');
+
+  // Calcula a idade do usuário e armazena na variável idade
+  var idade = anoAtual - anoNascimento;
+
+  // Mostra ao usuário a idade que ele possui
+  alert("Sua idade é: " + idade + " anos");
+&lt;/script&gt;
+</pre>
+
+  <p>Nesse exemplo, vimos algumas coisas novas: operadores aritméticos de soma e subtração (<code>+</code>, <code>-</code>), o operador de concatenação (<code>+</code>, para operar strings) e de comentários (<code>//</code>  para linha única e <code>/* */</code> para múltiplas linhas).</p>
+
+  <p>Um comentário é um trecho no código que não é executado, e por isso serve como um espaço para explicações e descrições relacionadas ao código ou até mesmo para evitar a execução de um bloco de código.</p>
+
+  <h2>Definindo nomes de variáveis</h2>
+
+  <p>Quando criamos variáveis temos de levar em consideração algumas regras específicas da linguagem:</p>
+  <ul>
+    <li>
+      <b>Uma variável é <i>case-sensitive</i></b>
+      <p>
+        Isso significa que nomes com letras maiúsculas são diferentes de nomes com letras minúsculas: para um programa em JavaScript, <b>Nome</b> é diferente de <b>nome</b>.
+      </p>
+    </li>
+    <li>
+      <b>Caracteres válidos</b>
+      <ul>
+        <li>
+          <b>Palavras:</b> embora a maioria dos navegadores já reconheça uma variedade de caracteres UTF-8 (como palavras com acentos e "ಠ_ಠ", por exemplo), o recomendado é o uso apenas letras de MAIÚSCULAS e minúsculas, sem acentos e espaços.<br />
+          <p>
+            <i>
+              var meuNOME = "joão"; <br />
+              var meunome = "josé"; <br />
+              var MeuNoMe = "Thiago"; <br />
+              var ಠ_ಠ = "JavaScript é legal!"; // Não recomendado, entretanto
+            </i>
+          </p>
+        </li>
+        <li>
+          <b>Números:</b> desde que sejam precedidos por uma ou mais letras.<br />
+          <p>
+            <i>
+              var camisa9 = "ronaldo";<br />
+              var camisa230lateral = "joaozinho";
+            </i>
+          </p>
+        </li>
+        <li>
+          <b>Underline e cifrão:</b> <b>"_"</b> e "$" também são permitidos em qualquer posição, mas pouco usados.<br />
+          <p>
+            <i>
+              var _nome = 'Gabriel' <br />
+              var segundo_nome = "Mendonça" <br />
+              var $ultimo_nome_ = ""
+            </i>
+          </p>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <p>
+    <b>Nome reservados pela linguagem</b><br />
+    Alguns nomes não podem ser utilizados para criação de variáveis pois estão reservados de alguma forma à linguagem. São eles:
+  </p>
+
+  <p>
+    <i>
+      abstract boolean break byte case catch char class const continue
+      default do double else extends  false final finally float for function
+      goto if implements import in instanceof int interface long native new
+      null package private protected public return short static super switch
+      synchronized this throw throws transient true try var void while with
+    </i>
+  </p>
+
+
+  <h2>Tipos de variáveis</h2>
+
+  <p>Quando falamos em tipos de variáveis, temos as linguagens chamadas de fortemente tipadas e fracamente tipadas.</p>
+  <p>Em linguagens fortemente tipadas, definimos o tipo da variável no momento de sua criação. Exemplos de linguagens do tipo: Java; C; C++.</p>
+  <p>Em linguagens fracamente tipadas, não precisamos definir o tipo da variável, ela é tipada automaticamente quando recebe um valor. Exemplos de linguagens do tipo: Python; Ruby; Javascript.</p>
+
+  <ul>
+    <li>
+      <p><b>Int</b> - Variáveis com valores inteiros.</p>
+      <p>
+        <i>
+          var idade = 17; <br />
+          var graus = -3; <br />
+          var pontos = 0; <br />
+          var numeroGrande = 2000009283;
+        </i>
+      </p>
+    </li>
+
+    <li>
+      <p><b>Float</b> - Variáveis com ponto flutuante ou casas decimais.</p>
+
+      <p>
+        <i>
+          var peso = 32.59345; <br />
+          var PI = 3.14; <br />
+          var meu_saldo = -1034.32
+        </i>
+
+      </p>
+
+      <p>
+        <i><b>Observação:</b> em linguagens de programação utiliza-se "." (ponto final) para separar casas decimais em vez da ',' (vírgula).</i>
+      </p>
+    </li>
+
+    <li>
+      <p><b>String</b> - Variáveis de texto, normalmente chamada de "cadeia de caracteres". Os valores desse tipo são atribuídos utilizando aspas duplas (") ou aspas simples (') como delimitador.</p>
+
+      <p>
+        <i>
+          var nome = "Gabriel Mendonça"; <br />
+          var data_nascimento = "17 de Junho de 1988"; <br />
+          var email = "gabriel@host2.com.br";<br />
+          var tempo = "20s";
+        </i>
+      </p>
+
+      <p>
+        Observação: Tudo o que é declarado entre os delimitadores (") ou (') é entendido como parte da string, mesmo que sejam números.</i>
+      </p>
+    </li>
+
+    <li>
+      <p><b>Booleanos</b> - Tipo de dado de dois valores: "true" (verdadeiro) ou "false" (falso).</p>
+
+      <p>
+        <i>
+          var verdadeiro = true; <br />
+          var verdadeiro2 = 1; <br />
+
+          var falso1 = false; <br />
+          var false2 = 0; <br />
+          var falso3 = null <br />
+        </i>
+      </p>
+
+      <p>
+        <i><b>Observação:</b> Apesar dos valores <code>true</code> e <code>false</code> representarem, respectivamente, os valores "verdadeiro" e "falso", pode-se utilizar outros valores para essa representação, como exemplificado acima.</i>
+      </p>
+    </li>
+
+    <li>
+      <p><b>Arrays</b> - Um array referencia a vários espaços na memória. É um conjunto de valores e/ou variáveis organizadas por índice (que pode ser um valor inteiro ou string). O entendimento desse tipo é muito importante.</p>
+      <p>Retomando a analogia inicial: imagine que em uma gaveta você queira armazenar bebidas. Nela teria suco, refrigerante, café, água mineral... Perceba que esses itens formam uma lista e que todos os itens são bebidas, ou seja, itens de uma mesma categoria. Com o uso de arrays evitamos declarar diversas variáveis para um mesmo grupo (nada de <code>bebida1</code>, <code>bebida2</code>!), acessando os itens pelos seus respectivos índices: <code>bebida[1]</code>, <code>bebida[2]</code>. Se você perceber, declarar várias variáveis para uma mesma coisa usaria desnecessariamente várias gavetas, enquanto declarar um array para armazenar todas as "mesmas coisas" usaria apenas uma. Não soa mais inteligente? :-)</p>
+      <p>Pense que, enquanto uma variável é uma casa, um array é um prédio; ou que um array é como um gaveteiro. Na seção <a href="/iniciantes/manual/js/arrays.html">Arrays</a> você entenderá melhor seu funcionamento.</p>
+    </li>
+
+    <li>
+      <p><b>Objetos</b> - Ver seção <a href="/iniciantes/manual/js/objetos.html">O que são objetos</a>.</p>
+    </li>
+  </ul>
+</article>
diff --git a/manual/obasico/desenvolvimentocamadas.html b/manual/obasico/desenvolvimentocamadas.html
new file mode 100644
index 0000000..527fc06
--- /dev/null
+++ b/manual/obasico/desenvolvimentocamadas.html
@@ -0,0 +1,27 @@
+---
+layout: interna
+title: O que é desenvolvimento por camadas?
+---
+{% include submenu-obasico.html %}
+
+<article class="content">
+  <h1>Desenvolvimento por camadas</h1>
+  <h2>Separando a informação, formatação e comportamento</h2>
+
+  <p>Basicamente existem três separações no desenvolvimento web: <strong>Informação</strong>, que fica com o código HTML, onde você vai dar significado à informação. <strong>Formatação</strong>, que fica com o CSS, que é como você vai dar estilo a toda informação marcada com HTML. E por fim a camada de <strong>Comportamento</strong>, que é como você vai controlar elementos do HTML com Javascript e seus frameworks.</p>
+
+  <p>O HTML vai servir para marcar sua informação dando significado a ela. Se você marca uma frame com a tag &lt;H1&gt;, você está dizendo para leitores de telas para cegos, motores de buscas e browsers, que aquela frase se trata de um título importante. Você deu significado à este pedaço de texto.</p>
+
+  <p>Logo depois você precisará deixar esse título com uma cor diferente, com um background bonito e uma fonte legal. Aí você entra com o CSS para fazer esse trabalho. Essa formatação é importante por que você precisa deixar o site do jeito que o Designer quer. Lembre-se que aqui você só modifica o visual do elemento e não o significado dele.</p>
+
+  <p>Essa separação garante que ao modificar o código CSS você não estrague o trabalho já feito no HTML. Os códigos estão totalmente separados e você consegue manter a organização sob controle, mantendo cada código em seu devido lugar.</p>
+  <p>Por isso, evite inserir código CSS direto no HTML, como o exemplo abaixo:</p>
+
+<pre class="lang-html prettyprint linenums">
+&lt;h1 style=&quot;background-color: orange;&quot;&gt;T&iacute;tulo com fundo laranja&lt;/h1&gt;
+</pre>
+
+  <p>Isso faz com que você suje seu código HTML e não deixe seu código CSS centralizado em um lugar. Suponha que você tenha outros títulos com o fundo laranja e queira mudar todos para outra cor, você terá que encontrar cada um deles dentro do seu projeto e mudar manualmente cada um. Com o desenvolvimento em camadas você não tem problemas assim.</p>
+
+  <p>Este é o conhecimento básico sobre camadas client-side que você pode ter.</p>
+</article>
diff --git a/manual/obasico/index.html b/manual/obasico/index.html
new file mode 100644
index 0000000..5e9e84a
--- /dev/null
+++ b/manual/obasico/index.html
@@ -0,0 +1,11 @@
+---
+layout: interna
+title: O Básico
+---
+{% include submenu-obasico.html %}
+
+<article class="content">
+  <h1>O básico</h1>
+  <h2>Informações básicas e importantíssimas para você não se perder no caminho.</h2>
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/obasico/o-que-front-back.html b/manual/obasico/o-que-front-back.html
new file mode 100644
index 0000000..f39f438
--- /dev/null
+++ b/manual/obasico/o-que-front-back.html
@@ -0,0 +1,43 @@
+---
+layout: interna
+title: O que é front-end e back-end?
+---
+{% include submenu-obasico.html %}
+
+<article class="content">
+	<h1>O que é client-side e server-side?</h1>
+	<h2>Diferenças entre linguagem client-side e linguagem server-side</h2>
+ 
+    <p>
+        Existem dois tipos de linguagens para desenvolvermos para internet: as linguagens <strong>client-side</strong> e as linguagens <strong>server-side</strong>. Você pode ver estes nomes meio diferentes em outros lugares como por exemplo, front-end, se referindo às linguagens client-side e back-end se referindo às linguagens server-side. Não se preocupe, são a mesma coisa. Mas nesse texto, para que você possa entender melhor, vamos usar client-side e server-side.
+    </p>
+    <p>
+        As linguagens server-side são linguagens que o SERVIDOR entende. Isso quer dizer que vai escrever um código onde o servidor vai processá-lo e então vai mandar para o seu navegador a resposta.
+    </p>
+    <p>
+        As linguagens client-side são linguagens onde apenas o seu NAVEGADOR vai entender. Quem vai processar essa linguagem não é o servidor, mas o seu browser. 
+    </p>
+    <p>Por exemplo: se criarmos um script em linguagem back-end (PHP, Asp, Java, Ruby, etc) que apenas calcula a soma de 2 + 2, será o SERVIDOR (ou back, o server) que calculará este resultado. Se fizermos esse cálculo em alguma linguagem front-end, como o JavaScript, quem calculará essa conta é o BROWSER do usuário. Por isso o termo client ou front.</p>
+    <p>
+        <img src="/iniciantes/assets/img/client-side-back-end.png" alt="Imagem demonstrando a diferença entre Client-side e Server-side">
+    </p>
+          
+    <p>Assim, os profissionais que trabalham na interface do usuário, são chamados de Desenvolvedores front-end, e aqueles que trabalham no core da aplicação, fazendo uma programação que somente o servidor irá entender são chamados de Desenvolvedores back-end.</p>
+    
+    <h3>Exemplos de linguagens</h3>
+    <p>Essas linguagens são linguagens client-side. É o que vamos aprender durante todo esse conteúdo:</p>
+    <ul>
+        <li>HTML (xHTML, HTML4, HTML5...)</li>
+        <li>CSS (CSS2.1, CSS3...)</li>
+        <li>JavaScript</li>
+    </ul>
+    
+    <p>Essas são linguagens server-side, são as linguagens com que os programadores back-end trabalham:</p>
+    <ul>
+        <li>PHP</li>
+        <li>ASP</li>
+        <li>Java</li>
+        <li>Ruby</li>
+        <li>Python</li>
+    </ul>
+</article>
diff --git a/manual/obasico/oquedom.html b/manual/obasico/oquedom.html
new file mode 100644
index 0000000..f5370da
--- /dev/null
+++ b/manual/obasico/oquedom.html
@@ -0,0 +1,25 @@
+---
+layout: interna
+title: O que é DOM?
+---
+{% include submenu-obasico.html %}
+
+<article class="content">
+  <h1>O que é DOM?</h1>
+  <h2>A árvore de elementos do HTML.</h2>
+  <p>Sigla para Document Object Model, o DOM é a interface entre a linguagem Javascript e os objetos do HTML. </p>
+  <p>O DOM foi criado pela <a href="http://tableless.github.io/iniciantes/manual/obasico/oquew3c.html" target="_blank">W3C</a> com o objetivo de desenvolver um padrão para linguagens de script para os navegadores já que antigamente cada navegador tinha seu próprio modo de manipular os objetos, o que gerava muita incompatibilidade e obrigava os desenvolvedores a escrever uma versão de script para cada navegador.</p>
+  <p>Quando uma página web é carregada o navegador cria o DOM, a árvore de elementos do HTML.</p>
+  <p><img src="../../assets/img/arvore-dom.gif" alt="Imagem demonstrando a árvore de elementos criada"></p>
+  <h3>Entendendo a árvore</h3>
+  <h4>Document</h4>
+  <p>Quando um documento HTML é carregado no navegador da Web, torna-se um objeto de documento. O objeto de documento é o nó raiz do documento HTML e o "dono" de todos os outros nós.</p>
+  <h4>Element</h4>
+  <p>O objeto de elemento representa todas as tags que estão em arquivos HTML ou XML. Os objetos de elemento pode ter nós filhos de nós de texto, além de atributos. </p>
+  <h4>Text</h4>
+  <p>Texto que vai entre os elementos, o conteúdo das tags (&lt;p&gt;este é um texto&lt;/p&gt;).</p>
+  <h4>Attribute</h4>
+  <p>O objeto atributo representa um atributo que pertence sempre a um elemento HTML.</p>
+  <p>Através da estrutura criada, é possível, adicionar, alterar e remover elementos e atributos da árvore DOM utilizando JavaScript.</p>
+  <p>Esta página está em construção. Volte em breve ou <a href="https://github.com/tableless/iniciantes">ajude a completá-la</a>!</p>
+</article>
diff --git a/manual/obasico/oquew3c.html b/manual/obasico/oquew3c.html
new file mode 100644
index 0000000..b8b586d
--- /dev/null
+++ b/manual/obasico/oquew3c.html
@@ -0,0 +1,15 @@
+---
+layout: interna
+title: O que é W3C?
+---
+{% include submenu-obasico.html %}
+
+<article class="content">
+  <h1>O W3C</h1>
+  <h2>Consórcio que regulamenta os padrões para web</h2>
+  <p>Quando Tim Berners-Lee criou a web, o HTML e tudo mais, decidiu que era bom que houvesse um órgão para regulamentar, criar e manter os padrões para web. Esse órgão não teria fins lucrativos. Logo deu-se o nome de <a href="http://www.w3.org/Consortium/">W3C</a>: World Wide Web Consortium.</p>
+
+  <p>O W3C é <a href="http://www.w3.org/Consortium/Member/List">apoiado por várias empresas</a> como a Microsoft, Samsung, Apple, Google, Mozilla e etc... Todas essas empresas ajudam o W3C com um valor anual, ajudando-o a manter suas pesquisas e até mesmo incluindo membros de suas equipes nos grupos de trabalho de cada padrão. Dessa forma há uma ajuda mútua, fazendo com que essas empresas tenham sistemas e dispositivos que suportem cada vez mais os padrões web. Veja <a href="http://www.w3.org/Consortium/Member/List">a lista completa dos membros que apoiam o W3C aqui</a>.</p>
+
+  <p>Deixando claro que o W3C não precisa ser o responsável pela criação de linguagens como o HTML. Você também pode criar uma linguagem e submeter para o W3C e para os Browsers sugerindo que faça parte dos padrões. Isso aconteceu com outras linguagens que se tornaram populares como o Javascript desenvolvido pelo <a href="http://www.ecma-international.org">Ecma</a> e até o HTML5, que foi iniciado por um grupo de desenvolvedores chamado <a href="http://www.whatwg.org/">WhatWG</a>.</p>
+</article>
diff --git a/css/fonts/icomoon.dev.svg b/slide/css/fonts/icomoon.dev.svg
similarity index 100%
rename from css/fonts/icomoon.dev.svg
rename to slide/css/fonts/icomoon.dev.svg
diff --git a/css/fonts/icomoon.eot b/slide/css/fonts/icomoon.eot
similarity index 100%
rename from css/fonts/icomoon.eot
rename to slide/css/fonts/icomoon.eot
diff --git a/css/fonts/icomoon.svg b/slide/css/fonts/icomoon.svg
similarity index 100%
rename from css/fonts/icomoon.svg
rename to slide/css/fonts/icomoon.svg
diff --git a/css/fonts/icomoon.ttf b/slide/css/fonts/icomoon.ttf
similarity index 100%
rename from css/fonts/icomoon.ttf
rename to slide/css/fonts/icomoon.ttf
diff --git a/css/fonts/icomoon.woff b/slide/css/fonts/icomoon.woff
similarity index 100%
rename from css/fonts/icomoon.woff
rename to slide/css/fonts/icomoon.woff
diff --git a/css/fonts/index.html b/slide/css/fonts/index.html
similarity index 100%
rename from css/fonts/index.html
rename to slide/css/fonts/index.html
diff --git a/css/fonts/lte-ie7.js b/slide/css/fonts/lte-ie7.js
similarity index 100%
rename from css/fonts/lte-ie7.js
rename to slide/css/fonts/lte-ie7.js
diff --git a/css/fonts/style.css b/slide/css/fonts/style.css
similarity index 100%
rename from css/fonts/style.css
rename to slide/css/fonts/style.css
diff --git a/css/functional-classes.css b/slide/css/functional-classes.css
similarity index 100%
rename from css/functional-classes.css
rename to slide/css/functional-classes.css
diff --git a/css/gallery-sass/_gallery.scss b/slide/css/gallery-sass/_gallery.scss
similarity index 100%
rename from css/gallery-sass/_gallery.scss
rename to slide/css/gallery-sass/_gallery.scss
diff --git a/css/gallery-sass/_variables.scss b/slide/css/gallery-sass/_variables.scss
similarity index 100%
rename from css/gallery-sass/_variables.scss
rename to slide/css/gallery-sass/_variables.scss
diff --git a/css/gallery-sass/gallery.build.scss b/slide/css/gallery-sass/gallery.build.scss
similarity index 100%
rename from css/gallery-sass/gallery.build.scss
rename to slide/css/gallery-sass/gallery.build.scss
diff --git a/css/gallery-sass/gallery.css b/slide/css/gallery-sass/gallery.css
similarity index 100%
rename from css/gallery-sass/gallery.css
rename to slide/css/gallery-sass/gallery.css
diff --git a/css/gallery-sass/gallery.theme.scss b/slide/css/gallery-sass/gallery.theme.scss
similarity index 100%
rename from css/gallery-sass/gallery.theme.scss
rename to slide/css/gallery-sass/gallery.theme.scss
diff --git a/css/gallery/gallery.build.css b/slide/css/gallery/gallery.build.css
similarity index 100%
rename from css/gallery/gallery.build.css
rename to slide/css/gallery/gallery.build.css
diff --git a/css/gallery/gallery.theme.css b/slide/css/gallery/gallery.theme.css
similarity index 100%
rename from css/gallery/gallery.theme.css
rename to slide/css/gallery/gallery.theme.css
diff --git a/css/normalize.css b/slide/css/normalize.css
similarity index 100%
rename from css/normalize.css
rename to slide/css/normalize.css
diff --git a/css/style.css b/slide/css/style.css
similarity index 100%
rename from css/style.css
rename to slide/css/style.css
diff --git a/img/logo-tableless.png b/slide/img/logo-tableless.png
similarity index 100%
rename from img/logo-tableless.png
rename to slide/img/logo-tableless.png
diff --git a/slide/index.html b/slide/index.html
new file mode 100644
index 0000000..d928c5e
--- /dev/null
+++ b/slide/index.html
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <title>Para iniciantes</title>
+    <meta charset="utf-8">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Informações básicas sobre desenvolvimento front-end para iniciantes.">
+
+    <link href="css/normalize.css" rel="stylesheet">
+    <link href="css/functional-classes.css" rel="stylesheet">
+    <link href="css/fonts/style.css" rel="stylesheet">
+    <link href="css/gallery/gallery.build.css" rel="stylesheet">
+    <link href="css/gallery/gallery.theme.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="gallery items-11">
+      <div id="item-1" class="control-operator"></div>
+      <div id="item-2" class="control-operator"></div>
+      <div id="item-3" class="control-operator"></div>
+      <div id="item-4" class="control-operator"></div>
+      <div id="item-5" class="control-operator"></div>
+      <div id="item-6" class="control-operator"></div>
+      <div id="item-7" class="control-operator"></div>
+      <div id="item-8" class="control-operator"></div>
+      <div id="item-9" class="control-operator"></div>
+      <div id="item-10" class="control-operator"></div>
+      <div id="item-11" class="control-operator"></div>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-code">O que é desenvolvimento front-end?</h1>
+            <h2>Um guia para iniciantes na área</h2>
+            <p class="txtCenter">A ideia é que você, que está começando, tenha o mínimo de informação e saiba por onde começar.</p>
+          </article>
+        </div>
+      </figure>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-earth">O que é o W3C?</h1>
+            <p><a href="http://www.w3.org/">W3C</a> (World Wide Web Consortium) é uma organização sem fins lucrativos criado pelo Tim Berners-Lee (esse cara criou a web!). Diversas empresas como Microsoft, Google, Yahoo!, Samsung, Nokia e <a href="http://www.w3.org/Consortium/Member/List" title="veja a lista de membros">uma pancada de outras</a>, investem dinheiro no W3C para que ele pesquise e desenvolva novas tecnologias para web.</p>
+            <p>O W3C é quem regulamenta e cria padrões de codificação para internet. Se não tiver ninguém para criar, testar, ter novas ideias e etc, isso tudo vira bagunça, por isso o W3C faz esse papel.
+            </p>
+          </article>
+        </div>
+      </figure>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-code">O termo front-end / client-side</h1>
+            <p>Quando codificamos algum site ou serviço para internet, nos referimos a dois tipos de linguagem: a linguagem back-end e a front-end. O dev <strong>back-end</strong> (ou server-side), é o responsável em programar as funcionalidades do site/serviço escrevendo código em linguagens como <strong>PHP</strong>, <strong>Ruby</strong>, <strong>Python</strong>, <strong>Java</strong>, <strong>etc</strong>.</p>
+            <p>O dev <strong>front-end</strong> (ou client-side) é responsável por implementar o design do layout usando códigos de <strong>HTML, CSS e JavaScript</strong>.</p>
+          </article>
+        </div>
+      </figure>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-code">O termo front-end / client-side</h1>
+            <p>Por exemplo: se criarmos um script em linguagem back-end (PHP, Asp, Java, Ruby, etc) que apenas calcula a soma de 2 + 2, será o SERVIDOR (ou back, o server) que calculará este resultado. Se fizermos esse cálculo em alguma linguagem front-end, como o JavaScript, quem calculará essa conta é o BROWSER do usuário. Por isso o termo <strong>client</strong> ou <strong>front</strong>.</p>
+
+            <div class="info">
+              <span class="icon-layers">
+                Cálculo no Servidor
+              </span>
+              <span class="middleEqual">=</span>
+              <span class="icon-console">
+                Back-end ou Server-side
+              </span>
+            </div>
+            <br>
+            <div class="info">
+              <span class="icon-laptop">
+                Cálculo no Browser
+              </span>
+              <span class="middleEqual">=</span>
+              <span class="icon-code">
+                Client-side ou Front-end
+              </span>
+            </div>
+          </article>
+        </div>
+      </figure>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-stack">Desenvolvimento em Camadas</h1>
+            <p class="txtCenter">O desenvolvimento front-end é dividido em 3 camadas independentes:</p>
+            <div class="info">
+              <span class="icon-html5">
+                <p class="txtCenter">Informação <br><strong>HTML</strong></p>
+              </span>
+              <span class="icon-css3">
+                <p class="txtCenter">Formatação <br><strong>CSS</strong></p>
+              </span>
+              <span class="icon-rocket">
+                <p class="txtCenter">Comportamento <br><strong>JS</strong></p>
+              </span>
+            </div>
+            <p class="cBoth txtCenter">
+              Leia <a href="http://tableless.com.br/camadas-de-desenvolvimento-client-side/">mais sobre desenvolvimento em camadas aqui</a>.
+            </p>
+          </article>
+        </div>
+      </figure>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-html5">HTML</h1>
+        <p>O HTML é uma linguagem de marcação. Isso quer dizer que você marca com tags as informações da página. Por exemplo, se eu quiser criar um texto em negrito, eu escrevo algo assim:</p>
+        <p>&lt;strong&gt;<strong>texto em negrito</strong>&lt;/strong&gt;</p>
+        <p>Para saber mais sobre o que é HTML, visite o link: <a href="http://tableless.com.br/o-que-html-basico/">O que é HTML e para que serve?</a></p>
+          </article>
+        </div>
+      </figure>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-css3">CSS</h1>
+            <p>O CSS é uma linguagem de formatação. Ele é responsável por deixar as coisas mais bonitas, com o visual exatamente igual ao layout criado pelo designer. Sua sintaxe é muito simples:</p>
+            <div class="txtLeft" style="width: 500px; margin: 0 auto;">
+              <p class="fLeft" style="margin-right: 100px">
+                <strong>seletor</strong> {<br>
+                  &nbsp;&nbsp;&nbsp;&nbsp;propriedade: valor;
+                <br>}
+              </p>
+              <p class="fLeft">
+                <strong>div</strong> {<br>
+                  &nbsp;&nbsp;&nbsp;&nbsp;background: white;
+                <br>}
+              </p>
+            </div>
+          </article>
+        </div>
+      </figure>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-rocket">JavaScript</h1>
+            <p>JavaScript é uma linguagem de programação front-end, que manipula o CSS e o HTML para que você possa executar comportamentos específicos, como animações, mudanças de valores, inserção de conteúdo e outras tarefas. O JavaScript então cuida do comportamento do seu site.</p>
+            <p>Existem muitos frameworks que facilitam o trabalho com JavaScript, abstraindo o código original por um código mais simples. O <a href="http://jquery.com/">jQuery</a> é um desses frameworks. Ele é o mais utilizado pelo mundo. Por conta da sua facilidade e por causa da sua compatibilidade entre todos os browsers.</p>
+            <p>Mas lembre-se: aprenda pelo menos o básico do JAVASCRIPT antes de aprender qualquer Framework. Só assim você entenderá de fato o código gerado e como os frameworks funcionam.</p>
+          </article>
+        </div>
+      </figure>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-file-xml">Editores de código</h1>
+            <p>Para iniciar, você precisa escolher um editor de código. Para iniciantes, o mais indicado é o Sublime Text. Esse editor também é usado por desenvolvedores experientes por causa da sua simplicidade.<br> <a href="http://www.sublimetext.com/">Baixe o Sublime Text aqui.</a></p>
+            <p>Geralmente há um preconceito contra editores como o Dreamweaver, os chamados WYSIWYG (What You See Is What You Get) por que com o passar do tempo, o desenvolvedor não aprende realmente o HTML e o CSS, utilizando o editor como uma muleta, aprendendo apenas como a ferramenta e não o código propriamente dito.</p>
+          </article>
+        </div>
+      </figure>
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-question">Onde aprender?</h1>
+            <p>Existem vários sites e cursos brasileiros para aprender a desenvolver para web, mas lembre-se, saber inglês é fundamental para o seu aprendizado. Alguns deles:</p>
+            <nav>
+              <h2>Websites e Comunidade</h2>
+              <ul>
+                <li><a href="http://tableless.com.br/">Tableless</a></li>
+                <li><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas na Web</a></li>
+                <li><a href="http://loopinfinito.com.br/">Loop Infinito</a></li>
+                <li><a href="http://maujor.com/">Site do Maujor</a></li>
+                <li><a href="http://simplesideias.com.br/">Simples ideias</a></li>
+                <li><a href="http://imasters.com.br/">iMasters</a></li>
+                <li><a href="http://andrecomws.com/lab/code-standards/">Andrecomws - Padrões de código</a></li>
+                <li><a href="http://braziljs.org/">BrazilJS</a></li>
+              </ul>
+            </nav>
+            <nav>
+              <h2>Cursos livres</h2>
+              <ul>
+                <li><a href="http://campus.tableless.com.br/">Campus Online do Tableless</a></li>
+                <li><a href="http://tableless.com.br/servicos/aula-particular.php">Aula Particular do Tableless</a></li>
+                <li><a href="http://howtocode.com.br/">HowTo</a></li>
+                <li><a href="http://www.caelum.com.br/">Caelum</a></li>
+              </ul>
+            </nav>
+            <nav>
+              <h2>Tutoriais (em inglês)</h2>
+              <ul>
+                <li><a href="http://www.codecademy.com/">Codecademy - Aprenda a programar interativamente</a></li>
+                <li><a href="https://developer.mozilla.org/pt-PT/learn/">Mozilla - Aprenda a fazer sites</a></li>
+                <li><a href="http://http://www.html5rocks.com/en/tutorials/">HTML5 Rocks - Posts & Tutorials</a></li>
+                <li><a href="http://http://movethewebforward.org//">Move the web forward</a></li>
+              </ul>
+            </nav>
+          </article>
+        </div>
+      </figure>
+
+      <figure class="item">
+        <div class="limit">
+          <article>
+            <h1 class="icon-grin">Obrigado!</h1>
+            <p>Esperamos que tenha aprendido a base do desenvolvimento front-end!<br> Agora é mãos à obra!</p>
+            <p>
+              <a href="http://twitter.com/tableless">@tableless</a><br>
+              <a href="http://facebook.com/tablelessbr">facebook/tablelessbr</a><br>
+              <a href="http://google.com/+tableless">+tableless</a><br>
+            </p>
+          </article>
+        </div>
+      </figure>
+
+      <div class="controls">
+        <a href="#item-1" class="control-button">•</a>
+        <a href="#item-2" class="control-button">•</a>
+        <a href="#item-3" class="control-button">•</a>
+        <a href="#item-4" class="control-button">•</a>
+        <a href="#item-5" class="control-button">•</a>
+        <a href="#item-6" class="control-button">•</a>
+        <a href="#item-7" class="control-button">•</a>
+        <a href="#item-8" class="control-button">•</a>
+        <a href="#item-9" class="control-button">•</a>
+        <a href="#item-10" class="control-button">•</a>
+        <a href="#item-11" class="control-button">•</a>
+      </div>
+    </div>
+
+    <a href="http://tableless.com.br/" class="logo-tableles" title="Tableless - Tentando ajudar a todos"><img src="img/logo-tableless.png"></a>
+
+    <a href="https://github.com/tableless/iniciantes" class="lnk-fork"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+
+    <script src="js/script.js"></script>
+
+    <script type="text/javascript">
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-335027-1']);
+      _gaq.push(['_setDomainName', 'tableless.com.br']);
+      var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
+      _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
+      _gaq.push(['_trackPageview']);
+    </script>
+  </body>
+</html>
diff --git a/js/script.js b/slide/js/script.js
similarity index 100%
rename from js/script.js
rename to slide/js/script.js
diff --git a/layout/layout-base.ai b/slide/layout/layout-base.ai
similarity index 100%
rename from layout/layout-base.ai
rename to slide/layout/layout-base.ai