hugo/themes/gohugoioTheme/layouts/shortcodes/code-toggle.html
Bjørn Erik Pedersen ed8bf081fd Squashed 'docs/' changes from 3068989b9..d9c8fc220
d9c8fc220 Rebuild Chroma CSS
a9168b106 Adds missing word
ebaa172af Remove note about enabling custom GitLab domains
2ef3918b2 Add code toggler
41878b6ca Clarify the use of .GetPage with page bundles
ffcb26270 Fix broken link for configuration.md
1e72e2b3e Fixed typo in heading - Hightlighter
72b2db77c Change "on the form" to "of the form"
e15e6966f Fix example GitHub url

git-subtree-dir: docs
git-subtree-split: d9c8fc220710fe2bdcc2c61afd9e40e7233953cf
2018-04-02 08:53:34 +02:00

24 lines
1.2 KiB
HTML

{{ $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>