狮身人面像，reStructuredText显示/隐藏代码片段

我一直在使用Sphinx和reStructuredText来记录软件包。狮身人面像，reStructuredText显示/隐藏代码片段

在我的文档中，有一些长的代码片段。我希望能够将它们隐藏为默认设置，并带有一个可显示它们的“显示/隐藏”按钮（Example）。

有没有一个标准的方法来做到这一点？

来源

2010-03-16 Adam Matan

我认为最简单的方法是创建一个自定义的狮身人面像主题，其中您告诉某些html元素具有此功能。一个小JQuery会在这里走很长的路。

但如果你希望能够在新结构化的标记来指定这个，你需要或者

获得包含在狮身人面像自己这样的事情或
实现它在狮身人面像/ docutils的扩展......然后创建一个知道这个功能的Sphinx主题。

这样做会多一点，但会给你更多的灵活性。

来源

2010-04-01 22:49:33

你能分享一下你为狮身人面像文件上的'show/hide'工具开发的方式和内容吗？ – shahjapan 2011-11-10 10:47:13

您不需要自定义主题。使用内置指令container，允许您将自定义css类添加到块并覆盖现有主题以添加一些javascript以添加显示/隐藏功能。

这是_templates/page.html：

{% extends "!page.html" %} 

{% set css_files = css_files + ["_static/custom.css"] %} 

{% 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: " ▼"; 
} 

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

现在，您可以显示/隐藏的代码块。

.. 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-28 08:01:27 pbauer

谢谢，这个非常有用:) – 2017-02-21 13:49:54

美丽！如果切换解决方案显示为vimperator/cvim/pentadactyl中的可点击链接，那会很好。 – 2017-06-16 08:01:59

云狮身人面像主题定制指令html-toggle，提供可切换的部分。从他们的web page引用：

您可以.. rst-class:: html-toggle标记的部分，这将使得部分默认下的HTML被垮掉了，“秀一节”切换链接标题的右侧。

Here是链接到他们的测试演示页面。

来源

2014-09-12 16:49:18 Phil

狮身人面像，reStructuredText显示/隐藏代码片段

回答

相关问题