fish-shell/doc_src/python_docs_theme/layout.html
Fabian Homborg 7f34b8ab53 docs: Add copy buttons to all the codeblocks
This uses a bit of javascript to add copy buttons, so you can directly
copy all the code in a given block to the clipboard!

For codeblocks without prompts, it just copies all the code, for
blocks with prompts, it copies all the lines after prompts, under the
assumption that that's the code to be executed.

It would give you *all* the lines, so the output wouldn't be
interleaved like it is in the html, but good enough.

The buttons appear on hover, so they aren't usable on phones, but
since you won't really have a clipboard on phones and I have no idea
how to make them not always in front of the text otherwise: Eh.

I'm not in love with the javascript here, but it'll do.
2021-08-15 20:09:49 +02:00

115 lines
4.4 KiB
HTML

{% extends "basic/layout.html" %}
{# Remove broken "genindex" link - unfortunately this takes with it the acceptable "next" and "previous" links, but they're not super necessary. #}
{% set rellinks = [] %}
{% block rootrellink %}
<li><img src="{{ pathto('_static/' + theme_root_icon, 1) }}" alt=""
style="width: 80px; height: 80px; vertical-align: middle; margin-top: -1px"/></li>
<li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
{% if theme_root_include_title %}
<a href="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
{% endif %}
{% endblock %}
{%- macro searchbox() %}
{# modified from sphinx/themes/basic/searchbox.html #}
{%- if builder != "htmlhelp" %}
<div class="inline-search" style="display: none" role="search">
<form class="inline-search" action="{{ pathto('search') }}" method="get">
<input placeholder="{{ _('Quick search') }}" type="text" name="q" />
<input type="submit" value="{{ _('Go') }}" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
<script type="text/javascript">$('.inline-search').show(0);</script>
{%- endif %}
{%- endmacro %}
{% block header %}<div id="fmain">{% endblock %}
{% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
{% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
{% block relbaritems %}
{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
<li class="right">
{{ searchbox() }}
</li>
{%- endif %}
{% endblock %}
{# The sidebar goes into the *document* block, so it ends up in the document *div* so it doesn't go over the footer #}
{% block document %}{{ sidebar() }}{{ super() }}{% endblock %}
{% block sidebar2 %} {% endblock %}
{% block extrahead %}
<link rel="shortcut icon" type="image/png" href="{{ pathto('_static/' + theme_root_icon, 1) }}" />
{{ super() }}
{% endblock %}
{% block footer %}
<div class="footer">
&copy; {% trans %}Copyright{% endtrans %} {{ copyright|e }}.
<br />
{%- if last_updated %}
{% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}
{%- endif %}
{% if theme_issues_url %}{% trans pathto_bugs=theme_issues_url %}<a href="{{ theme_issues_url }}">Found a bug</a>?{% endtrans %}{% endif %}
<br />
{% trans sphinx_version=sphinx_version|e %}Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.{% endtrans %}
</div>
</div>
<script type="text/javascript">
function copy_to_clipboard(it) {
// Find the pre tag we're interested in.
var pre = it.target;
while (pre.tagName != "PRE") pre = pre.parentNode;
var txt = "";
// Cheesy: If we have a prompt,
// we only copy prompted lines,
// by splitting and matching and stuff
if (pre.querySelector('span.gp')) {
var texts= [];
for (var line of pre.innerText.split('\n')) {
if (line.match(/^>_?.*/)) {
texts.push(line.replace(/^>_?/, ""));
}
}
txt = texts.join("\n");
} else {
// Even cheesier: If we don't have a prompt, we remove the button text from the end.
var txt = pre.innerText.substring(0, pre.innerText.length - it.target.innerText.length).trim();
}
navigator.clipboard.writeText(txt).then(function() {
// Success - set the text to indicate it,
// then set it back after 2 seconds.
var span = pre.querySelector("button span");
if (span) {
var oldText = span.innerText;
span.innerText = "COPIED!";
setTimeout(function() {
span.innerText = oldText;
}, 2000);
}
}, function() {
});
}
(function () {
// Add copy buttons to all the codeblocks.
var codeblocks = document.querySelectorAll('div > pre');
var button = document.createElement('button');
var span = document.createElement('span');
span.innerText = "COPY";
button.appendChild(span);
for (var i of codeblocks) {
var newButton = button.cloneNode(true);
newButton.addEventListener('click', copy_to_clipboard);
i.appendChild(newButton);
}
})();
</script>
{% endblock %}