Provide a possibility for downloadable snippets / copy to clipboard

[sypets]

see

• https://www.dokuwiki.org/wiki:syntax#downloadable_code_blocks
• https://typo3.slack.com/archives/C028JEPJL/p1518785609000381

[marble]

1. Files can be shown in code-blocks, though we hardly use that. In that case you can simply write a link to that file as well.

2. I don't know how the dokuwiki does that downloading of code-block content as file. Im curious, but I don't think it's an essential feature.

3. A button: "Mark all content of the code-block" and copy it to the clipboard could be convenient.

I close this issue for now. If somebodies stumbles across a nice solution for three on some other website we can still consider that and reopen this issue.

[marble]

Oops, just noticed, that I had found that nice solution back in 2016 already ;-))
http://mbless.de/blog/2015/01/15/looking-for-wisdom-about-javascript.html#copy-to-clipboard

[sypets]

Can we reopen? I think copy to clipboard would be more useful than download to file.

I changed the title.

Examples that use this in the TYPO3 universe:

Forger reST helper for changelog

https://forger.typo3.com/utilities/rst

1. Click "Breaking"
2. Click "Code Block"
3. Click the icon

Gerrit

1. open a review, e.g. https://review.typo3.org/c/Packages/TYPO3.CMS/+/58255
2. press download

[DanielSiepmann]

As far as I understand, we "just" need to add @marble JavaScript solution to the theme?

[sypets]

Example on Symfony page:

https://symfony.com/doc/current/doctrine.html

[marble]

Ok, I'll go for a solution. Is certainly a useful "nice to have".

[marble]

On the symfonie page it's

(window.webpackJsonp = window.webpackJsonp || []).push([["doc"], {
    b2hv: function (e, t, n) {
    }, "ip/K": function (e, t, n) {
        "use strict";
        n.r(t);
        var c = n("eBEy");

        function o(e) {
            var t = localStorage.getItem("selectedFormat"),
                n = e.querySelector("li");
            e.querySelectorAll("[class^=highlight-]").forEach(function (e) {
                e.style.display = "none"
            }), e.querySelectorAll("li").forEach(function (e) {
                e.classList.remove("selected"), e.querySelector("em").textContent == t && (n = e)
            });
            var c = n.querySelector("[class^=highlight-]"),
                o = n.closest("ul.simple"),
                i = 28 + (c.classList.contains("highlight-terminal") ? 34 : 0);
            n.classList.add("selected"), c.style.display = "block", o.style.height = c.scrollHeight + i + "px"
        }

        n("b2hv"), window.addEventListener("load", function () {
            !function () {
                var e = {
                    allowHTML: !0,
                    animateFill: !1,
                    animation: "fade",
                    ignoreAttributes: !0,
                    interactive: !0,
                    maxWidth: 500,
                    placement: "right",
                    sticky: !0,
                    trigger: "click",
                    theme: "light-border"
                };
                if (null === document.querySelector("#doc-menu-guides")) return;
                Object(c.a)("#doc-menu-guides", Object.assign({}, e, {content: document.querySelector("#doc-menu-guides-content").innerHTML})), Object(c.a)("#doc-menu-components", Object.assign({}, e, {
                    content: document.querySelector("#doc-menu-components-content").innerHTML,
                    maxWidth: 650
                }))
            }(), document.querySelectorAll("div.configuration-block").forEach(function (e) {
                e.classList.add("jsactive", "clearfix"), o(e), e.querySelectorAll("li").forEach(function (e) {
                    var t = e.querySelector("em"), n = t.textContent;
                    t.innerHTML = '<a href="#">' + n + "</a>", t.addEventListener("click", function (e) {
                        localStorage.setItem("selectedFormat", n), document.querySelectorAll("div.configuration-block").forEach(function (e) {
                            o(e)
                        }), e.preventDefault()
                    })
                })
            }), document.querySelectorAll(".highlight-terminal .gp, .highlight-terminal .c1").forEach(function (e) {
                e.dataset.content = e.textContent
            }), document.querySelectorAll("div.literal-block .highlight").forEach(function (e) {
                var t = e.closest("[class*=highlight-]");
                if (!t.classList.contains("highlight-terminal") && !t.classList.contains("highlight-diff")) {
                    var n = document.createElement("button");
                    n.classList.add("btn", "btn--code-copy"), e.prepend(n), n.addEventListener("click", function (t) {
                        var c, o;
                        c = e.textContent, (o = document.createElement("textarea")).setAttribute("readonly", ""), o.style = {
                            position: "absolute",
                            left: "-9999px"
                        }, o.value = c, document.body.appendChild(o), o.select(), document.execCommand("copy"), document.body.removeChild(o), n.classList.add("btn--code-copied"), setTimeout(function () {
                            n.classList.remove("btn--code-copied")
                        }, 1500), t.preventDefault()
                    })
                }
            })
        })
    }
}, [["ip/K", "runtime", 1]]]);

[marble]

①
https://www.30secondsofcode.org/js/s/copy-to-clipboard

②
https://codepen.io/shaikmaqsood/pen/XmydxJ

③
https://www.30secondsofcode.org/js/s/copy-to-clipboard

④
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

[susannemoog]

How about using https://sphinx-copybutton.readthedocs.io/en/latest/ ?

[marble]

How about using https://sphinx-copybutton.readthedocs.io/en/latest/ ?

Cool, will have a look.

[marble]

Done and solved with Docker rendering container version v2.9.0