Bad rendering

[zeraphin21]

Hello, I have a problem with this extension, I only try to pull it from Github, install dependancies in virtualenv and then just generate the doc with this command :

sphinx-build -b html ./docs build/ -c ./docs

Generated html is :

<li><p>Rendering:</p>
<div class="http-example docutils container">
<div class="http-example-http docutils container" id="id1">
<p><span class="caption-text">http</span></p>
<div class="highlight-http notranslate"><div class="highlight"><pre><span></span><span class="nf">GET</span> <span class="nn">/Plone/front-page</span> <span class="kr">HTTP</span><span class="o">/</span><span class="m">1.1</span>
<span class="na">Host</span><span class="o">:</span> <span class="l">localhost:8080</span>
<span class="na">Accept</span><span class="o">:</span> <span class="l">application/json</span>
<span class="na">Authorization</span><span class="o">:</span> <span class="l">Basic YWRtaW46YWRtaW4=</span>
</pre></div>
</div>
</div>
<div class="http-example-curl docutils container" id="id2">
<p><span class="caption-text">curl</span></p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>curl -i -X GET http://localhost:8080/Plone/front-page -H <span class="s2">&quot;Accept: application/json&quot;</span> --user admin:admin
</pre></div>
</div>
</div>

As you can see, div with id2, id3, etc are not hidden so I have all code blocks displayed one below another one. Can you explain me what I'm doing wrong?

[datakurre]

It sounds like CSS and JS from the plugin are not registered properly:

https://github.com/collective/sphinxcontrib-httpexample/tree/master/src/sphinxcontrib/httpexample/static

Copying those is part of the plugin:

https://github.com/collective/sphinxcontrib-httpexample/blob/e2b34b3a34a0b7c2fb541b4c2e214d6671dd565f/src/sphinxcontrib/httpexample/__init__.py#L29

But hard to guess, why would that not work for you :thinking:

[zeraphin21]

OK I'm going ahead with this problem. As you can see above, tab text is include in a \<p> and span class name is caption-text (why?)

So I have modified sphinxcontrib-httpexemple.js :

(function() {
  var jQuery = window.jQuery || function() {};

  jQuery(function($) {
    $('.http-example.container').each(function() {
      var $container = $(this),
          $blocks = $(this).children(),
          $captions = $(this).find('.caption-text');
      $captions.each(function() {
        var $paragraph = $(this).parent();
        var $block = $(this).parent().parent();
        $(this).on('click', function() {
          $captions.removeClass('selected');
          $(this).addClass('selected');
          $paragraph.hide();
          $blocks.hide();
          $block.show();
        });
        $container.append($(this));
      });
      $container.append($blocks);
      $captions.first().click();
    });
  });

})();

I've also modified CSS to include .caption-text instead of .caption And now it's working as expected. As you can see I need to get parent of parent ($(this).parent().parent()) to get block DOM.

My question is why do I have a modification on span field? I don't really understand...

[datakurre]

@zeraphin21 Thanks! I'd guess there is a change in HTML generated by docutils or Sphinx between some versions. This plugin does not generate its own HTML, but relies on docutils directives to do that.

Let's keep this issue open then. The JS and CSS needs to be fixed to work with both of the versions.

[ak64th]

It seems docutils-0.17 causes this issue

[datakurre]

Fixed in https://github.com/collective/sphinxcontrib-httpexample/pull/73