diff --git a/docs/_static/clipboard.svg b/docs/_static/clipboard.svg new file mode 100644 index 0000000..b888a20 --- /dev/null +++ b/docs/_static/clipboard.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/conf.py b/docs/conf.py index 7aa3102..b6c8ba0 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -108,7 +108,7 @@ # Switches for testing but shouldn't be activated in the live docs # copybutton_only_copy_prompt_lines = False # copybutton_remove_prompts = False -# copybutton_image_path = "test/TEST_COPYBUTTON.png" +# copybutton_image_path = "clipboard.svg" # copybutton_selector = "div" diff --git a/docs/index.rst b/docs/index.rst index d342eb3..2724e3c 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -352,6 +352,33 @@ To use a different image for your copy buttons, do the following: path to your image file, **relative to** ``_static/``. +For example, if you wanted to use a **clipboard icon** instead of the default copy button icon, do the following: + +1. Copy the ``Clipboard Icon SVG`` from `the Tabular icons pack `_. + Here is the SVG for reference: + + .. code-block:: svg + + + + + + + +2. Create a file at ``_static/clipboard.svg`` from your documentation root. + Paste in the SVG above into that file. + +3. Ensure that your ``_static`` folder is added to your ``html_static_paths`` configuration in Sphinx. +4. Configure ``sphinx_copybutton`` to use this icon instead, via the following configuration: + + .. code-block:: python + + # Note that we do not include `_static` + # because the path should be *relative* to the static folder. + copybutton_image_path = "clipboard.svg" + +When you re-build your documentation, you should see this new icon in your copy buttons. + Configure the CSS selector used to add copy buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -384,9 +411,11 @@ For example, to make the copy button visible by default (not just when a code ce 2. Add the following rule to it: .. code-block:: css + button.copybtn { opacity: 1; } + 3. Add the CSS file to Sphinx by ensuring that the following configuration exists in your ``conf.py`` file (see `the Sphinx documentation for more details `_): .. code-block:: python diff --git a/sphinx_copybutton/_static/copy-button.svg b/sphinx_copybutton/_static/copy-button.svg index b888a20..9c074da 100644 --- a/sphinx_copybutton/_static/copy-button.svg +++ b/sphinx_copybutton/_static/copy-button.svg @@ -1,5 +1,5 @@ - + - - + +