Skip to content

Commit

Permalink
DOC: Add notebook about custom CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
mgeier committed Apr 20, 2020
1 parent b3f26fb commit 77f305b
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 0 deletions.
151 changes: 151 additions & 0 deletions doc/custom-css.ipynb
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Custom CSS\n",
"\n",
"If you are not satisfied with the CSS styles\n",
"provided by `nbsphinx`\n",
"and by your Sphinx theme,\n",
"don't worry,\n",
"you can add your own styles easily."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## For All Pages\n",
"\n",
"Just create your own CSS file, e.g. `my-own-style.css`,\n",
"and put it into the `_static/` sub-directory\n",
"of your source directory.\n",
"\n",
"You'll also have to set the config values\n",
"[html_static_path](https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_static_path)\n",
"and\n",
"[html_css_files](https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_css_files)\n",
"in your `conf.py`, e.g. like this:\n",
"\n",
"```python\n",
"html_static_path = ['_static']\n",
"html_css_files = ['my-own-style.css']\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## For All RST files\n",
"\n",
"If you want your style to only apply to `*.rst` files\n",
"(and not Jupyter notebooks or other source files),\n",
"you can use\n",
"[rst_prolog](https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-rst_prolog)\n",
"with the\n",
"[raw](https://docutils.sourceforge.io/docs/ref/rst/directives.html#raw-data-pass-through)\n",
"directive in your `conf.py` like this:\n",
"\n",
"```python\n",
"rst_prolog = \"\"\"\n",
".. raw:: html\n",
"\n",
" <style>\n",
" h1 {\n",
" color: fuchsia;\n",
" }\n",
" </style>\n",
"\"\"\"\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## For All Notebooks\n",
"\n",
"Similarly,\n",
"if you want your style to only apply to notebooks,\n",
"you can use [nbsphinx_prolog](prolog-and-epilog.ipynb)\n",
"like this:\n",
"\n",
"```python\n",
"nbsphinx_prolog = \"\"\"\n",
".. raw:: html\n",
"\n",
" <style>\n",
" h1 {\n",
" color: chartreuse;\n",
" }\n",
" </style>\n",
"\"\"\"\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## For a Single Notebook\n",
"\n",
"For styles that should affect only the current notebook,\n",
"you can simply insert `<style>` tags\n",
"into Markdown cells like this:\n",
"\n",
"```html\n",
"<style>\n",
" .nbinput .prompt,\n",
" .nboutput .prompt {\n",
" display: none;\n",
" }\n",
"</style> \n",
"```\n",
"\n",
"<style>\n",
" .nbinput .prompt,\n",
" .nboutput .prompt {\n",
" display: none;\n",
" }\n",
"</style>\n",
"\n",
"This CSS example removes the input and output prompts\n",
"from code cells,\n",
"see the following cell:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"6 * 7"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.2"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
1 change: 1 addition & 0 deletions doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ was generated from Jupyter notebooks.
prolog-and-epilog
custom-formats
subdir/*
custom-css
a-normal-rst-file
links
contributing
Expand Down
10 changes: 10 additions & 0 deletions doc/usage.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,16 @@
"See also [nbsphinx_codecell_lexer](#nbsphinx_codecell_lexer)."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### `html_css_files`\n",
"\n",
"See [Custom CSS](custom-css.ipynb) and\n",
"[html_css_files](https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_css_files)."
]
},
{
"cell_type": "markdown",
"metadata": {},
Expand Down

0 comments on commit 77f305b

Please sign in to comment.