docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: special rendering for codeblock variables 

This change adds special rendering for variables in codeblocks.
Variables (placeholder values in examples subject to change)
can be denoted using the following syntax:

    <VARIABLE_NAME>

Using this format will render the variable in a special color, and
without the angle brackets, akin to:

    \033[95mVARIABLE_NAME\033[39m

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2023-10-13 20:17:16 +02:00
parent a649f054e5
commit f7bbe06d27
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,22 @@
<div class="group relative"> {{ $innerHTML := highlight .Inner .Type
| replaceRE
`&lt;([A-Z_]+)?&gt;`
`<var
class="text-violet-light dark:text-violet-dark font-bold"
>$1</var>`
}}
<div x-data class="group relative">
<button <button
x-data="{ code: '{{ strings.ReplaceRE `(?sm)^\$\s+` "" .Inner | base64Encode }}' }"
class="material-symbols-rounded hidden group-hover:block absolute top-3 right-3 text-gray-light-300 dark:text-gray-dark-600" class="material-symbols-rounded hidden group-hover:block absolute top-3 right-3 text-gray-light-300 dark:text-gray-dark-600"
title="Copy" title="Copy"
@click="window.navigator.clipboard.writeText(atob(code)); @click="window.navigator.clipboard.writeText($refs.code.textContent.replaceAll(/^\$\s*/gm, ''));
$el.textContent='check_circle'; $el.textContent='check_circle';
setTimeout(() => $el.textContent='content_copy', 2000);" setTimeout(() => $el.textContent='content_copy', 2000);"
> >
content_copy content_copy
</button> </button>
{{ highlight .Inner .Type }} <div x-ref="code">
{{- safeHTML $innerHTML -}}
</div>
</div> </div>