some markdown not rendering
Closed this issue · 4 comments
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):
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
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>
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?
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