highlight: make copy to clipboard only appear on hover #574

This commit is contained in:
Sören Weber 2023-06-22 18:42:43 +02:00
parent 757f9d8590
commit 9d72658a43
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
4 changed files with 20 additions and 1 deletions

View file

@ -42,6 +42,8 @@ Note that some of these parameters are explained in details in other sections of
disableGeneratorVersion = false
# Set this to true to disable copy-to-clipboard button for inline code.
disableInlineCopyToClipBoard = false
# Set this to true to disable the hover effect for copy-to-clipboard buttons for block code.
disableHoverBlockCopyToClipBoard = false
# A title for shortcuts in menu is set by default. Set this to true to disable it.
disableShortcutsTitle = false
# If set to false, a Home button will appear below the search bar on the menu.

View file

@ -20,6 +20,12 @@ This document shows you what's new in the latest release. For a detailed list of
## 5.17.0 (2023-06-20)
- {{% badge style="note" title=" " %}}Change{{% /badge %}} The default behavior for the copy-to-clipboard feature for code blocks has changed.
The copy-to-clipboard button for code blocks will now only be displayed if the reader hovers the code block.
If you dislike this new behavior you can turn it off and revert to the old behavior by adding `[params] disableHoverBlockCopyToClipBoard=true` to your `config.toml`.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Now compatible with Hugo {{% badge color="fuchsia" icon="fab fa-hackerrank" title=" " %}}0.114.0{{% /badge %}} or higher. This does not change the minimum required Hugo version.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The new [`highlight` shortcode]({{% relref "shortcodes/highlight" %}}) replaces Hugo's default implementation and is fully compatible. So you don't need to change anything.

View file

@ -65,7 +65,7 @@
{{- partialCached "stylesheet.html" (dict "page" . "outputFormat" $outputFormat) $outputFormat }}
{{- partial "custom-header.html" . }}
</head>
<body class="mobile-support {{ $outputFormat }}{{- if .Site.Params.disableInlineCopyToClipBoard }} disableInlineCopyToClipboard{{ end }}" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
<body class="mobile-support {{ $outputFormat }}{{- if .Site.Params.disableInlineCopyToClipBoard }} disableInlineCopyToClipboard{{ end }}{{- if .Site.Params.disableHoverBlockCopyToClipBoard }} disableHoverBlockCopyToClipBoard{{ end }}" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
<div id="body" class="default-animation">
<div id="sidebar-overlay"></div>
<div id="toc-overlay"></div>

View file

@ -1112,6 +1112,17 @@ span > .copy-to-clipboard-button {
font-weight: 500;
}
/* only show copy to clipboard on hover for code blocks if configured */
div.highlight .copy-to-clipboard-button {
display: none;
}
div.highlight:hover .copy-to-clipboard-button {
display: block;
}
.disableHoverBlockCopyToClipBoard div.highlight .copy-to-clipboard-button {
display: block;
}
div.highlight > div table + .copy-to-clipboard-button > i,
div.highlight pre + .copy-to-clipboard-button > i,
.copy-to-clipboard-code + .copy-to-clipboard-button > i {