centersl/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-03-27 14:28:47 +07:00
Code Issues Packages Projects Releases Wiki Activity

ux: update code block styling (#22761)

Browse Source 
![export](https://github.com/user-attachments/assets/9a9df60b-22db-42b9-9b5d-3d2c7812bb0e)
This commit is contained in:
Arthur
2025-06-04 15:38:11 +02:00
committed by GitHub
parent 28e68f6af7
commit 6a940f3b2a
4 changed files with 77 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
layouts/_default/_markup/render-codeblock.html
View File

@@ -1,33 +1,47 @@
<div data-pagefind-ignore class="scroll-mt-2" x-data x-ref="root">
<div
data-pagefind-ignore
x-data
x-ref="root"
class="group mt-2 mb-4 flex w-full scroll-mt-2 flex-col items-start gap-4 rounded bg-gray-50 p-2 outline outline-1 outline-offset-[-1px] outline-gray-200 dark:bg-gray-900 dark:outline-gray-800"
>
{{ with .Attributes.title }}
<div
class="mb-0 rounded-sm bg-gray-100 p-2 text-sm text-gray-900 dark:bg-gray-900 dark:text-gray-200"
>
{{ . }}
<div class="flex w-full items-center gap-2">
<div
class="flex items-center gap-2.5 rounded bg-gray-100 px-2 py-0.5 dark:bg-gray-800"
>
<div class="font-normal text-gray-500 dark:text-gray-200">
{{ . }}
</div>
</div>
</div>
{{ end }}
<div class="group relative">
<!-- copy button -->
<button
x-data="{ code: '{{ encoding.Base64Encode .Inner }}', copying: false }"
class="absolute top-3 right-3 z-10 text-gray-200 dark:text-gray-500"
title="copy"
@click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^[\$>]\s+/gm, ''));
copying = true;
setTimeout(() => copying = false, 2000);"
>
<span :class="{ 'group-hover:block' : !copying }" class="icon-svg hidden"
>{{ partialCached "icon" "content_copy" "content_copy" }}</span
>
<span :class="{ 'group-hover:block' : copying }" class="icon-svg hidden"
>{{ partialCached "icon" "check_circle" "check_circle" }}</span
>
</button>
<div class="relative w-full">
{{ $lang := .Type | default "text" }}
{{ $result := transform.Highlight .Inner
$lang .Options
}}
<div class="syntax-light dark:syntax-dark not-prose">
<div class="syntax-light dark:syntax-dark not-prose w-full">
<button
x-data="{ code: '{{ encoding.Base64Encode .Inner }}', copying: false }"
class="{{ if .Attributes.title }}
-top-10
{{ else }}
top-1
{{ end }} absolute right-2 z-10 text-gray-300 dark:text-gray-500"
title="copy"
@click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^[\$>]\s+/gm, ''));
copying = true;
setTimeout(() => copying = false, 2000);"
>
<span
:class="{ 'group-hover:block' : !copying }"
class="icon-svg hidden"
>{{ partialCached "icon" "content_copy" "content_copy" }}</span
>
<span :class="{ 'group-hover:block' : copying }" class="icon-svg hidden"
>{{ partialCached "icon" "check_circle" "check_circle" }}</span
>
</button>
{{ with .Attributes.collapse }}
<div
x-data="{ collapse: true }"
@@ -38,10 +52,7 @@
x-show="collapse"
class="absolute z-10 flex h-32 w-full flex-col-reverse items-center overflow-clip pb-4"
>
<button
@click="collapse = false"
class="bg-blue flex items-center rounded-full px-2 text-sm text-white dark:bg-blue-500"
>
<button @click="collapse = false" class="chip">
<span>Show more</span>
<span class="icon-svg"
>{{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}</span