From 2f919ba970a6bb45b0de361cfd28336e497ace21 Mon Sep 17 00:00:00 2001 From: Justin McGettigan Date: Mon, 17 Apr 2023 12:32:15 -0400 Subject: [PATCH] Add the 'sphinx-copybutton' Sphinx extension. (#6918) * Added the 'sphinx-copybutton' Sphinx extension. --- _static/css/custom.css | 55 ++++++++++++++++++++++++++++++++++++++++++ conf.py | 1 + requirements.txt | 2 ++ 3 files changed, 58 insertions(+) diff --git a/_static/css/custom.css b/_static/css/custom.css index b7374e02f..b2134a155 100644 --- a/_static/css/custom.css +++ b/_static/css/custom.css @@ -103,6 +103,16 @@ --highlight-operator-color: #666666; --highlight-string-color: #4070a0; + --copybtn-background-color: #f6f8fa; + --copybtn-background-color-hover: #f3f4f6; + --copybtn-border-color: #d5d8da; + --copybtn-border-color-hover: #d5d8da; + --copybtn-icon-color: #57606a; + --copybtn-icon-color-success: #1a7f37; + --copybtn-tooltip-background-color: #24292f; + --copybtn-box-shadow: 0 1px 0 rgba(27,31,36,0.04), inset 0 1px 0 rgba(255,255,255,0.25); + --copybtn-border-color-success: #2da44e; + --contribute-background-color: #d7dee8; --contribute-text-color: #646e72; @@ -221,6 +231,16 @@ --highlight-operator-color: #abc8ff; --highlight-string-color: #ffeca1; + --copybtn-background-color: #2a303c; + --copybtn-background-color-hover: #3e4450; + --copybtn-border-color: #3e4450; + --copybtn-border-color-hover: #8b949e; + --copybtn-icon-color: #8b949e; + --copybtn-icon-color-success: #3fb950; + --copybtn-tooltip-background-color: #6e7681; + --copybtn-box-shadow: 0 0 transparent, 0 0 transparent; + --copybtn-border-color-success: #238636; + --contribute-background-color: #25282d; --contribute-text-color: #7f939b; @@ -1674,3 +1694,38 @@ p + .classref-constant { .wy-menu-vertical p.caption + ul.active { display: block; } + +.highlight button.copybtn { + background-color: var(--copybtn-background-color); + border-color: var(--copybtn-border-color); + box-shadow: var(--copybtn-box-shadow); + width: 32px; + height: 32px; + right: 0; + top: 0; + margin: 12.25px; +} +.highlight button.copybtn:hover { + background-color: var(--copybtn-background-color-hover); + border-color: var(--copybtn-border-color-hover); +} +.highlight button.copybtn svg { + position: absolute; + left: 3.5px; + top: 3.5px; + color: var(--copybtn-icon-color); + pointer-events: none; +} +.highlight button.copybtn.success { + border-color: var(--copybtn-border-color-success); + box-shadow: 0 0 0 0.2em rgb(52 208 88 / 40%); +} +.highlight button.copybtn.success svg { + color: var(--copybtn-icon-color-success); +} +.o-tooltip--left:after { + background-color: var(--copybtn-tooltip-background-color); + color: #ffffff; + border-radius: 6px; + padding: 0.5em 0.75em; +} diff --git a/conf.py b/conf.py index e7301576d..24cff328c 100644 --- a/conf.py +++ b/conf.py @@ -17,6 +17,7 @@ extensions = [ "sphinx_tabs.tabs", "notfound.extension", "sphinxext.opengraph", + "sphinx_copybutton", ] # Warning when the Sphinx Tabs extension is used with unknown diff --git a/requirements.txt b/requirements.txt index c19fdf1cd..dd4a325d8 100644 --- a/requirements.txt +++ b/requirements.txt @@ -13,6 +13,8 @@ sphinx_rtd_theme==1.1.1 # Code tabs extension to display codeblocks in different languages as tabs. sphinx-tabs==3.4.0 +# Adds a 'copy' button to the right of codeblocks. +sphinx-copybutton==0.5.1 # Custom 404 error page (more useful than the default). sphinx-notfound-page==0.8.3 # Adds Open Graph tags in the HTML `` tag.