Problem: Line numbers overlap with code inside the cell. There's plenty of space on the left for the numbers but I have no idea how to align them. line numbers overlapping.
Context: I updated my theme to make it more comfortable with help of jupyter themes !jt -t gruvboxl -f fira -fs 14 -nf ptsans -nfs 14 -N -kl -cursw 2 -cursc r -cellw 95% -T -ofs 14 -dfs 11
Code in case it is relevant.
Probable cause: The notebook extension for collapsing code (functions, loops) + line numbering + font size increases with jupyter themes are all probable fighting with each other.
TLDR: How do I manipulate the line numbering extension to align the numbers on the left?
I got it. Not a CSS expert so maybe I broke something terribly and it will come back to bite me where I get my injections.
Anyway, I added this to .jupyter\custom\custom.css:
div.CodeMirror-linenumber.CodeMirror-gutter-elt {
left: 10px !important;
}
pre.CodeMirror-line {
left: 2px !important;
}
embedzacharias's way is very promising, well the offsets still need a little bit calibration.
e.g. pre.CodeMirror-line = 2px would be too close.
Fix:
add the following lines into your ~/.jupyter/css/custom.css
div.CodeMirror-linenumber.CodeMirror-gutter-elt {
left: 0px !important;
}
pre.CodeMirror-line {
left: 10px !important;
}
and it will work like this: (the overlapping of line number with code)
fixed_overlap
Issue:
Jupyter notebook theme adapted, line number overlapping with code area
Related
I am using the Jekyll Time Machine theme on GitHub and would like to make the main content section a lot wider:
https://ieg-dhr.github.io/DigiKAR_Projektseminar/
I have checked the stylesheet.css file but cannot find the right settings.
The following code seems to relate to the overall page background rather than the "box" that contains the text and images:
#container {
border: 1px solid #2a2a2a;
background: #ddd url(../images/pattern.png);
box-shadow: 0 0 5px #b1b1b1;
}
I have posted an issue in the developer's repository but have not received a response so far. So if anyone is using Time Machine, too, I am very grateful for your help.
EDIT:
As opposed to other themes I have used before, I am generally finding Time Machine hard to customize. I am also struggling with column width in tables.
The Github display of my page shows what I want (different column sizes and table widths):
https://github.com/ieg-dhr/DigiKAR_Projektseminar/blob/main/README.md
But in the Time Machine deployment, they are all the same:
https://ieg-dhr.github.io/DigiKAR_Projektseminar/
The Time Machine jekyll theme sets the width of the main content to width: 675px; [1]. I can see in your stylesheet.css is setting the width to 100% [2], which I believe resolves to Time Machine's width: 675px;.
I think you will want to edit your stylesheet.css to override the width from the Time Machine theme.
[1] https://github.com/pages-themes/time-machine/blob/master/_sass/jekyll-theme-time-machine.scss#L37-L40
[2] https://github.com/ieg-dhr/DigiKAR_Projektseminar/blob/main/stylesheets/stylesheet.css#L461-L464
I installed the script package in Atom to run python scripts. The output is a lot smaller than the editor text, and also I cannot resize the console height. It always takes up the minimum height required, so it changes based on output length which is annoying...
This does not match the "video" on the script home page: https://atom.io/packages/script. How do I get the font size to match the editor font size, and also set a fixed height for the console output?
Atom: 1.27.2 x64,
Script 3.18.1,
Windows: 7 x64 DPI 120%
With regard to small font size, I found a solution here:
https://github.com/rgbkrk/atom-script/issues/1191
That is to locate the script package script.less file and add a font-size property to it under .script-view .line
.script-view {
.panel-body pre {
background: #tool-panel-background-color;
color: #text-color;
}
.output {
}
.stderr {
color: #text-color-error;
}
.line {
border-radius: 0px;
margin: 0px;
padding: 0px;
**font-size: 14px;**
}
}
With regard to not being able to resize the output pane, this issue is also reported here:
https://github.com/rgbkrk/atom-script/issues/1125 and
https://github.com/rgbkrk/atom-script/issues/1637.
It sounds like it may relate to Atom itself and not the script package.
A few years ago I made some CSS code customization on my forum. Since then (probably, due to updates or some other reason), right now it doesn't show it right (the way it was). The idea is that I've got one color of a bg where there's a name of a poster and his avatar and then there's another color where there's text that he writes (verbiage of the post itself). I'm attaching the print screen on which I show what exactly do I mean.
Also I would tell what I did so far to achieve the effect (though it's not exactly right at the moment).
In file Themes/default/css/index.css (line 1921) I added this line of code:
background:url('http://idevsky.com/images/post_bg.png') repeat-y;
And also I changed the height to 0px from 11px in two places:
line 972 and line 987
You can see it if you go to:
http://idevsky.com/forum/index.php
Test account credentials:
j.smith qwerty
Then you click on John Smith (the only board) and then you go to "test" thread (the only one there).
There're 3 different colors:
1) the one where the poster name and avatar is (#dfecf5), it's the way it should be.
2) then there's one that covers the majority of post text area (#ebf3fb), it's the right color, it just doesn't spread right
3) then there's one irrelevant (wrong) color (#f0f4f7) which you can hardly see in the second post (the one that j.smith wrote) and it starts from the arrow point to the right.
print screen
Just remove your image and give it a background color also give your poster class a background color.
.post_wrapper {
background: white;
}
.poster {
background: aliceblue;
}
Search index.css and you change the background-color of .windowbg and .windowbg2 in the CSS file to #ebf3fb as the following:
.windowbg, #preview_body {[enter image description here][1]
color: #000;
background-color: #ebf3fb;
}
.windowbg2 {
color: #000;
background-color: #ebf3fb;
}
Check out this picture to help you find the code:
http://i.stack.imgur.com/MfJaB.png
I was wondering if there's something in the extension's API of vscode that can make the command palette looks like the one from Atom ?
I like the way Atom open it in the middle of the screen and the style of it.
Can we apply a custom CSS sheet in an extension or do something to achieve that ?!
Thanks a lot !
I've had this question, too.
I've tried VS Code a number of times, but I really didn't like how the Command Palette looks. It's all squished up with no padding and… ugh!
So, I spent some time looking into this, and I finally found a way to hack the VS Code command palette to look more like Atom.
Here is how my command palette looks now:
These are the steps I took:
Install Monkey Patch
Install Customize UI
Add the following declarations to your settings.json (customize as you see fit):
"customizeUI.stylesheet": {
".quick-input-widget": "width: 650px; margin-left: -325px;important;top:50px !important; padding:15px !important;background-color:rgb(41 46 53)!important;border-radius:10px!important;",
".quick-input-widget .quick-input-header": "padding:0px!important;margin-bottom:10px;",
".quick-input-widget .monaco-inputbox": "padding:10px !important;border-radius:5px!important;",
".quick-input-widget .monaco-list-rows": "top: 0 !important;max-height:670px;min-height:300px;",
".quick-input-widget .monaco-list-row": "position:static!important;border-bottom: 1px solid #333942;padding:5px!important;height:auto!important;",
".quick-input-widget .quick-input-list-entry": "position:relative;padding:0 5px 0px 15px;",
".quick-input-widget .quick-input-list-entry .codicon[class*=codicon-]": "font-size:12px;",
".quick-input-widget .quick-input-list-entry .monaco-action-bar": "position:absolute;left:0;",
// ".quick-input-widget .quick-input-list-entry .quick-input-list-label": "max-width: 80%;",
".quick-input-widget .quick-input-list .quick-input-list-entry.quick-input-list-separator-border": "border-top-width:0px!important;"
},
It doesn't match Atom exactly:
The main problem with this method is keyboard scrolling is wonky. The "end" of the command palette list ends up beyond the overflow limit of the containing div. As such, when you arrow down, you have to keep arrowing-down PAST the end of the visible div in order to get the list to move. I can live with this. Someone else smarter at hacking VS Code might be able to figure this out.
Atom dims the rest of the screen when you invoke the command palette. I don't see a way to do this right now. It might be possible using Money Patch to add some custom javascript (adding a class or a pseudo element) which would allow this to happen but I'm not going to try.
There might be other problems, but for now — this seems to work well enough!
Edit: text for clarity.
This is currently neither possible, nor planned, neither from an extension nor from within configuration settings.
I suggest to open issues on the command palette VS Code has to improve it if needed (https://github.com/Microsoft/vscode/).
I just upgraded to IPython 1.0 and the new notebook interface performs really well. On my screen it now has a default width of about 50% of the page which improves readability. However, i often work with long timeseries which i prefer to display as wide as possible.
Very wide pictures will only extend further to the right. Is there a way to display output wider then the default to expand in a centered matter?
The attached picture shows a normal inline plot in the first cell, which is less wide then the default notebook width. The second plot is wider and expands to the right. This leaves about the left quarter of my screen unused.
What I do is the following. This might help, but it also creates a beautifully rendered notebook.
Have a look at this online book about Bayesian Statistics. This is really nice.
They load a custom CSS at the end of the notebook using this code:
from IPython.core.display import HTML
def css_styling():
styles = open("custom.css", "r").read() #or edit path to custom.css
return HTML(styles)
css_styling()
You can download this custom CSS from the books github repo HERE: Drop it in the notebook folder and call the code above
Also note their nice matplotlibrc file. You can change the look and feel of the plots calling this code. Call this early in the notebook and all matplotlib plots will look pretty cool.
import json
s = json.load( open("bmh_matplotlibrc.json") ) #edit path to json file
matplotlib.rcParams.update(s)
Download the JSON file HERE from GITHUB
In short you have two options. Both add CSS styling to the notebook to achieve the effect:
Global Jupyter CSS (affects all notebooks)
Edit or create ~/.jupyter/custom/custom.css and add:
.output_png {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Modify the style of the current notebook by executing a code cell with:
from IPython.core.display import HTML
HTML("""
<style>
.output_png {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
""")
Note that in the first case there is no <style></style>.
I prefer the second option, specially if I'm going to share the notebook (since its self-contained).
The answer given by #tooblippe, although changes the style of the notebook, does not address the question. However, using the first part of that solution, you would be able to achieve the centering of the plots. This solution works for ipython==3.1.0. For higher versions that include Jupyter, you would want to edit the styling of Jupyter instead.
So, the solution would be:
You can either modify the above css file or add this line to the styling of your ipython environment in the ipython folder:
.output_png {
display: table-cell;
text-align: center;
vertical-align: middle;
}
vertical-align:middle did not work for me. Also, in the latest Jupyter (maybe others, but at least) there is a class called .prompt that takes up space only on the left of the page. I was able to work around both using this:
.output_png {
display: table-cell;
text-align: center;
margin:auto;
}
.prompt
display:none;
}
Just know that setting display:none on .prompt will cause all of the in[] and out[] displays to disappear and know that's what you want if you're going to do it. Hope that was helpful.
All of the answers posted (at the time of writing) don't appear to work for Jupyter Lab v3.
Instead of changing the CSS for output_png, I've found that changing it for jp-RenderedImage does what I want. If this changes or is different for you for any reason, just inspect the element and choose the relevant class to modify.
The Plots in the Jupyter Notebook can be Centered by Using HTML CSS Code Snippet.
The Code for aligning the plots at center is shown below, by using this Code Snippet all the plots can be centered in the Jupyter Notebook.
from IPython.core.display import HTML as Center
Center(""" <style>
.output_png {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style> """)
Make Sure you run this Code Snippet in Code Cell, not in Markdown Cell.