From 9d72658a433c97f54ed6f8508d699687fbc5f3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Thu, 22 Jun 2023 18:42:43 +0200 Subject: [PATCH] highlight: make copy to clipboard only appear on hover #574 --- exampleSite/content/basics/configuration/_index.en.md | 2 ++ exampleSite/content/basics/migration/_index.en.md | 6 ++++++ layouts/partials/header.html | 2 +- static/css/theme.css | 11 +++++++++++ 4 files changed, 20 insertions(+), 1 deletion(-) diff --git a/exampleSite/content/basics/configuration/_index.en.md b/exampleSite/content/basics/configuration/_index.en.md index 315eedce48..23cc152892 100644 --- a/exampleSite/content/basics/configuration/_index.en.md +++ b/exampleSite/content/basics/configuration/_index.en.md @@ -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. diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index ef4800bbda..beea327a68 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -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. diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 4586755d0b..530e71e9a8 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -65,7 +65,7 @@ {{- partialCached "stylesheet.html" (dict "page" . "outputFormat" $outputFormat) $outputFormat }} {{- partial "custom-header.html" . }} - +
diff --git a/static/css/theme.css b/static/css/theme.css index 9b2a64c233..75beaa520f 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -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 {