Monokai

[Carreau]

Following http://stackoverflow.com/questions/19888138/ipython-notebook-css-formatting-of-code-cells

FYI, codemirror already support monokai here. http://codemirror.net/demo/theme.html

Do not style .vbox here it's a metclass (now removed) that allow to align things horizontally/vertically it can dynamically change.

Will investigate what you see with the theme applied

[Carreau]

Is this what you are trying to get ?

I do have white space between cells, but no differences between executed and not-executed cells. THe white space is due to .output_wrapper for me. This plus a few margin/padding here and there removed gave me above screenshot. Both on Firefox and Chrome OSX.

I changed at least :

div.cell border, padding, margin
output-wrapper, margin-botton

[panditarevolution]

Hi Matthias,

The screenshot looks good. If the cells maintain this look when executed via ctrl+enter, then that's what I want. When I try it, the text gets highlighted and

I saw the monokai support from codemirror, in fact that's the css I adapted. I yet have to figure out how to properly work with code mirror, but presumably you configure it with custom.js?

http://codemirror.net/doc/manual.html#usage

I'll have a go playing with your recommendations and let you know how it went. Thanks a lot for your help so far.

Cheers, Chris

On Mon, Nov 11, 2013 at 2:43 AM, Matthias Bussonnier < notifications@github.com> wrote:

Is this what you are trying to get ? [image: capture decran 2013-11-10 a 16 29 51]https://f.cloud.github.com/assets/335567/1508834/4a4ff290-4a1d-11e3-8033-e26f32152ee9.png

I do have white space between cells, but no differences between executed and not-executed cells. THe white space is due to .output_wrapper for me. This plus a few margin/padding here and there removed gave me above screenshot. Both on Firefox and Chrome OSX.

I changed at least :

div.cell border, padding, margin output-wrapper, margin-botton

— Reply to this email directly or view it on GitHubhttps://github.com/panditarevolution/ipythonNotebook_customs/issues/1#issuecomment-28153081 .

[Carreau]

I wrote some time ago a js-extension, and a nbviewer post on how to dynamically change notebook css. It should probably be updated to work with new IPython version, but you can probably inspire from it and/or send patches.

[panditarevolution]

I had a few more goes at it and figured out that the problem only occurs when the input area has at least two lines. It doesn't happen with one liners. Also it seems firefox specific. I tried it with chrome and things were just ok. I could also confirm that it seems to be the standard behaviour, i.e. it also happens on firefox with the default profile (chrome works fine).

Just to make sure that we are talking about the same thing:

After I execute a cell with ctrl+enter, I want the cell to look like this:

However, when I execute a cell with two lines or more, it changes it's appearance to this:

Note that the white extra space between input and output area (between "print ;Woohoo'" and the grey, inset output field. The input area, or some related element expands on execution.

This isn't particular visible in the default profile, you can see the input area expand though, but becomes a little too obvious with the darker color scheme I implemented....

This space disappears once I click on the input area, however if I don't click on it it just stays like this

On Mon, Nov 11, 2013 at 8:37 AM, Matthias Bussonnier < notifications@github.com> wrote:

I wrote some time ago a js-extensionhttps://github.com/ipython-contrib/IPython-notebook-extensions/tree/master/css_selector, and a nbviewer posthttp://nbviewer.ipython.org/urls/raw.github.com/Carreau/posts/master/02-css-selector.ipynbon how to dynamically change notebook css. It should probably be updated to work with new IPython version, but you can probably inspire from it and/or send patches.

— Reply to this email directly or view it on GitHubhttps://github.com/panditarevolution/ipythonNotebook_customs/issues/1#issuecomment-28161533 .

[panditarevolution]

The

element seems to be related to this issue. Following pics are taken on Firefox:

vbox element unchanged; with white space:

vbox element without the -moz-box-flex: 1 property; no white space but shrunken:

I googled a little if I could find a related firefox issue but without success.

On Mon, Nov 11, 2013 at 10:23 PM, Pandita Revolution < pandita.revolution@gmail.com> wrote:

I had a few more goes at it and figured out that the problem only occurs when the input area has at least two lines. It doesn't happen with one liners. Also it seems firefox specific. I tried it with chrome and things were just ok. I could also confirm that it seems to be the standard behaviour, i.e. it also happens on firefox with the default profile (chrome works fine).

Just to make sure that we are talking about the same thing:

After I execute a cell with ctrl+enter, I want the cell to look like this:

[image: Inline image 1]

However, when I execute a cell with two lines or more, it changes it's appearance to this:

[image: Inline image 2] Note that the white extra space between input and output area (between "print ;Woohoo'" and the grey, inset output field. The input area, or some related element expands on execution.

This isn't particular visible in the default profile, you can see the input area expand though, but becomes a little too obvious with the darker color scheme I implemented....

This space disappears once I click on the input area, however if I don't click on it it just stays like this

On Mon, Nov 11, 2013 at 8:37 AM, Matthias Bussonnier < notifications@github.com> wrote:

I wrote some time ago a js-extensionhttps://github.com/ipython-contrib/IPython-notebook-extensions/tree/master/css_selector, and a nbviewer posthttp://nbviewer.ipython.org/urls/raw.github.com/Carreau/posts/master/02-css-selector.ipynbon how to dynamically change notebook css. It should probably be updated to work with new IPython version, but you can probably inspire from it and/or send patches.

— Reply to this email directly or view it on GitHubhttps://github.com/panditarevolution/ipythonNotebook_customs/issues/1#issuecomment-28161533 .

[Carreau]

Screenshot don't work when sent by mail.

Here is what I get in FF with this less file compiled, using current master.

Note that shift-enter execute and select next cell, ctrl+enter execute and select all text of current alt+enter execute and insert a new cell below.

[Carreau]

I might not be on lastest FF will update.

[panditarevolution]

shift + enter and alt + enter both work fine by the way. I'm on firefox 25. I updated the links to the pics above.

[cschwem2er]

Hi, I am highjacking this issue as I did not find contact information for you. I really like your idea of customizing the notebook and currently try to imiate the atom-dark theme ("https://github.com/atom/atom-dark-syntax). Via replicating your code I got some of it to work, but not all. For example, "in" and "is" are in the same color as keyowrds like "from". It would be very nice if you could have a short look at my code base:

.cm-s-ipython .CodeMirror-gutters {background: #161b1d; border-right: 0px;} .cm-s-ipython .CodeMirror-gutter {background: #272822; border-right: 0px;} .cm-s-ipython .CodeMirror-linenumber {color: #c5c8c6;} .cm-s-ipython .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;} .cm-s-ipython .CodeMirror-gutter-text {color: #d0d0d0;} .cm-s-ipython div.CodeMirror-selected {background: #444444 !important;}

.cm-s-ipython { background-color: #25282b; color: #ffffff; } .cm-s-ipython span.cm-keyword {color: #96cbfe;} .cm-s-ipython span.cm-number {color: #ff73fa;} .cm-s-ipython span.cm-operator {color: #f3f3f4; font-weight: bold;} .cm-s-ipython span.cm-meta {color: #005d44 !important;} .cm-s-ipython span.cm-comment {color: #888888; font-style: italic;} .cm-s-ipython span.cm-string {color: #a8ff60;} .cm-s-ipython span.cm-error {color: #ff9999;} .cm-s-ipython span.cm-builtin {color: #ffff99;} .cm-s-ipython span.cm-def {color: #ffd2a7;}

.cm-s-ipython span.cm-variable {color: #d4d4d5;} .cm-s-ipython span.cm-variable-2 {color: #ffd2a7 !important;} .cm-s-ipython span.cm-string-2 { color: #aa91dd; }

.cm-s-ipython span.cm-bracket {color: #ededee;} .cm-s-ipython span.cm-tag {color: #ffd2a7;} .cm-s-ipython span.cm-link {color: #ae81ff;} .cm-s-ipython span.cm-attribute { color: #2aa198; } .cm-s-ipython span.cm-quote { color: #93a1a1; } .cm-s-ipython span.cm-property, .cm-s-ipython span.cm-attribute {color: #ffd2a7;} .cm-s-ipython span.cm-atom {color: #ae81ff !important;} .cm-s-ipython span.cm-qualifier { color: #b58900; }

This is the way it looks like in my notebook:

And this is the way it looks like in the atom editor:

[Carreau]

The syntax highlighting of code as nothing specific to IPython. It is "Just" a codemirror theme, which rely on the codemirror python mode to tag the tokens with classes. from and in are both in commonKeywords class, so without changing the python mode, that will likely be impossible to highlight the two differently.

Having sent patches to Codemirror, I believe a patch that does such a distinction might be accepted.

[cschwem2er]

Thank you very your turbo response! I was just surprised about this because in the vanilla notebook style, "in", "not", etc. do have a different color then "from" etc.

Also, in the example image, there are different colors as well:

[Carreau]

See https://github.com/codemirror/CodeMirror/issues/3266 , that's a recent change of codemirror where things were combined together...