diff --git a/dactyl-config.yml b/dactyl-config.yml
index 48f3d677d6..d492c9d9f9 100644
--- a/dactyl-config.yml
+++ b/dactyl-config.yml
@@ -27,6 +27,7 @@ default_filters:
- include_svg
- css_tables
- slug
+ - copy_code_to_clipboard
callout_class: "devportal-callout"
callout_types:
diff --git a/template/pagetype-doc.html.jinja b/template/pagetype-doc.html.jinja
index b34c5f3828..12fd9ff176 100644
--- a/template/pagetype-doc.html.jinja
+++ b/template/pagetype-doc.html.jinja
@@ -6,12 +6,22 @@
+
+
+ {# temp styling for testing. Need to cleanup #}
+
{% endblock %}
diff --git a/tool/filter_copy_code_to_clipboard.py b/tool/filter_copy_code_to_clipboard.py
new file mode 100644
index 0000000000..950e0ccfbf
--- /dev/null
+++ b/tool/filter_copy_code_to_clipboard.py
@@ -0,0 +1,40 @@
+################################################
+## Add copy to clipboard btton
+## Author: Jake Bonham
+## Copyright: Ripple Labs, 2021
+##
+## Finds codeblocks and adds copy to clipboard button
+################################################
+
+
+# Issues/questions
+# Multistep tutoral. > Get started page. Has 5 blocks with 4 hidden?
+# Position on multitabs
+# Do we need on any "output" blocks?
+
+
+def filter_soup(soup, **kwargs):
+ """
+ 1. Finds all elements with class of "codehilite"
+ 2. Adds copy to clipboard button.
+ Button looks like >
+
+ 3. Adds id to element.
+ """
+
+ code_blocks = soup.find_all(class_="codehilite")
+ index1 = 0
+ for code_block in code_blocks:
+ # add id to each child
+ codeBlock = code_block.find("code")
+ codeBlock_id = "codeblock-%d" % index1
+ codeBlock["id"] = codeBlock_id
+ # Add copy button
+ new_tag = soup.new_tag('button', id=codeBlock_id+'button')
+ new_tag.append("Copy to clipboard") #TODO: localize
+ new_tag['class'] = "clipboard-btn"
+ new_tag['data-clipboard-target'] = "#"+codeBlock_id
+ code_block.insert(0, new_tag)
+ #
+ index1 += 1
+