29

私はSphinxとreStructuredTextを使用してソフトウェアパッケージを文書化しています。

私のドキュメントには、長いコードスニペットがいくつかあります。それらを展開する小さな「表示/非表示」ボタンを使用して、デフォルトで非表示にできるようにしたいと思います（例）。

それを行うための標準的な方法はありますか？

4

6 に答える 6

49

カスタムテーマは必要ありません。組み込みのディレクティブcontainerを使用して、カスタムcssクラスをブロックに追加し、既存のテーマをオーバーライドしてjavascriptを追加し、show/hide-functionalityを追加します。

これは_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 %}

これは_static/custom.css：

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

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

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

これはに追加されconf.pyます：

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

これで、コードのブロックを表示/非表示にできます。

.. container:: toggle

    .. container:: header

        **Show/Hide Code**

    .. code-block:: xml
       :linenos:

       from plone import api
       ...

私はここでの演習に非常によく似たものを使用します：https ：//training.plone.org/5/mastering-plone/about_mastering.html#exercises

于 2014-08-28T08:01:27.633 に答える
19

detailsコードを2つの生のHTMLディレクティブでラップすることにより、組み込みのHTML折りたたみ可能タグを使用できます。

.. raw:: html

   <details>
   <summary><a>big code</a></summary>

.. code-block:: python

   lots_of_code = "this text block"

.. raw:: html

   </details>

生産：

<details>
<summary><a>big code</a></summary>
<pre>lots_of_code = "this text block"</pre>
</details>
于 2020-02-25T11:55:27.600 に答える
6

これを行う最も簡単な方法は、特定のhtml要素にこの機能を持つように指示するカスタムSphinxテーマを作成することだと思います。ここでは、小さなJQueryが大いに役立ちます。

ただし、reStructuredTextマークアップでこれを指定できるようにする場合は、次のいずれかを行う必要があります。

  • そのようなものをSphinx自体に含めるか
  • それをSphinx/docutils拡張機能に実装し、この機能を知っているSphinxテーマを作成します。

これはもう少し手間がかかりますが、柔軟性が増します。

于 2010-04-01T22:49:33.733 に答える
6

その機能を正確に提供する非常に単純な拡張機能があります：https ：//github.com/scopatz/hiddencode

それは私にとってはかなりうまくいきます。

于 2018-09-11T23:25:37.253 に答える
5

クラウドスフィンクステーマにはhtml-toggle、切り替え可能なセクションを提供するカスタムディレクティブがあります。彼らのウェブページから引用するには：

セクションにをマークすることができます.. rst-class:: html-toggle。これにより、タイトルの右側にある「セクションの表示」トグルリンクを使用して、セクションがデフォルトでhtmlの下に折りたたまれます。

ここに彼らのテストデモンストレーションページへのリンクがあります。

于 2014-09-12T16:49:18.967 に答える
0

上記の方法はどれも私にはうまくいかないようですので、これが私が最終的にそれを解決した方法です：

  1. substitutions.rstソースディレクトリに次の内容のファイルを作成します。

    .. |toggleStart| raw:: html

   <details>
   <summary><a> the title of the collapse-block </a></summary>

.. |toggleEnd| raw:: html

   </details>
   <br/>

  2. 使用するすべてのファイルの先頭に次の行を追加します。折りたたみ可能なブロックを追加します

    ..include:: substitutions.rst

  3. ここで、コードの一部を折りたたみ可能にするには、次を使用します。

    |toggleStart|

the text you want to collapse
..code-block:: python 
    x=1

|toggleEnd|
于 2021-11-20T10:40:41.270 に答える