Is it possible to customize the cell colours and notebook output such as dataframes in IJulia notebook (using julia). For example, in python, we could do
Python notebook
from IPython.core.display import HTML
css = open('style.css').read()
HTML('<style>{}</style>'.format(css))
style.css
table.dataframe th:not(:empty) {
background-color: #FFCCFF;
text-align:left;
font-weight: bold;
font-family: monospace;
}
table.dataframe tr:nth-child(2) th:empty {
border-left: none;
border-right: 1px dashed #888;
}
table.dataframe td {
border: 2px solid #ccf;
background-color: #f4f4ff;
}
From looking at the IJulia source, it doesn't seem like there's a method for updating the styles from within the package directly.
The simplest way to customize the IJulia CSS – assuming you're using jupyter 0.4 – would be to add your customizations to ~/.jupyter/custom/custom.css. If the directory does not exist, just create it, and your custom styles should load automagically.
Sourced from: How do I set custom CSS for my IPython/IHaskell/Jupyter Notebook?
This seem to work
file = open("styletableJul.css")
styl = readall(file)
HTML("$styl")
Jupyter permits rendering output with Javascript code in it. Using Javascript you can really play with the DOM (browser page representation) and achieve a different look. My mini-test example was:
In[356]: HTML("<script>tt = \$(\".output_prompt\"); tt[tt.length-1].style.color=\"green\"</script><em>hello</em>")
The result was:
Out[356]: hello
but with a green Out[356] (it has the output_prompt class). Getting the JavaScript code to change the styles might be annoying. It might also be possible to really include CSS style sheet programmatically using Javascript. You already have some default libraries loaded to help you (JQuery) - but I'm afraid I'm no Jupyter expert.
Related
I'm a backend developer tasked withed moving a front end from a custom framework to React. (Spare a thought for me please).
I've come across CSS classes within other CSS classes such as:
content.document{
display: flex;
.important{
background-color: #FAD08A;
padding: 20px 0;
border-radius: 5px;
position: relative;
img.important{
width: 70px;
float: right;
}
h2 {
font-size: 16px;
color: #ccc;
text-align: center;
line-height: normal;
}
}
}
I have never seen this way of doing CSS and of course if I paste it into a normal CSS file, it doesn't work.
Is there a library that would all me to have CSS classes defined within other CSS classes (such as how h2 is defined in .important above)? I'd rather not have to modify tons of CSS to get this to work.
This is sass. There is sass and scss syntax. The one you have above is scss. They have .scss or .sass file-types. Sass-Variant drops the brackets and works with indents alike CoffeeScript or YAML.
Since you are using React now, you can just install a "sass" package with yarn add or npm install command. There are different versions of sass because of legacy and different environments. You can decide if you want to install it locally (per project) or globally (-g flag for npm).
Usually, I go with the package named sass. You could probably also use dart-sass. If you want to get fancy: more-details-about-sass-variants.
You can read more here: https://create-react-app.dev/docs/adding-a-sass-stylesheet/.
This tool supports sass and scss with different setups: sass playground
As Jon mentioned, it is written in SCSS. You can try to use an online tool that converts SCSS to CSS.
I am currently creating a Sphinx document using the sphinx_rtd_theme. I would like to know how to change the color of visited links.
So far, I have only found possibilities using the classic theme (using html_theme_options in conf.py file). I however need to use
sphinx_rtd_theme.
I guess there are possibilities using a local css file (in _static). For instance, I already use a css file to specify the theme color:
.wy-side-nav-search, .wy-nav-top {
background: #0b750a;
}
Any hints?
Solved, quite easy (...). I just had to add this in my css file:
a:visited {
color: blue;
}
I need to render some html tables in Jupyter Notebook and for this I have defined my own css styles. I want it to be reusable on any PC.
For now I need to run code like this in one of Jupyter cells:
%%html
<style>
.output_wrapper, .output {
height:auto !important;
max-height: none;
}
.output_scroll {
box-shadow:none !important;
webkit-box-shadow:none !important;
}
.package_header {
width: 100%;
background-color: #0e2b59;
color: #ffffff;
font-size: 14px;
text-align: center;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
.placeholder {
width: 100%;
background-color: #ffffff;
height: 6px;
}
.passed_test_table {
display: table;
width: 100%;
background-color: #ebffd3;
border-spacing: 5px;
}
# (...) rest of css classes omitted
</style>
Yet I don't want to store this style inside Jupyter Notebook but in other file like my_default_style.css and load it somehow so it doesn't take too much space in Notebook making it less readable.
Is it possible to load .css style from some local file instead of running it in Jupyter Notebook cell directly?
If you are okay with the styling applying to all notebooks you make, then you can store your css in ~/.jupyter/custom/custom.css and this will be automatically loaded and will override any default styles.
An alternative is to do something like this:
from IPython.core.display import HTML
import urllib2
HTML(urllib2.urlopen('[url to your css file here').read())
(from http://moderndata.plot.ly/custom-styling-for-ipython-notebooks-with-3-lines-of-code/)
Where you store your css file somewhere (e.g. on Github) and download it and apply it when you run the notebook.
If you want it to be completely external, use custom.css, but this will apply to every notebook. If you need it to only apply to a single notebook, then you'll have to specify it within the notebook, but there are less verbose ways of doing it (like above).
See configuration docs
If you are using Jupyter with Python 3 then there is no urllib2 (it was merged into urllib) and the answers above will give you the error ModuleNotFoundError: No module named 'urllib2'. You may want something like this instead:
from IPython.display import HTML
from urllib.request import urlopen
html = urlopen("[url to your css file here]")
HTML(html.read().decode('utf-8'))
Note that read() returns a bytes encoding, which you must decode if you want text.
If you are using an inline CSS style, you can also pass it as part of the HTML content, for example in a <style> block. Here is a simple example:
from IPython.display import HTML
css_str = '<style>.foo{color:#F00;}</style>'
html_str = '<div class="foo">bar</div>'
html = HTML(css_str + html_str)
display(html)
Output is the word "bar" in red.
This answer would probably better be a comment on the earlier answer by Davies and Narasimhan, but I lack the reputation to post a comment.
from IPython.core.display import HTML will work, and was the recommended way to access HTML display capability in earlier versions of IPython. But in recent versions, the public display API is in IPython.display (see its docstring). This module exposes __all__ of IPython.core.display, along with __all__ of IPython.lib.display. Notably, the current IPython docs (The IPython API) don't publicly document IPython.core.display separately. For the current IPython.display docs, see: Module: display — IPython documentation.
So the recommended solution as of IPython 5 I believe would be:
from IPython.display import HTML
import urllib2
HTML(urllib2.urlopen('[url to your css file here').read())
I'm trying to use the syntax highlighting for a presentation in reveal.js, but I don't want to use zenburn (the default) and I want to highlight code written in R. I used highlight.js to produce css customized for R but the issue is that highlight.js denotes code in html with 'hljs' while reveal.js uses 'pre code.' For example highlight.js css looks like:
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #fdf6e3;
color: #657b83;
-webkit-text-size-adjust: none;
}
While reveal.js highlighting css looks like:
pre code {
display: block; padding: 0.5em;
background: #3F3F3F;
color: #DCDCDC;
}
Can reveal generate alternate themes for syntax highlighting, or is the solution to go through and change all the selectors?
You may be working on an outdated version of reveal.js that is affected by this GitHub issue.
In this case (and if you cannot upgrade) you would replace the inlined minified version of highlight (in plugin/highlight/highlight.js) by the latest stable version.
In all other cases just add the desired higlight css file (e.g. idea.css) to lib/css and replace the zenburn.css link in index.html (by e.g. <link rel="stylesheet" href="lib/css/idea.css">)
Expect that .reveal pre code in reveal's theme css may interfere with some highlight styles so they may be hard to read or look bad without further modifications.
I am a WordPress beginner. I want to insert css code into an article but i am getting a too big lines size.
I wrote this in wordpress :
[sourcecode language="css"]
#button{
font-weight: bold;
border: 2px solid #fff;
}
[/sourcecode]
I want something like this :
WordPress's source code generator uses tables for its layout, so if you have any CSS that affects arbitrary table elements then it will affect the layout of your source code too.