CODEWITHSUNDEEP
cssmarkdownjupyter-notebook
Emre
Emre

Reputation: 6227

Styling individual Markdown cells in ipython notebooks

How can you fix the size of a cell that contains Markdown? I tried the following with ipython 2.3:

<div style="max-height: 500px; overflow: auto;">

[Markdown]

</div>

Both style directives are ignored and the Markdown is interpreted as text. I know that the div tag is being read because I can see its effects when I add background: yellow; to the mix. So why are the other two directives ignored -- how can I style Markdown cells?

Upvotes: 0

Views: 1142

Answers (1)

Jakob
Jakob

Reputation: 20821

There seems to be (at least) an issue with tables in div containers. This however is not attributed to IPython but rather to marked (the applied markdown engine).

I'm not perfectly sure if this is really your problem but if I create a markdown cell with the following content

<div style="max-height: 50px; overflow: auto;">
| 13ddsf | ree |
|------|-----|
| 33   | 45  |
</div>

I would expext to see a table, cropped at the bottom with a scrollbar at the side. However, I just get something like
enter image description here

So I don't see the table and I don't see any styling. Actually, the styling is simply not visible because the max-height keyword has no effect here. If I change the style to "height: 50px;" I immediately see the styling (note the increased height):
enter image description here

Now, the strange thing is actually the rendering problem of the table. Without the additional div container the table renders just fine, so the problem is somehow related to this container. After playing around I discovered that - for what reason ever - it is necessary to add some white space around the table. So if I change the markdown slightly like: 

<div style="max-height: 50px; overflow: auto;">

| 13ddsf | ree |
|------|-----|
| 33   | 45  |
</div >

it renders as:
enter image description here Note that there is a blank line before the table and a white space character after the final div! Actually, it works as well if the white space character after the div is skipped and some text is added outside the final div.
This way everything works as expected, ie. rendering and styling. Nevertheless, I'll write a bug report to marked, as this is IMHO not really obvious.

Update:

This seem to be related to this issue, which explains why the initial code is not working. Actually block-level markdown is not allowed inside block-level inline html. Moreover marked needs 2 line feeds after the block to correctly find it. By preventing marked to identify the block-level html (e.g. by adding the white space) it is possible to get the desired result, although in a somehow hackish way.
Note, that it is likely that this hack won't work forever, as the block level parsing might be modified.

Btw. I use the current IPython master (commit_hash: '13e42d6'), ubuntu and firefox 33.

Upvotes: 1

Related Questions