I encountered some problems when trying to change the layout of the markdown cells of my jupyter notebook.
I do not like the default display of tables and I want to change it. I am trying to use the default css from github.
I do not have lines that separates the rows and columns:
I tried to set this in my settings.json but it did not work
"markdown.styles": [
"./.vscode/github-markdown.css"
]
I have also tried to add something find here (https://www.kaggle.com/learn-forum/129348)
from IPython.display import HTML
HTML(''.format(open('.vscode/github-markdown.css').read()))
Can you help me ?
Related
I have implemented a react npm package called "react-json-pretty" in a web interface,
I would like for it to show the line numbers next to each line like so:
Not what I would like to have
What I would like to have
The npm package allows for css modifications (see bottom of the page)
I would like to mix the react-json-pretty with a CSS counter
like this
I have tried to modify it and can't figure out a way to do this, does anyone know how this is possible ?
Thanks
I try to make simple widget with animation for Jupyter notebook using ipywidgets library.
I want to use bootstrap library for prettify my widget. So, I imported bootstrap.min.css file, but, when I create widget, styles of my notebook break down. Please see screenshot before
and after creating widget.
Apparently this is due to the fact that styles are overwritten. What can I do to correct the influence of my styles on the general jupyter-notebook styles. I would be grateful for any advice or example of how bootstrap is used in other widgets.
Here is my use case:
I want to create a markdown document (my CV for instance) and create a style for it using a CSS file. Then I want to print the PDF of my file.
I have installed the Markdown PDF extension in VS Code and it does its job.
To have the extension and the preview to properly render the styling, I changed the settings in vscode setting.json for both extensions to use my CSS file and it works.
For the preview:
{
"markdown.styles": ["my-styles.css"]
}
For the PDF export:
{
"markdown-pdf.styles": ["~/Documents/Styles/my-styles.css"]
}
However, this stylesheet is applied to all my markdown files and what I would like is to embed the CSS file for this specific file. I want to have a CV style for my CVs, a report style for reports, etc.
Is this feasible?
Using workspace specific settings solves my issue.
It does not allow to use one CSS per markdown file, but it's good enough: I can put all my CVs in one folder with the CV CSS in the workspace settings and my reports in another workspace with another CSS stylesheet
I am trying to add CSS rules to my Jupyter Lab Console to customize the look of only pandas dataframes and I have successfully done this interactively in the console. What I want is to have my CSS rules applied to the Jupyter Lab Console when it starts so that I don't have to do this interactively. I have successfully added these style customizations to the pandas dataframe itself (df.style.apply()) but I don't want to have to add it to every dataframe I create interactively.
Pandas dataframes are classed as .dataframe. I have created a Jupyter Lab start-up file called "00-first.py" and have it in the .ipython/profile_default/startup/ directory. The file contents are:
from IPython.display import HTML, display
import pandas as pd
import numpy as np
style = '''<style>
.dataframe td {font-family:"Liberation Mono";}
.dataframe th, .dataframe tr, .dataframe td {padding-top:0.1em; padding-bottom:0.1em;}
</style>'''
display(HTML(style))
display(HTML("Environment personalization complete."))
When I launch the console I can confirm the 00-first.py file has been executed as dir() shows the "style" variable, pd and np. The message string does not print out and the style does not appear in the CSS of the web page.
If I create a dataframe, it is displayed with the default css font. To get the styling to take place, I manually run display(HTML(style)) and then all dataframes now have the new css style.
I am trying remove having to type display(HTML(style)) at the beginning of each console session and want the startup script "00-frist.py" to handle this.
I am using Jupyter Lab 1.1.4 on Linux Manjaro Linux 5.6.7-1-MANJARO x86_64 GNU/Linux using Firefox 75.0.
How do I do this or is there a better way to do this?
Before: without styling
After: with styling
I tried multiple incantations of NotebookApp.extra_static_pathsList as suggested by #jayveesea but could not get this method to work. The solution I found turned out to be quite simple and that is to edit the base CSS file, adding my CSS selectors there.
Find your Jypyter application directory using jupyter lab path from the command prompt. This will be something like /home/fred/anaconda3.
Find the index.css file for the theme you use. This file will be located under your Jupyter Application directory, under the directory of the theme you are using. For example, if your Jupyter application directory is '/home/fred/anaconda3' and the theme you are using is 'theme-light-extension', then the index file will be located at /home/fred/anaconda3/share/jupyter/lab/themes/#jupyterlab/theme-light-extension/index.css
Add your CSS selectors to the file.
/* pandas dataframe customizations */
.dataframe td {font-family:"Liberation Mono";}
.dataframe th, .dataframe tr, .dataframe td {padding-top:0.1em; padding-bottom:0.1em;}
Restart your Jupyter console and you should see all pandas dataframes formatted following these rules.
One downside to this method is that you have to add your CSS rules to any extensions you want to support these rules, but this works for me since I don't switch extensions.
Take a look here for using the config file for jupyter. In particular NotebookApp.extra_static_paths option:
NotebookApp.extra_static_pathsList Default: []
Extra paths to search for serving static files.
This allows adding javascript/css to be available from the notebook
server machine, or overriding individual files in the IPython
UPDATE:
It seems like the above method might be broken and maybe abandoned. Another solution is to use the following path to store custom CSS: .jupyter\custom which does not need any update to the config file.
So in this case .jupyter\custom\custom.css would contain:
.dataframe td {font-family:"Liberation Mono";}
.dataframe th, .dataframe tr, .dataframe td {padding-top:0.1em; padding-bottom:0.1em;}
Is it possible to define some template content cells which all new ipython notebooks include when being created?
I'd like my notebooks to include some standard CSS using this method and possibly also have a markdown cell with links I'm frequently using .
Thanks to #Jakob for the help.
To get permanent customised CSS within the notebooks, I needed to create <myprofile>/static/custom/custom.css in my .ipython user folder folder.
This worked quite ok. I used the firefox's webdev tools to find the css items and classes in the ipython notebook and managed to get a monokai-ish style:
I also learned from here that you can inject javascript which might make it possible to add default content to new notebooks. I haven't tried this one yet though.
Edit: if interested, the css file lives here. The monokai colors are based on .cm-s-ipython, which I think is similar what sublime text is using.