|
|
| Line 29: |
Line 29: |
| | : https://nbviewer.jupyter.org/ | | : https://nbviewer.jupyter.org/ |
| | : Example: https://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb | | : Example: https://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ===Customize Jupyter===
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ====Themes====
| |
| − | https://github.com/dunovank/jupyter-themes
| |
| − |
| |
| − | Ver el tema que muestran en esta página: https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab
| |
| − |
| |
| − |
| |
| − | jt -t oceans16 -cellw 98% -lineh 120 -fs 14 -nfs 14 -dfs 14 -ofs 14
| |
| − |
| |
| − |
| |
| − | https://www.kaggle.com/getting-started/97540
| |
| − | jt -t monokai -cellw 98% -lineh 120 -fs 14 -nfs 14 -dfs 14 -ofs 14 -f fira -nf ptsans -N -kl -cursw 2 -cursc r -T
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ====Extensions====
| |
| − | This post mention so nice extension and configuration that can be done: https://towardsdatascience.com/bringing-the-best-out-of-jupyter-notebooks-for-data-science-f0871519ca29
| |
| − |
| |
| − | <br />
| |
| − | =====Unofficial Jupyter Notebook Extensions=====
| |
| − | https://jupyter-contrib-nbextensions.readthedocs.io/en/latest/index.html
| |
| − |
| |
| − | <span style="color: green">'''This is very important. There are very nice extensions in this package:'''</span>
| |
| − |
| |
| − | * toc2: https://jupyter-contrib-nbextensions.readthedocs.io/en/latest/nbextensions/toc2/README.html
| |
| − | * Collapsible Headings
| |
| − | * ... etc
| |
| − |
| |
| − | <br />
| |
| − | ======Installation======
| |
| − | https://jupyter-contrib-nbextensions.readthedocs.io/en/latest/install.html
| |
| − |
| |
| − | <span style="color: red">'''I had some issues to install it. La format indicada por defecto:'''</span>
| |
| − |
| |
| − | pip install jupyter_contrib_nbextensions
| |
| − | jupyter contrib nbextension install --user
| |
| − |
| |
| − | <span style="color: red">'''A través de la forma anterior no pude instalar el paquete de forma correcta. La instalación no retornó errorres, y la extensión se mostraba en Jupyter-notebook pero no podía activar "enable" las extensiones.'''</span>
| |
| − |
| |
| − |
| |
| − | <span style="color: red">'''Al parecer es un problema con la ubicación de la instalación. Yo estaba usando conda pero conda está presentando problemas. La instalación de los paquestes demora muchísimo y luego el paquete parece no estar disponible.'''</span>
| |
| − |
| |
| − |
| |
| − | <span style="color: red">'''En el siguiente post encontré una solución para instalar nbextension usando pip:'''</span>
| |
| − | https://github.com/ipython-contrib/jupyter_contrib_nbextensions/issues/1127
| |
| − |
| |
| − | pip install --upgrade jupyter_contrib_nbextensions
| |
| − | jupyter contrib nbextension install --sys-prefix --symlink
| |
| − |
| |
| − | <span style="color: red">'''«--symlink» creo que lo usé pero no estoy completamente seguro. También realicé el --upgrade pero creo que la diferencia la hicieron las opciones --sys-prefix --symlink'''</span>
| |
| − |
| |
| − |
| |
| − |
| |
| − | Si no se muestra la '''Nbextensions''' tab (), try to reinstall the https://github.com/Jupyter-contrib/jupyter_nbextensions_configurator
| |
| − |
| |
| − | pip install jupyter_nbextensions_configurator
| |
| − | or
| |
| − | conda install -c conda-forge jupyter_nbextensions_configurator
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ====CustomJS and CustonCSS files====
| |
| − | This is a good post: https://forums.fast.ai/t/jupyter-notebook-enhancements-tips-and-tricks/17064
| |
| − |
| |
| − | Keyboard Shortcut Customization: https://jupyter-notebook.readthedocs.io/en/stable/examples/Notebook/Custom%20Keyboard%20Shortcuts.html
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | custom.js
| |
| − | <syntaxhighlight lang="js">
| |
| − | /** Mis configuraciones */
| |
| − |
| |
| − | // This is to enable syntax highlighting for SQL code:
| |
| − | // https://stackoverflow.com/questions/43641362/adding-syntax-highlighting-to-jupyter-notebook-cell-magic
| |
| − | require(['notebook/js/codecell'], function(codecell) {
| |
| − | codecell.CodeCell.options_default.highlight_modes['magic_text/x-mssql'] = {'reg':[/^%%sql/]} ;
| |
| − | Jupyter.notebook.events.one('kernel_ready.Kernel', function(){
| |
| − | Jupyter.notebook.get_cells().map(function(cell){
| |
| − | if (cell.cell_type == 'code'){ cell.auto_highlight(); } }) ;
| |
| − | });
| |
| − | });
| |
| − |
| |
| − |
| |
| − | // My plain theme
| |
| − | // This is a good post where I took some ideas to write the following fuction: https://forums.fast.ai/t/jupyter-notebook-enhancements-tips-and-tricks/17064
| |
| − | function plainTheme() {
| |
| − | var input_promp_fields = document.getElementsByClassName("prompt_container");
| |
| − | var text_render_fields = document.getElementsByClassName("text_cell_render");
| |
| − |
| |
| − | if (input_promp_fields[0].style.visibility == "collapse"){
| |
| − | action = "visible";
| |
| − | input_marginLeft = "0px";
| |
| − | border_top = "3px";
| |
| − | prompt_width = "74px";
| |
| − | padding_top = "0px";
| |
| − | output_margin = "40px";
| |
| − | }else{
| |
| − | action = "collapse";
| |
| − | input_marginLeft = "74px";
| |
| − | border_top = '0px';
| |
| − | prompt_width = "74px";
| |
| − | padding_top = "40px";
| |
| − | output_margin = "40px";
| |
| − | }
| |
| − |
| |
| − | // Si queremos usar !important debemos hacerlo de esta forma utilizando JQuery:
| |
| − | // https://makitweb.com/how-to-add-important-to-css-property-with-jquery/
| |
| − | var text_cell_fields = document.getElementsByClassName("text_cell");
| |
| − | $(text_cell_fields).ready(function(){
| |
| − | $('.input_prompt').css({
| |
| − | 'cssText': `width: 40px !important; max-width: ${prompt_width} !important; min-width: ${prompt_width} !important;`
| |
| − | });
| |
| − | });
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − | $(".prompt_container").css(
| |
| − | 'visibility', `${action}`
| |
| − | );
| |
| − |
| |
| − | $(".input").css(
| |
| − | 'padding-left', `${input_marginLeft}`
| |
| − | );
| |
| − |
| |
| − | $(".output_subarea").css(
| |
| − | 'margin-left', `${output_margin}`
| |
| − | );
| |
| − |
| |
| − | $('.cell').css({
| |
| − | 'cssText': `border-top-width: ${border_top} !important; border-bottom-width: ${border_top} !important;`
| |
| − | });
| |
| − |
| |
| − | $(".collapsible_headings_ellipsis").css({
| |
| − | 'cssText': `padding-top:${padding_top} !important; border-top-width: ${border_top} !important; border-bottom-width: ${border_top} !important;`
| |
| − | });
| |
| − |
| |
| − | $(".text_cell_render").css({
| |
| − | 'cssText': `margin-left: -10px;`
| |
| − | });
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | Jupyter.keyboard_manager.command_shortcuts.add_shortcut('Alt-Ctrl-Q', {
| |
| − | help : '...',
| |
| − | help_index : 'zz',
| |
| − | handler : function (event) {
| |
| − | plainTheme();
| |
| − | return false;
| |
| − | }}
| |
| − | );
| |
| − |
| |
| − | Jupyter.keyboard_manager.edit_shortcuts.add_shortcut('Alt-Ctrl-Q', {
| |
| − | help : '...',
| |
| − | help_index : 'zz',
| |
| − | handler : function (event) {
| |
| − | plainTheme();
| |
| − | return false;
| |
| − | }}
| |
| − | );
| |
| − |
| |
| − |
| |
| − | // This could be very usefull. It allows to add text automatically into a cell
| |
| − | // https://forums.fast.ai/t/jupyter-notebook-enhancements-tips-and-tricks/17064/27
| |
| − | Jupyter.keyboard_manager.edit_shortcuts.add_shortcut('Ctrl-Shift-J', {
| |
| − | help : '...',
| |
| − | help_index : 'zz',
| |
| − | handler : function (event) {
| |
| − | document.body.style.background = 'blue'
| |
| − | var target = Jupyter.notebook.get_selected_cell()
| |
| − | var cursor = target.code_mirror.getCursor()
| |
| − | var before = target.get_pre_cursor()
| |
| − | var after = target.get_post_cursor()
| |
| − | target.set_text(before + 'from IPython.core.display import display, HTML; \n\taverrrdisplay(HTML("<style>.container { width:98% !important;}</style>"))' + after)
| |
| − | cursor.ch += 20 // where to put your cursor
| |
| − | target.code_mirror.setCursor(cursor)
| |
| − | return false;
| |
| − | }}
| |
| − | );
| |
| − |
| |
| − |
| |
| − | // To get the real value of a css field: https://stackoverflow.com/questions/26074476/document-body-style-backgroundcolor-doesnt-work-with-external-css-style-sheet
| |
| − | // window.getComputedStyle(document.body).backgroundColor
| |
| − | // window.getComputedStyle(document.getElementsByClassName("input_area")[0]).backgroundColor
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | custom.css
| |
| − | <syntaxhighlight lang="css">
| |
| − | /* Mis configuraciones */
| |
| − |
| |
| − | .container { width:98% !important; }
| |
| − | /* document.getElementById("notebook-container").style.minWidth = "50%"; */
| |
| − | /* document.getElementById("notebook-container").style.maxWidth = "50%"; */
| |
| − |
| |
| − | #notebook-container {
| |
| − | width:98% !important;
| |
| − | }
| |
| − |
| |
| − | .CodeMirror-gutters {
| |
| − | background-color: transparent !important;
| |
| − | background: transparent !important;
| |
| − | }
| |
| − |
| |
| − | .CodeMirror-linenumber {
| |
| − | margin-left: -20px !important;
| |
| − | }
| |
| − |
| |
| − | .output_subarea {
| |
| − | margin-left: 40px !important;
| |
| − | }
| |
| − |
| |
| − | #toc .fa-fw {
| |
| − | color: blue !important;
| |
| − | }
| |
| − |
| |
| − | #toc .highlight_on_scroll {
| |
| − | margin-left: -4px !important;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #toc {
| |
| − | padding-left: 10px !important;
| |
| − | }
| |
| − |
| |
| − | /* I have also changed the color
| |
| − | /* #a6e22e by #388bfd
| |
| − | * in the entire custom.css
| |
| − | */
| |
| − |
| |
| − | /* I have also chenged some of the properties of the toc directly above in the code:
| |
| − |
| |
| − | #toc-wrapper {
| |
| − | z-index: 90;
| |
| − | position: fixed !important;
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − | overflow: hidden;
| |
| − | padding: 10px;
| |
| − | padding-top: 40px !important;
| |
| − | border-style: solid;
| |
| − | border-width: thin;
| |
| − | border-right-width: medium !important;
| |
| − | background-color: #1e1e1e !important;
| |
| − | }
| |
| − | #toc-wrapper.ui-draggable.ui-resizable.sidebar-wrapper {
| |
| − | border-color: rgba(93,92,82,.25) !important;
| |
| − | }
| |
| − | #toc a,
| |
| − | #navigate_menu a,
| |
| − | .toc {
| |
| − | color: #f8f8f0 !important;
| |
| − | font-size: 16pt !important;
| |
| − | }
| |
| − | #toc li > span:hover {
| |
| − | background-color: rgba(93,92,82,.25) !important;
| |
| − | }
| |
| − | #toc a:hover,
| |
| − | #navigate_menu a:hover,
| |
| − | .toc {
| |
| − | color: #DAA520 !important;
| |
| − | font-size: 16pt !important;
| |
| − | }
| |
| − | #toc-wrapper .toc-item-num {
| |
| − | color: #388bfd !important;
| |
| − | font-size: 16pt !important;
| |
| − | }
| |
| − | */
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ====Configurations from the Juniper notebook====
| |
| − |
| |
| − | <syntaxhighlight lang="python3">
| |
| − | from IPython.core.display import display, HTML;
| |
| − |
| |
| − | display(HTML("<style>.container { width:98% !important;}</style>"<))
| |
| − |
| |
| − | display(HTML('<style>.prompt.input_prompt{display:none !important;}</style>'))
| |
| − | display(HTML('<style>.prompt.input_prompt{visibility: visible !important;</style>'))
| |
| − | display(HTML('<style>.prompt.input_prompt{margin-left8kmclustering.ipynb 50px}</style>'))
| |
| − | display(HTML('<style>.prompt.input_prompt{visibility: visible !important; width: 0px !important; min-width: 0px !important}</style>'))
| |
| − |
| |
| − | display(HTML('<style>.input_area{margin-left: -50px;}</style>'))
| |
| − | display(HTML('<style>.input{margin-left: -20px;}</style>'))
| |
| − |
| |
| − | display(HTML('<style>.output_area{margin-left: 55px}</style>'))
| |
| − |
| |
| − | # display(HTML('<style>.cell{margin-bottom: -5px !important; margin-top: -5px !important;}</style>'))
| |
| − | # display(HTML('<style>.code_cell{margin-bottom: -5px !important; margin-top: -5px !important;}</style>'))
| |
| − |
| |
| − | # display(HTML('<style>.output_wrapper{margin-bottom: 0px !important; margin-top: 0px !important;}</style>'))
| |
| − | </syntaxhighlight>
| |
| | | | |
| | | | |
