Added support for specifying copied text for code blocks

This commit is contained in:
squidfunk 2023-10-05 17:51:50 +02:00
parent 48ff39a5cc
commit a9da0b632c
No known key found for this signature in database
GPG Key ID: 5ED40BC4F9C436DF
5 changed files with 41 additions and 7 deletions

View File

@ -81,6 +81,37 @@ theme:
```
````
??? tip "Overriding the clipboard text"
If you want to define a slightly different text to be copied to the
clipboard, you can use the `data-copy` attribute on the code block. Note
that this attribute does not support multiple lines, which is not a
limitation of Material for MkDocs, but of the Markdown parser. Example:
```` markdown title="Code block"
``` { .sh data-copy="curl https://www.example.com" }
$ curl https://www.example.com
# <!doctype html>
# <html>
# ...
```
````
<div class="result" markdown>
``` { .sh data-copy="curl https://www.example.com" }
$ curl https://www.example.com
# <!doctype html>
# <html>
# ...
```
</div>
We recommend to use this very sparingly, because sometimes it can be
confusing to copy something different to the clipboard than what is
actually displayed.
### Code selection button
<!-- md:sponsors -->

View File

@ -249,7 +249,7 @@
</script>
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.2a9e8380.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.94c44541.min.js' | url }}"></script>
{% for script in config.extra_javascript %}
{{ script | script_tag }}
{% endfor %}

View File

@ -55,7 +55,10 @@ interface SetupOptions {
*/
function extract(el: HTMLElement): string {
el.setAttribute("data-md-copying", "")
const text = el.getAttribute("data-clipboard-text") ?? el.innerText
const copy = el.closest("[data-copy]")
const text = copy
? copy.getAttribute("data-copy")!
: el.innerText
el.removeAttribute("data-md-copying")
return text
}