Sfinge, reStructuredText frammenti di codice mostra / nascondi

Question

Sono stato documentazione di un pacchetto software utilizzando Sfinge e reStructuredText .

Entro i miei documenti, ci sono alcuni frammenti di codice lunghe. Voglio essere in grado di averli nascosti di default, con un piccolo bottone "Mostra / Nascondi" che li ( Esempio ).

C'è un modo standard per farlo?

Answer 1

Penso che il modo più semplice per farlo sarebbe quello di creare un tema personalizzato Sfinge in cui si dirà alcuni elementi HTML per avere questa funzionalità. Un po 'di JQuery sarebbe andare un lungo cammino qui.

Se invece si vuole essere in grado di specificare questo nel vostro markup reStructuredText, si avrebbe bisogno di uno

• ottenere una cosa del genere incluso nella Sfinge stessa o
• implementarlo in un / docutils estensione Sfinge ... e quindi creare un tema Sfinge, che era a conoscenza di questa funzionalità.

Questo sarebbe un po 'più di lavoro, ma darebbe una maggiore flessibilità.

Answer 2

Non hai bisogno di un tema personalizzato. Utilizzare la direttiva container incorporato che consente di aggiungere CSS-classi personalizzate ai blocchi e ignorare il tema existsting di aggiungere alcuni javascript per aggiungere la mostra / nascondi-funzionalità.

Questa è _templates/page.html:

{% extends "!page.html" %}

{% block footer %}
 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>
{% endblock %}

Questa è _static/custom.css:

.toggle .header {
    display: block;
    clear: both;
}

.toggle .header:after {
    content: " ▶";
}

.toggle .header.open:after {
    content: " ▼";
}

Questa è aggiunto al conf.py:

def setup(app):
    app.add_stylesheet('custom.css')

Ora è possibile visualizzare / nascondere un blocco di codice.

.. container:: toggle

    .. container:: header

        **Show/Hide Code**

    .. code-block:: xml
       :linenos:

       from plone import api
       ...

Io uso qualcosa di molto simile per gli esercizi qui: https: //training.plone .org / 5 / mastering_plone / about_mastering.html # esercitazioni

Answer 3

Il tema del cloud sfinge ha direttiva html-toggle personalizzato che fornisce sezioni toggleable. Per citare dalla loro pagina web :

  

È possibile contrassegnare sezioni con .. rst-class:: html-toggle, che renderanno il default sezione per essere crollata sotto html, con uno snodo di collegamento sezione “spettacolo” a destra del titolo.

Qui è un link al loro prova pagina dimostrativa.

Answer 4

Non è un'estensione molto semplicistico, fornendo esattamente questa caratteristica: https://github.com/scopatz/hiddencode

Funziona piuttosto bene per me.