Add new render-codeblock example with some extra zen styles.

assets/sass/_zen.scss

@@ -133,3 +133,47 @@ article {
 .search-text {
   font-size: var(--fs-l);
 }
+
+// Copy code
+
+[data-codeblock] {
+  position: relative;
+
+  & > pre {
+    padding-block-start: 1lh;
+  }
+}
+
+.codebutton {
+  position: absolute;
+  inset-inline-end: .2rem;
+  background: unset;
+  border: unset;
+  text-shadow: unset;
+  font-size: var(--fs-l);
+  color: var(--color-border);
+  rotate: 90deg;
+  cursor: pointer;
+
+  & > span {
+    pointer-events: none;
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:active {
+    scale: 1.15;
+  }
+}
+
+.flash-item {
+  animation: flash 500ms ease-in-out 1;
+}
+
+@keyframes flash {
+  50% {
+    border-color: var(--color-warning);
+    background-color: var(--color-warning-bg);
+  }
+}
+

i18n/ar.toml

@@ -117,3 +117,6 @@ other = "Decline tracking"
 
 [privacy_policy]
 other = "Privacy policy"
+
+[copy_code]
+other = "Copy code"

i18n/da.toml

@@ -114,3 +114,6 @@ other = "Afvis tracking"
 
 [privacy_policy]
 other = "Privat politik"
+
+[copy_code]
+other = "Copy code"

i18n/de.toml

@@ -114,3 +114,6 @@ other = "Tracking ablehnen"
 
 [privacy_policy]
 other = "Datenschutzrichtlinie"
+
+[copy_code]
+other = "Copy code"

i18n/en.toml

@@ -114,3 +114,6 @@ other = "Only necessary"
 
 [privacy_policy]
 other = "Privacy policy"
+
+[copy_code]
+other = "Copy code"

i18n/es.toml

@@ -115,3 +115,6 @@ other = "Solo las necesarias"
 
 [privacy_policy]
 other = "Política de privacidad"
+
+[copy_code]
+other = "Copy code"

i18n/fi.toml

@@ -114,3 +114,6 @@ other = "Hylkää seuranta"
 
 [privacy_policy]
 other = "Yksityisyyskäytäntö"
+
+[copy_code]
+other = "Copy code"

i18n/fr.toml

@@ -114,3 +114,6 @@ other = "Decline tracking"
 
 [privacy_policy]
 other = "Privacy policy"
+
+[copy_code]
+other = "Copy code"

i18n/he.toml

@@ -115,3 +115,5 @@ other = "Decline tracking"
 [privacy_policy]
 other = "Privacy policy"
 
+[copy_code]
+other = "Copy code"

i18n/id.toml

@@ -114,3 +114,6 @@ other = "Decline tracking"
 
 [privacy_policy]
 other = "Privacy policy"
+
+[copy_code]
+other = "Copy code"

i18n/nb.toml

@@ -114,3 +114,6 @@ other = "Decline tracking"
 
 [privacy_policy]
 other = "Privacy policy"
+
+[copy_code]
+other = "Copy code"

i18n/pt.toml

@@ -115,3 +115,6 @@ other = "Decline tracking"
 
 [privacy_policy]
 other = "Privacy policy"
+
+[copy_code]
+other = "Copy code"

i18n/sr.toml

@@ -114,3 +114,6 @@ other = "Само неопходне"
 
 [privacy_policy]
 other = "Правила о приватности"
+
+[copy_code]
+other = "Copy code"

i18n/sv.toml

@@ -114,3 +114,6 @@ other = "Bara nödvändiga"
 
 [privacy_policy]
 other = "Personuppgiftsbehandling"
+
+[copy_code]
+other = "Kopiera kod"

i18n/sw.toml

@@ -114,3 +114,6 @@ other = "Ni muhimu tu"
 
 [privacy_policy]
 other = "Sera ya faragha"
+
+[copy_code]
+other = "Copy code"

i18n/zh-cn.toml

@@ -114,3 +114,6 @@ other = "只允许必要的"
 
 [privacy_policy]
 other = "隐私政策"
+
+[copy_code]
+other = "Copy code"

layouts/_markup/example-render-codeblock.html

@@ -0,0 +1,14 @@
+{{ $result := transform.HighlightCodeBlock . -}}
+<div data-codeblock itemscope itemtype="https://schema.org/SoftwareSourceCode" {{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
+<button data-codebutton class="codebutton" title="{{ i18n "copy_code" }}"><span>⧉</span></button>
+<meta itemprop="codeSampleType" content="snippet">
+<meta data-codetext itemprop="text" content="{{ .Inner | jsonify }}">
+{{ if .Type -}}
+<meta itemprop="programmingLanguage" content="{{ .Type }}">
+<pre tabindex="0" class="chroma">
+<code class="language-{{ .Type }}" data-lang="{{ .Type }}">{{ $result.Inner }}</code>
+</pre>
+{{ else -}}
+{{ $result.Wrapped }}
+{{ end -}}
+</div>