Merge commit 'ed8bf081fdbf336e026517b7e1b123c039014ab5'

18 files changed, 311 insertions, 98 deletions

diff --git a/docs/config.toml b/docs/config.toml
index 74b10fce0..842b3df0a 100644
--- a/docs/config.toml
+++ b/docs/config.toml
@@ -22,8 +22,7 @@ pygmentsCodeFences = true
 
 pygmentsOptions = ""
 # Use the Chroma stylesheet
-# TODO(bep) build new CSS when we have picked a new style.
-pygmentsUseClasses = false
+pygmentsUseClasses = true
 pygmentsUseClassic = false
 
 # See https://help.farbox.com/pygments.html
diff --git a/docs/content/content-management/page-bundles.md b/docs/content/content-management/page-bundles.md
index f497a59b2..09aeae8ea 100644
--- a/docs/content/content-management/page-bundles.md
+++ b/docs/content/content-management/page-bundles.md
@@ -103,6 +103,20 @@ But you can get it by `.Site.GetPage`. Here is an example:
 {{ end }}
 ```
 
+_In this example, we are assuming the `some-headless-bundle` to be a headless
+   bundle containing one or more **page** resources whose `.Name` matches
+   `"author*"`._
+
+Explanation of the above example:
+
+1. Get the `some-headless-bundle` Page "object".
+2. Collect a *slice* of resources in this *Page Bundle* that matches
+   `"author*"` using `.Resources.Match`.
+3. Loop through that *slice* of nested pages, and output their `.Title` and
+   `.Content`.
+
+---
+
 A leaf bundle can be made headless by adding below in the Front Matter
 (in the `index.md`):
 
diff --git a/docs/content/content-management/syntax-highlighting.md b/docs/content/content-management/syntax-highlighting.md
index ffb430bdb..67d443fd4 100644
--- a/docs/content/content-management/syntax-highlighting.md
+++ b/docs/content/content-management/syntax-highlighting.md
@@ -62,7 +62,7 @@ func GetTitleFunc(style string) func(s string) string {
 {{< / highlight >}}
 
 
-## Configure Syntax Hightlighter
+## Configure Syntax Highlighter
 To make the transition from Pygments to Chroma seamless, they share a common set of configuration options:
 
 pygmentsOptions
diff --git a/docs/content/functions/GetPage.md b/docs/content/functions/GetPage.md
index 669589c15..1a8a51c13 100644
--- a/docs/content/functions/GetPage.md
+++ b/docs/content/functions/GetPage.md
@@ -10,7 +10,7 @@ menu:
   docs:
     parent: "functions"
 keywords: [sections,lists,indexes]
-signature: [".GetPage TYPE PATH"]
+signature: [".GetPage KIND PATH"]
 workson: []
 hugoversion:
 relatedfuncs: []
@@ -18,30 +18,34 @@ deprecated: false
 aliases: []
 ---
 
-Every `Page` has a `Kind` attribute that shows what kind of page it is. While this attribute can be used to list pages of a certain `kind` using `where`, often it can be useful to fetch a single page by its path.
+Every `Page` has a [`Kind` attribute][page_kinds] that shows what kind of page it is. While this attribute can be used to list pages of a certain `kind` using `where`, often it can be useful to fetch a single page by its path.
 
-`.GetPage` looks up a page of a given `Kind` and `path`.
+`.GetPage` returns a page of a given `Kind` and `path`.
+
+{{% note %}}
+If the `path` is `"foo/bar.md"`, it can be written as exactly that, or broken up
+into multiple strings as `"foo" "bar.md"`.
+{{% /note %}}
 
 ```
 {{ with .Site.GetPage "section" "blog" }}{{ .Title }}{{ end }}
 ```
 
-This method wil return `nil` when no page could be found, so the above will not print anything if the blog section isn't found.
+This method wil return `nil` when no page could be found, so the above will not print anything if the blog section is not found.
 
-For a regular page:
+For a regular page (whose `Kind` is `page`):
 
 ```
-{{ with .Site.GetPage "page" "blog" "my-post.md" }}{{ .Title }}{{ end }}
+{{ with .Site.GetPage "page" "blog/my-post.md" }}{{ .Title }}{{ end }}
 ```
 
-Note that the path can also be supplied like this:
+Note that the `path` can also be supplied like this, where the slash-separated
+path elements are added as separate strings:
 
 ```
-{{ with .Site.GetPage "page" "blog/my-post.md" }}{{ .Title }}{{ end }}
+{{ with .Site.GetPage "page" "blog" "my-post.md" }}{{ .Title }}{{ end }}
 ```
 
-The valid page kinds are: *page, home, section, taxonomy and taxonomyTerm.*
-
 ## `.GetPage` Example
 
 This code snippet---in the form of a [partial template][partials]---allows you to do the following:
@@ -53,13 +57,26 @@ This code snippet---in the form of a [partial template][partials]---allows you t
 
 {{< code file="grab-top-two-tags.html" >}}
 <ul class="most-popular-tags">
-{{ $t := $.Site.GetPage "taxonomyTerm" "tags" }}
+{{ $t := .Site.GetPage "taxonomyTerm" "tags" }}
 {{ range first 2 $t.Data.Terms.ByCount }}
-    <li>{{.}}</li>
+    <li>{{ . }}</li>
 {{ end }}
 </ul>
 {{< /code >}}
 
+## `.GetPage` on Page Bundles
+
+If the page retrieved by `.GetPage` is a [Leaf Bundle][leaf_bundle], and you
+need to get the nested _**page** resources_ in that, you will need to use the
+methods in `.Resources` as explained in the [Page Resources][page_resources]
+section.
+
+See the [Headless Bundle][headless_bundle] documentation for an example.
+
 
 [partials]: /templates/partials/
 [taxonomy]: /content-management/taxonomies/
+[page_kinds]: /templates/section-templates/#page-kinds
+[leaf_bundle]: /content-management/page-bundles/#leaf-bundles
+[headless_bundle]: /content-management/page-bundles/#headless-bundle
+[page_resources]: /content-management/page-resources/
diff --git a/docs/content/getting-started/code-toggle.md b/docs/content/getting-started/code-toggle.md
new file mode 100644
index 000000000..ae3e3e84b
--- /dev/null
+++ b/docs/content/getting-started/code-toggle.md
@@ -0,0 +1,75 @@
+---
+title: Code Toggle
+description: Code Toggle tryout and showcase.
+date: 2018-03-16
+categories: [getting started,fundamentals]
+keywords: [configuration,toml,yaml,json]
+weight: 60
+sections_weight: 60
+draft: false
+toc: true
+---
+
+## The Config Toggler!
+
+This is an exemple for the Config Toggle shortcode. 
+Its purpose is to let users choose a Config language by clicking on its corresponding tab. Upon doing so, every Code toggler on the page will be switched to the target language. Also, target language will be saved in user's `localStorage` so when they go to a different pages, Code Toggler display their last "toggled" config language.
+
+## That Congig Toggler
+
+{{< code-toggle file="config">}}
+
+baseURL: "https://yoursite.example.com/"
+title: "My Hugo Site"
+footnoteReturnLinkContents: "↩"
+permalinks:
+  post: /:year/:month/:title/
+params:
+  Subtitle: "Hugo is Absurdly Fast!"
+  AuthorName: "Jon Doe"
+  GitHubUser: "spf13"
+  ListOfFoo:
+    - "foo1"
+    - "foo2"
+  SidebarRecentLimit: 5
+{{< /code-toggle >}}
+
+## Another Config Toggler!
+
+{{< code-toggle file="theme">}}
+
+# theme.toml template for a Hugo theme
+
+name = "Hugo Theme"
+license = "MIT"
+licenselink = "https://github.com/budparr/gohugo.io/blob/master/LICENSE.md"
+description = ""
+homepage = "https://github.com/budparr/gohugo.io"
+tags = ["website"]
+features = ["", ""]
+min_version = 0.18
+
+[author]
+  name = "Bud Parr"
+  homepage = "https://github.com/budparr"
+
+{{< /code-toggle >}}
+
+## Two regular code blocks
+
+{{< code file="bf-config.toml" >}}
+[blackfriday]
+  angledQuotes = true
+  fractions = false
+  plainIDAnchors = true
+  extensions = ["hardLineBreak"]
+{{< /code >}}
+
+{{< code file="bf-config.yml" >}}
+blackfriday:
+  angledQuotes: true
+  fractions: false
+  plainIDAnchors: true
+  extensions:
+    - hardLineBreak
+{{< /code >}}
\ No newline at end of file
diff --git a/docs/content/getting-started/configuration.md b/docs/content/getting-started/configuration.md
index 292b3e68b..ba2c87e82 100644
--- a/docs/content/getting-started/configuration.md
+++ b/docs/content/getting-started/configuration.md
@@ -202,7 +202,7 @@ summaryLength (70)
 : The length of text to show in a [`.Summary`](/content-management/summaries/#hugo-defined-automatic-summary-splitting).
 
 taxonomies
-: See [Configure Taxonomies](content-management/taxonomies#configure-taxonomies).
+: See [Configure Taxonomies](/content-management/taxonomies#configure-taxonomies).
 
 theme ("")
 : Theme to use (located by default in `/themes/THEMENAME/`).
@@ -214,7 +214,7 @@ title ("")
 : Site title.
 
 uglyURLs (false)
-: When enabled, creates URL on the form `/filename.html` instead of `/filename/`.
+: When enabled, creates URL of the form `/filename.html` instead of `/filename/`.
 
 verbose (false)
 : Enable verbose output.
@@ -249,8 +249,25 @@ Similar to the template [lookup order][], Hugo has a default set of rules for se
 
 In your `config` file, you can direct Hugo as to how you want your website rendered, control your website's menus, and arbitrarily define site-wide parameters specific to your project.
 
+
 ## YAML Configuration
 
+{{< code file="config.yml">}}
+baseURL: "https://yoursite.example.com/"
+title: "My Hugo Site"
+footnoteReturnLinkContents: "↩"
+permalinks:
+  post: /:year/:month/:title/
+params:
+  Subtitle: "Hugo is Absurdly Fast!"
+  AuthorName: "Jon Doe"
+  GitHubUser: "spf13"
+  ListOfFoo:
+    - "foo1"
+    - "foo2"
+  SidebarRecentLimit: 5
+{{< /code >}}
+
 The following is a typical example of a YAML configuration file. The values nested under `params:` will populate the [`.Site.Params`][] variable for use in [templates][]:
 
 {{< code file="config.yml">}}
diff --git a/docs/content/hosting-and-deployment/hosting-on-gitlab.md b/docs/content/hosting-and-deployment/hosting-on-gitlab.md
index 9c4a8978a..c38908cae 100644
--- a/docs/content/hosting-and-deployment/hosting-on-gitlab.md
+++ b/docs/content/hosting-and-deployment/hosting-on-gitlab.md
@@ -20,14 +20,6 @@ wip: false
 aliases: [/tutorials/hosting-on-gitlab/]
 ---
 
-{{% warning %}}
-GitLab has temporarily turned off custom domains support because of a security issue. The plan is to re-enable it after the 20th of February.
-For more information:
-https://about.gitlab.com/2018/02/05/gitlab-pages-custom-domain-validation/
-{{% /warning %}}
-
-{{< todo >}}Remove the above when fixed.{{< /todo >}}
-
 [GitLab](https://gitlab.com/) makes it incredibly easy to build, deploy, and host your Hugo website via their free GitLab Pages service, which provides [native support for Hugo, as well as numerous other static site generators](https://gitlab.com/pages/hugo).
 
 ## Assumptions
diff --git a/docs/content/templates/data-templates.md b/docs/content/templates/data-templates.md
index 385bd10a8..c0b2b5145 100644
--- a/docs/content/templates/data-templates.md
+++ b/docs/content/templates/data-templates.md
@@ -118,7 +118,7 @@ Note the use of the [`markdownify` template function][markdownify]. This will se
 
 ## Data-Driven Content
 
-In addition to the [data files](/extras/datafiles/) feature, Hugo also a "data-driven content" feature, which lets you load any [JSON](http://www.json.org/) or [CSV](http://en.wikipedia.org/wiki/Comma-separated_values) file from nearly any resource.
+In addition to the [data files](/extras/datafiles/) feature, Hugo also has a "data-driven content" feature, which lets you load any [JSON](http://www.json.org/) or [CSV](http://en.wikipedia.org/wiki/Comma-separated_values) file from nearly any resource.
 
 Data-driven content currently consists of two functions, `getJSON` and `getCSV`, which are available in all template files.
 
diff --git a/docs/content/troubleshooting/build-performance.md b/docs/content/troubleshooting/build-performance.md
index fa8929c73..bc4d30d54 100644
--- a/docs/content/troubleshooting/build-performance.md
+++ b/docs/content/troubleshooting/build-performance.md
@@ -17,7 +17,7 @@ toc: true
 ---
 
 {{% note %}}
-The example site used below is from https://github.com/gohugoio/hugo/examples/blog
+The example site used below is from https://github.com/gohugoio/hugo/tree/master/examples/blog
 {{% /note %}}
 
 ## Template Metrics
diff --git a/docs/themes/gohugoioTheme/layouts/shortcodes/code-toggle.html b/docs/themes/gohugoioTheme/layouts/shortcodes/code-toggle.html
new file mode 100644
index 000000000..c695a7aae
--- /dev/null
+++ b/docs/themes/gohugoioTheme/layouts/shortcodes/code-toggle.html
@@ -0,0 +1,24 @@
+{{ $langs := (slice "yaml" "toml" "json") }}
+<div class="code relative" {{ with .Get "file" }}id="{{ . | urlize}}"{{ end }}>
+	<div class="code-nav flex flex-nowrap items-stretch">
+		{{- with .Get "file" -}}
+			<div class="san-serif f6 dib lh-solid pl2 pv2 mr2">{{ . }}.</div>
+		{{- end -}}
+		{{ range $langs }}
+			<button data-toggle-tab="{{ . }}" class="tab-button {{ cond (eq . "yaml") "active" ""}} ba san-serif f6 dib lh-solid ph2 pv2">{{ . }}</button>&nbsp;
+		{{ end }}
+	</div>
+	<div class="tab-content">
+		{{ range $langs }}
+			<div data-pane="{{ . }}" class="code-copy-content nt3 tab-pane {{ cond (eq . "yaml") "active" ""}}">
+				{{ highlight ($.Inner | transform.Remarshal . | safeHTML) . ""}}
+			</div>
+			{{ if ne ($.Get "copy") "false" }}
+				<button class="needs-js copy copy-toggle bg-accent-color-dark f6 absolute top-0 right-0 lh-solid hover-bg-primary-color-dark bn white ph3 pv2" title="Copy this code to your clipboard." data-clipboard-action="copy" aria-label="copy button">
+				</button>
+				{{/* Functionality located within filesaver.js The copy here is located in the css with .copy class so it can be replaced with JS on success */}}
+			{{end}}
+		{{ end }}
+	</div>
+
+</div>
diff --git a/docs/themes/gohugoioTheme/src/css/_chroma.css b/docs/themes/gohugoioTheme/src/css/_chroma.css
index b15e07558..d00ea65e6 100644
--- a/docs/themes/gohugoioTheme/src/css/_chroma.css
+++ b/docs/themes/gohugoioTheme/src/css/_chroma.css
@@ -1,67 +1,65 @@
-/* Background */ .chroma { background-color: #f0f0f0 }
-/* Error */ .chroma .err {  }
-/* LineTableTD */ .chroma .lntd { ; vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { ; border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% }
-/* LineNumbersTable */ .chroma .lnt { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; }
-/* LineNumbers */ .chroma .ln { ; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* Keyword */ .chroma .k { color: #007020; font-weight: bold }
-/* KeywordConstant */ .chroma .kc { color: #007020; font-weight: bold }
-/* KeywordDeclaration */ .chroma .kd { color: #007020; font-weight: bold }
-/* KeywordNamespace */ .chroma .kn { color: #007020; font-weight: bold }
-/* KeywordPseudo */ .chroma .kp { color: #007020 }
-/* KeywordReserved */ .chroma .kr { color: #007020; font-weight: bold }
-/* KeywordType */ .chroma .kt { color: #902000 }
-/* NameAttribute */ .chroma .na { color: #4070a0 }
-/* NameBuiltin */ .chroma .nb { color: #007020 }
-/* NameClass */ .chroma .nc { color: #0e84b5; font-weight: bold }
-/* NameConstant */ .chroma .no { color: #60add5 }
-/* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold }
-/* NameEntity */ .chroma .ni { color: #d55537; font-weight: bold }
-/* NameException */ .chroma .ne { color: #007020 }
-/* NameFunction */ .chroma .nf { color: #06287e }
-/* NameLabel */ .chroma .nl { color: #002070; font-weight: bold }
-/* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold }
-/* NameTag */ .chroma .nt { color: #062873; font-weight: bold }
-/* NameVariable */ .chroma .nv { color: #bb60d5 }
-/* LiteralString */ .chroma .s { color: #4070a0 }
-/* LiteralStringAffix */ .chroma .sa { color: #4070a0 }
-/* LiteralStringBacktick */ .chroma .sb { color: #4070a0 }
-/* LiteralStringChar */ .chroma .sc { color: #4070a0 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0 }
-/* LiteralStringDoc */ .chroma .sd { color: #4070a0; font-style: italic }
-/* LiteralStringDouble */ .chroma .s2 { color: #4070a0 }
-/* LiteralStringEscape */ .chroma .se { color: #4070a0; font-weight: bold }
-/* LiteralStringHeredoc */ .chroma .sh { color: #4070a0 }
-/* LiteralStringInterpol */ .chroma .si { color: #70a0d0; font-style: italic }
-/* LiteralStringOther */ .chroma .sx { color: #c65d09 }
-/* LiteralStringRegex */ .chroma .sr { color: #235388 }
-/* LiteralStringSingle */ .chroma .s1 { color: #4070a0 }
-/* LiteralStringSymbol */ .chroma .ss { color: #517918 }
-/* LiteralNumber */ .chroma .m { color: #40a070 }
-/* LiteralNumberBin */ .chroma .mb { color: #40a070 }
-/* LiteralNumberFloat */ .chroma .mf { color: #40a070 }
-/* LiteralNumberHex */ .chroma .mh { color: #40a070 }
-/* LiteralNumberInteger */ .chroma .mi { color: #40a070 }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #40a070 }
-/* LiteralNumberOct */ .chroma .mo { color: #40a070 }
-/* Operator */ .chroma .o { color: #666666 }
-/* OperatorWord */ .chroma .ow { color: #007020; font-weight: bold }
-/* Comment */ .chroma .c { color: #60a0b0; font-style: italic }
-/* CommentHashbang */ .chroma .ch { color: #60a0b0; font-style: italic }
-/* CommentMultiline */ .chroma .cm { color: #60a0b0; font-style: italic }
-/* CommentSingle */ .chroma .c1 { color: #60a0b0; font-style: italic }
-/* CommentSpecial */ .chroma .cs { color: #60a0b0; background-color: #fff0f0 }
-/* CommentPreproc */ .chroma .cp { color: #007020 }
-/* CommentPreprocFile */ .chroma .cpf { color: #007020 }
-/* GenericDeleted */ .chroma .gd { color: #a00000 }
+/* Background */ .chroma { background-color: #ffffff }
+/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* Keyword */ .chroma .k { font-weight: bold }
+/* KeywordConstant */ .chroma .kc { font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { font-weight: bold }
+/* KeywordReserved */ .chroma .kr { font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
+/* NameAttribute */ .chroma .na { color: #008080 }
+/* NameBuiltin */ .chroma .nb { color: #999999 }
+/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #008080 }
+/* NameEntity */ .chroma .ni { color: #800080 }
+/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #555555 }
+/* NameTag */ .chroma .nt { color: #000080 }
+/* NameVariable */ .chroma .nv { color: #008080 }
+/* LiteralString */ .chroma .s { color: #bb8844 }
+/* LiteralStringAffix */ .chroma .sa { color: #bb8844 }
+/* LiteralStringBacktick */ .chroma .sb { color: #bb8844 }
+/* LiteralStringChar */ .chroma .sc { color: #bb8844 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #bb8844 }
+/* LiteralStringDoc */ .chroma .sd { color: #bb8844 }
+/* LiteralStringDouble */ .chroma .s2 { color: #bb8844 }
+/* LiteralStringEscape */ .chroma .se { color: #bb8844 }
+/* LiteralStringHeredoc */ .chroma .sh { color: #bb8844 }
+/* LiteralStringInterpol */ .chroma .si { color: #bb8844 }
+/* LiteralStringOther */ .chroma .sx { color: #bb8844 }
+/* LiteralStringRegex */ .chroma .sr { color: #808000 }
+/* LiteralStringSingle */ .chroma .s1 { color: #bb8844 }
+/* LiteralStringSymbol */ .chroma .ss { color: #bb8844 }
+/* LiteralNumber */ .chroma .m { color: #009999 }
+/* LiteralNumberBin */ .chroma .mb { color: #009999 }
+/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
+/* LiteralNumberHex */ .chroma .mh { color: #009999 }
+/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
+/* LiteralNumberOct */ .chroma .mo { color: #009999 }
+/* Operator */ .chroma .o { font-weight: bold }
+/* OperatorWord */ .chroma .ow { font-weight: bold }
+/* Comment */ .chroma .c { color: #999988; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold }
+/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold }
+/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
 /* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr { color: #ff0000 }
-/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
-/* GenericInserted */ .chroma .gi { color: #00a000 }
+/* GenericError */ .chroma .gr { color: #aa0000 }
+/* GenericHeading */ .chroma .gh { color: #999999 }
+/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
 /* GenericOutput */ .chroma .go { color: #888888 }
-/* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold }
+/* GenericPrompt */ .chroma .gp { color: #555555 }
 /* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
-/* GenericTraceback */ .chroma .gt { color: #0044dd }
+/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
+/* GenericTraceback */ .chroma .gt { color: #aa0000 }
 /* TextWhitespace */ .chroma .w { color: #bbbbbb }
diff --git a/docs/themes/gohugoioTheme/src/css/_tabs.css b/docs/themes/gohugoioTheme/src/css/_tabs.css
new file mode 100644
index 000000000..4ed15b63d
--- /dev/null
+++ b/docs/themes/gohugoioTheme/src/css/_tabs.css
@@ -0,0 +1,30 @@
+.tab-button{
+	margin-bottom:1px;
+	position: relative;
+	z-index: 1;
+	color:#333;
+	border-color:#ccc;
+	outline: none;
+	background-color:white;
+}
+.tab-pane .chroma{
+	background:none;
+	padding:0;
+}
+.tab-button.active{
+	border-bottom-color:#f3f4f4;
+	background-color: #f4f4f4;
+}
+.tab-content .tab-pane{
+	display: none;
+}
+.tab-content .tab-pane.active{
+	display: block;
+}
+/* Treatment of copy buttons inside a tab module */ 
+.tab-content .copy, .tab-content .copied{
+	display: none;
+}
+.tab-content .tab-pane.active + .copy, .tab-content .tab-pane.active + .copied{
+	display: block;
+}
\ No newline at end of file
diff --git a/docs/themes/gohugoioTheme/src/css/main.css b/docs/themes/gohugoioTheme/src/css/main.css
index db474cdfb..a3ad83a0a 100755
--- a/docs/themes/gohugoioTheme/src/css/main.css
+++ b/docs/themes/gohugoioTheme/src/css/main.css
@@ -13,6 +13,7 @@
 @import '_algolia';
 @import '_carousel';
 @import '_code';
+@import '_tabs';
 @import '_color-scheme';
 @import '_columns';
 @import '_content';
diff --git a/docs/themes/gohugoioTheme/src/js/clipboardjs.js b/docs/themes/gohugoioTheme/src/js/clipboardjs.js
index f10f07c81..ffae31c7f 100644
--- a/docs/themes/gohugoioTheme/src/js/clipboardjs.js
+++ b/docs/themes/gohugoioTheme/src/js/clipboardjs.js
@@ -1,6 +1,9 @@
 var Clipboard = require('clipboard/dist/clipboard.js');
 new Clipboard('.copy', {
   target: function(trigger) {
+    if(trigger.classList.contains('copy-toggle')){
+      return trigger.previousElementSibling;
+    }
     return trigger.nextElementSibling;
   }
   }).on('success', function(e) {
diff --git a/docs/themes/gohugoioTheme/src/js/main.js b/docs/themes/gohugoioTheme/src/js/main.js
index 4ed818478..b6ae53f3c 100755
--- a/docs/themes/gohugoioTheme/src/js/main.js
+++ b/docs/themes/gohugoioTheme/src/js/main.js
@@ -8,7 +8,7 @@ import './lazysizes.js'
 import './menutoggle.js'
 import './scrolldir.js'
 import './smoothscroll.js'
-
+import './tabs.js'
 import './nojs.js'
 
 
diff --git a/docs/themes/gohugoioTheme/src/js/tabs.js b/docs/themes/gohugoioTheme/src/js/tabs.js
new file mode 100644
index 000000000..dd90fdfa4
--- /dev/null
+++ b/docs/themes/gohugoioTheme/src/js/tabs.js
@@ -0,0 +1,43 @@
+/**
+ * Scripts which manages Code Toggle tabs.
+ */
+var i;
+// store tabs variable
+var allTabs = document.querySelectorAll("[data-toggle-tab]");
+var allPanes = document.querySelectorAll("[data-pane]");
+
+function toggleTabs(event) {
+
+	if(event.target){
+		event.preventDefault();
+		var clickedTab = event.currentTarget;
+		var targetKey = clickedTab.getAttribute("data-toggle-tab")
+	}else {
+		var targetKey = event
+	}
+	// We store the config language selected in users' localStorage
+	if(window.localStorage){
+		window.localStorage.setItem("configLangPref", targetKey)
+	}
+	var selectedTabs = document.querySelectorAll("[data-toggle-tab='" + targetKey + "']");
+	var selectedPanes = document.querySelectorAll("[data-pane='" + targetKey + "']");
+
+	for (var i = 0; i < allTabs.length; i++) {
+		allTabs[i].classList.remove("active");
+		allPanes[i].classList.remove("active");
+	}
+
+	for (var i = 0; i < selectedTabs.length; i++) {
+		selectedTabs[i].classList.add("active");
+		selectedPanes[i].classList.add("active");
+	}
+
+}
+
+for (i = 0; i < allTabs.length; i++) {
+	allTabs[i].addEventListener("click", toggleTabs)
+}
+// Upon page load, if user has a prefered language in its localStorage, tabs are set to it.
+if(window.localStorage.getItem('configLangPref')) {
+	toggleTabs(window.localStorage.g