Notebook: Markdown table alignment

[GreatBahram]

Hi,
I want to change the alignment in Jupyter notebooks. However, I realized the default markdown operator such as :---- and :---: does not work in Jupyter notebook and the thing is the table I'm trying to show looks unpleasant since everything has been right-justify by default :-(.
This is my table:

Resource record Type | Resource record name | Description
--- | :---: | ---
1 | A | A specifies IP address (IPv4) for given host
28 | AAAA | AAAA (also quad-A record) specifies IPv6 address for given host.
15 | MX | The MX resource record specifies a mail exchange server for a DNS domain name.
12 | PTR | The PTR record is used to look up domain names based on an IP address.
16 | TXT | The text record can hold arbitrary non-formatted text string.
33 | SRV | The SRV resource record identifies the host(s) that will support a particular service.
2 | NS | The NS record specifies an authoritative name server for given host.
6 | SOA | *The record specifies core information about a DNS zone, including the primary name server, 0the email of the domain administrator, the domain serial number, and several timers relating to refreshing the zone. *

What I want is some of columns should be displayed in center, left or right alignment, How could I change this behavior in the right way ?

[HaiKju]

Same problem with me. Is there anybody who can help?

[takluyver]

Inspecting the HTML in the browser, the alignment information does not appear to be coming through the markdown parser. But I can see code there to process it in marked.js . So it looks like it's either a bug in the version of marked we bundle, or a problem with the way we're passing data into marked.

[HaiKju]

If you "Download as HTML, LaTeX or PDF via LaTeX" the output is correct. So it seems to be a bug in the parser.

[takluyver]

Ah, no, I know. The HTML in markdown cells is sanitized, and that includes stripping off style attributes. Not sure what to do about that at the moment.

When you 'download as', the markdown is processed by different parsers (mistune for HTML, pandoc for Latex).

[HaiKju]

Thanks for the information. I think it doesn't look so nice but I can live with it :-). By the way maybe it is a stupid question but I am with Jupyter since last weekend. What is the difference between my "Jupyter-R-Notebook" (if I try to update I always get the latest version = 4.4.0) and the "Jupyter-Notebook" latest version 5.2.1 from https://jupyter-notebook.readthedocs.io/en/stable/changelog.html?

[takluyver]

How are you checking the version number? Jupyter is a set of connected packages which have separate versions, so you might be getting the version for one of the others, like jupyter_core. You can see the notebook version number with jupyter notebook --version.

[HaiKju]

Ok, I'm sorry:

C:\Users\kw>jupyter --version
4.4.0
C:\Users\kw>jupyter notebook --version
5.2.1

Thanks for your help! Jupyter is a great product. I like it very much.

[GreatBahram]

@takluyver is there anyway to fix this ? Because I so badly need to fix this issue, I want to present something in Jupyter notebook and at the moment it does not look like good.

[takluyver]

Not easily, sorry. You might be able to produce the markdown as output from a code cell - or it might need to be HTML, I'm not sure. Or you could have the table in a separate file and include it in an iframe.

We're deliberately removing styles from markdown cells for security reasons - so a notebook can't disguise a malicious code cell and trick a user into running it. So it's not something that can be quickly fixed on our side.

It would be nice if marked produced css classes for cell alignment, which could then be styled by the notebook. But I don't think it has an option for that.

[HaiKju]

Maybe it would be a good idea to align by default the table content to the left instead to the right. At least for me this would be ok for 90% of the times...

[takluyver]

It was deliberately changed to right aligned in PR #2534, so I doubt there will be an appetite for going back. There's a comment describing how to go back to the older styles, though.

[GreatBahram]

OK thank you @takluyver , I will use that

[PeetsB]

A bit cumbersome, but adding HTML code in each cell works, i.e. use the following syntax in each cell

<p align="left|right|center|justify">

to manage the table cell formatting.

[itegebo]

It's one thing enforce right-alignment for consistency reasons as described in jupyter/notebook/pull/2534. It's another to stop supporting features in Markdown as described by the link in the Help bar, currently pointing to:

https://help.github.com/articles/getting-started-with-writing-and-formatting-on-github/
https://help.github.com/articles/organizing-information-with-tables/#formatting-content-within-your-table

Furthermore, the user gets no messaging to let them know that they're using unsupported features, i.e. the :---, :---:, and ---: tokens to describe justification.

[DanGolding]

@PeetsB that fixes the alignment but adds a line break in each cell :(

[waynebliu]

I created a new issue for breaking Markdown table formatting: https://github.com/jupyter/notebook/issues/3919

[Sophie-Germain]

Same problem, the html sol didn't work tough :(

[cdboschen]

Regarding placement of the entire table, the following code cell can be used to left justify the table:

must be first line:
%%html

[SpencerPark]

If you really want a hack, this is the functionality from #4130 in a single cell. Its a little long but you can stick it in an appendix at the bottom as running it will trigger a rerender of all markdown cells with the hijacked renderer. All future renders will use the replaced renderer.

%%javascript
var marked = require('components/marked/lib/marked');

if (marked.Renderer.name !== 'NonExtensibleTableRenderer') {
    function tablecell(content, flags) {
        var type = flags.header ? 'th' : 'td';
        var style = flags.align == null ? '' : ' style="text-align: ' + flags.align + '"';
        var start_tag = '<' + type + style + '>';
        var end_tag = '</' + type + '>\n';
        return start_tag + content + end_tag;
    }

    var DefaultRenderer = marked.Renderer;
    function NonExtensibleTableRenderer(options) {
        DefaultRenderer.call(this, options);
        Object.defineProperty(this, 'tablecell', {
            get: function () { return tablecell; },
            set: function () { } // No-op, sorry for this hack but we must prevent it from being redefined
        });
    }
    NonExtensibleTableRenderer.prototype = Object.create(DefaultRenderer.prototype);
    NonExtensibleTableRenderer.prototype.constructor = NonExtensibleTableRenderer;

    marked.setOptions({
        renderer: new NonExtensibleTableRenderer()
    });
    // Look away... it has to be done as newer versions of the notebook build a custom
    // renderer rather than extending the default.
    marked.Renderer = NonExtensibleTableRenderer;
}

var Jupyter = require('base/js/namespace');
Jupyter.notebook.get_cells()
   .filter(cell => cell.cell_type === 'markdown' && cell.rendered)
   .forEach(mdcell => {
       mdcell.unrender();
       mdcell.render();
   });