some markdown not rendering

ByronAhn commented 1 year ago

Some of my markdown isn't rendering inside of a tab (where it renders fine outside of a tab).

The following code…

{% tabs A %}
{% tab A x %}
hi

- list item 1
- list item 2

bye
{% endtab %}
{% endtabs %}

… is rendered as shown in the image below (i.e. without the list items):

Ovski4 commented 1 year ago

The css file that is given in the example sets some style on lists. I just pushed this commit to fix this. So you can try updating the css file contents with the latest version

I don't think that's what you want, but you can also specify the markup language with a md block

{% tabs A %}
{% tab A x %}
hi

```md
- list item 1
- list item 2

bye {% endtab %} {% endtabs %}



I hope that helps

ByronAhn commented 1 year ago

Thanks for the quick patch! I don't work with CSS enough to know what fixes what, so that's a big help.

That said, I still have a problem: if a tab contains a list, any subsequent tabs come up as blank. So for example, with this code…

{% tabs A %}
{% tab A x %}
hi

- list item 1
- list item 2

bye
{% endtab %}
{% tab A y %}
hi
bye
{% endtab %}
{% tab A z %}
hi
bye
{% endtab %}
{% endtabs %}

… tab x is rendered correctly with a list, but tabs y and z are simply blank (not even containing "hi" or "bye").

Similarly, with this code…

{% tabs A %}
{% tab A x %}
hi
bye
{% endtab %}
{% tab A y %}
hi

- list item 1
- list item 2

bye
{% endtab %}
{% tab A z %}
hi
bye
{% endtab %}
{% endtabs %}

… tab x and tab y are correctly rendered, but tab z is simply blank.

In case it's helpful, here is the .html file that's produced by this jekyll input (using your .css and .js files, as provided in this repo):

<!DOCTYPE html>
<html>

  <!-- Head -->
  <head><link rel="stylesheet" href="/assets/css/custom.css">
  </head>

  <!-- Body -->
  <body id="PageTop">
    <!-- Content -->
    <ul class="tab" data-tab="3eda3c8b-cccf-4f6a-a212-6afd4535d14c" data-name="A">

      <li class="active">
          <a href="#">x </a>
      </li>

      <li>
          <a href="#">y </a>
      </li>

      <li>
          <a href="#">z </a>
      </li>

</ul>
<ul class="tab-content" id="3eda3c8b-cccf-4f6a-a212-6afd4535d14c" data-name="A">

      <li class="active">
<p>hi
bye</p>
</li>

      <li>
<p>hi</p>

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
</ul>

<p>bye</p>
</li>

      <li>
<p>hi
bye</p>
</li>

</ul>

  <script src="/assets/js/tabs.js"></script>
  </body>
</html>

Ovski4 commented 1 year ago

I think issues come up because we have markdown embedded within a markdown file. There might be some ways to fix this but I don't have the time to spend time on this plugin right now.

I had a quick look, I find that removing the line break before the list fixes some things. i.e. from

{% tabs A %}
{% tab A x %}
hi
bye
{% endtab %}
{% tab A y %}
hi

- list item 1
- list item 2

bye
{% endtab %}
{% tab A z %}
hi
bye
{% endtab %}
{% endtabs %}

To

{% tabs A %}
{% tab A x %}
hi
bye
{% endtab %}
{% tab A y %}
hi
- list item 1
- list item 2

bye
{% endtab %}
{% tab A z %}
hi
bye
{% endtab %}
{% endtabs %}

It changes how the HTML is rendered (no idea why). Unlike you the tabs are rendered fine, but the content is wrong:

With the line break before the list:

Versus without the line break:

I can also reproduce with html. i.e.

hi

<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>

vs

hi
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>

Does this help you to find a workaround?

Ovski4 commented 1 year ago

I pushed some changes to the tabs.js file. Just tested your markup and it's working fine now:

So if you update the javascript with the latest version that should work now.

I'll close this issue. Feel free the reopen it or create a new one if that does not work for you

Ovski4 / jekyll-tabs

some markdown not rendering #5