Open jonathanrobie opened 6 years ago
takluyver
commented
6 years ago Github limits what is displayed for security reasons, and I'm guessing it's stripping out your <w></w> tags because it doesn't recognise them. Is it practical to display what you need to with standard HTML tags like <span>?
jonathanrobie
commented
6 years ago Excellent - that fixes one of the two problems, I can now see the output here:
Is there any way to get GitHub to enable the nice scrollable windows I see when running interactively? Without them, people have to read past long lists to see the next step, and they often want to look at only a small subset of the data the first time through.
takluyver
commented
6 years ago I think you'll have to make the scrolling boxes as part of your HTML output. I'm not a great HTML/CSS whizz, but I think that something like a fixed-height div with overflow-y: scroll in its styles should do the trick.
jonathanrobie
commented
6 years ago Hmmm, with nbviewer, I add the following:
/* This class is the outer container of all output sections. */
div.output_area {
max-height: 600px;
overflow: scroll;
...
}But that doesn't seem to be the right selector for GitHub. I tried this:
def highlight(self, query):
self.show(self.xquery(highlight_query_string(query)))
def show(self, html):
display(HTML('<style type="text/css">{}</style>{}'.format (
"""div.output_area {
max-height: 600px;
overflow: scroll;)""",
html
)))That seems to generate the right CSS, except that I obviously have the wrong selector:
"text/html": [
"<style type=\"text/css\">div.output_area {\n",
" \t\t\t\t\t\tmax-height: 600px;\n",
" \t\t\t\t\t\toverflow: scroll;)</style><p>\n",
" <b>Matt.1.20</b>\n",
" <br/>\n",It's possible that Github strips style tags as well as part of their security. You may be able to work it out using the 'inspect element' feature in the browser.
jonathanrobie
commented
6 years ago The 'inspect element' feature clearly shows what the problem is. The window I want to enable scrolling in is created first, my output is displayed within that window, so declaring CSS inside the window is too late.
To make it scroll, I have to somehow change the CSS used to render the output_area divs that contain my output. If I convert it to HTML first, I can do this by modifying the CSS at the top of the file. Is there any way for me to influence the corresponding CSS used on GitHub?
takluyver
commented
6 years ago If it's stripping your style tags, I don't think so. You might be able to create another div inside the output and make that scrolling using inline styles. But I don't know exactly what Github strips and what it doesn't.
I am creating notebooks that I want to show people who do not need to run Jupyter - they just need to see the output. Unfortunately, if I just check these notebooks in to GitHub, the text is not displaying.
To get around this problem, I am currently using nbviewer to convert to HTML, then manually changing the stylesheet to enable scrollable windows, but that's a hassle, especially when trying to show people the current status of the notebook. Done this way, the results that look like this:
http://jonathanrobie.biblicalhumanities.org/assets/SplitConstituents.html
But uploading to GitHub with the data does not work, the text does not display:
https://github.com/biblicalhumanities/greek-new-testament/blob/master/labnotes/SplitConstituents.ipynb
The data is there, though it is not rendered. I have verified this by cloning the repo and looking at the file.
Here's the contents of a cell that is not displayed as it is stored in the notebook, showing just the first part.