feat: use Hugo's code block render hook to implement code copy button

Now it can have i18n support
2022-06-12 11:31:32 +00:00
parent abf0c773aa
commit de08e29b00
3 changed files with 50 additions and 33 deletions
@@ -0,0 +1,20 @@
+{{- $class := .Attributes.class | default ""    -}}
+{{- $lang  := .Attributes.lang  | default .Type -}}
+<div class="codeblock">
+    <header>
+        <span class="codeblock-lang">{{ $lang }}</span>
+        <button 
+            class="codeblock-copy"
+            data-id="codeblock-id-{{ .Ordinal }}"
+            data-copied-text="Copied!"
+        >
+            Copy
+        </button>
+    </header>
+    <code id="codeblock-id-{{ .Ordinal }}" style="display:none;">{{- .Inner -}}</code>
+    {{- if transform.CanHighlight $lang -}}
+    <div class="{{ $class }}">{{- highlight .Inner $lang -}}</div>
+    {{- else -}}
+    <pre><code class="{{ $class }}">{{- .Inner -}}</code></pre>
+    {{- end -}}
+</div>