Jelajahi Sumber

Add the 'sphinx-copybutton' Sphinx extension. (#6918)

* Added the 'sphinx-copybutton' Sphinx extension.
Justin McGettigan 2 tahun lalu
induk
melakukan
2f919ba970
3 mengubah file dengan 58 tambahan dan 0 penghapusan
  1. 55 0
      _static/css/custom.css
  2. 1 0
      conf.py
  3. 2 0
      requirements.txt

+ 55 - 0
_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;
+}

+ 1 - 0
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

+ 2 - 0
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 `<head>` tag.