How to hide code from cells in ipython notebook visualized with nbviewer

Question

I have an ipython jupyter notebook that I visualize using NBviewer   How can I hide all the code from the notebook rendered by NBviewer  so that only the output of code  e g  plots and tables  and the markdown cells are shown

User · Answer

There is a nice solution provided here that works well for notebooks exported to HTML. The website even links back here to this SO post, but I don't see Chris's solution here! (Chris, where are you at?)

This is basically the same solution as the accepted answer from harshil, but it has the advantage of hiding the toggle code itself in the exported HTML. I also like that this approach avoids the need for the IPython HTML function.

To implement this solution, add the following code to a 'Raw NBConvert' cell at the top of your notebook:

<script>
  function code_toggle() {
    if (code_shown){
      $('div.input').hide('500');
      $('#toggleButton').val('Show Code')
    } else {
      $('div.input').show('500');
      $('#toggleButton').val('Hide Code')
    }
    code_shown = !code_shown
  }

  $( document ).ready(function(){
    code_shown=false;
    $('div.input').hide()
  });
</script>
<form action="javascript:code_toggle()">
  <input type="submit" id="toggleButton" value="Show Code">
</form>

Then simply export the notebook to HTML. There will be a toggle button at the top of the notebook to show or hide the code.

Chris also provides an example here.

I can verify that this works in Jupyter 5.0.0

Update: It is also convenient to show/hide the div.prompt elements along with the div.input elements. This removes the In [##]: and Out: [##] text and reduces the margins on the left.

User · Answer

I would use hide input all from nbextensions  https   github com ipython-contrib IPython-notebook-extensions   Here s how    Find out where your IPython directory is   from IPython utils path import get ipython dir print get ipython dir    Download nbextensions and move it to the IPython directory  Edit your custom js file somewhere in the IPython directory  mine was in profile default static custom  to be similar to the custom example js in the nbextensions directory  Add this line to custom js   IPython load extensions  usability hide input all      IPython Notebook will now have a button to toggle code cells  no matter the workbook

User · Answer

Here is another solution suggested by p3trus      IPython events   on  notebook loaded Notebook   function        IPython toolbar add buttons group                           label       toggle input cells                 icon        icon-refresh                  callback   function       input   slideToggle                            As described by p3trus    It  adds a button to the ipython notebook toolbar to hide show the input code cell  To use it  you have to put the custom js file in your  ipython  lt profile name gt  static custom  folder  where  is the ipython profile in use    My own comments  I verified this solution and it works with iPython 3 1 0

User · Answer

For better display with printed document or a report  we need to remove the button as well  and the ability to show or hide certain code blocks  Here s what I use  simply copy-paste this to your first cell      This is a cell to hide code snippets from displaying   This must be at first cell   from IPython display import HTML  hide me      HTML     lt script gt  code show true   function code toggle       if  code show           div input   each function id          el     this  find   cm-variable first          if  id    0    el text       hide me               this  hide                           div output prompt   css  opacity   0       else          div input   each function id            this  show                   div output prompt   css  opacity   1         code show    code show       document   ready code toggle    lt  script gt   lt form action  javascript code toggle    gt  lt input style  opacity 0  type  submit  value  Click here to toggle on off the raw code   gt  lt  form gt        Then in your next cells   hide me print  this code will be hidden    and  print  this code will be shown

User · Answer

This will render an IPython notebook output  However  you will note be able to view the input code  You can copy a notebook  then add this code if needed to share with someone who does not need to view the code    from IPython display import HTML  HTML     lt script gt     div  input   hide

User · Answer

Paper  Printing or Saving as HTML  For those of you wishing to print to paper the outputs the above answers alone seem not to give a nice final output  However  taking  Max Masnick s code and adding the following allows one to print it on a full A4 page   from IPython display import display from IPython display import HTML import IPython core display as di  di display html   lt script gt jQuery function    if  jQuery  body notebook app   length    0    jQuery   input area   toggle    jQuery   prompt   toggle        lt  script gt    raw True   CSS       notebook div output subarea  max-width 100        changes output subarea width to 100   from 100  - 14ex  HTML   lt style gt    lt  style gt   format CSS     The reason for the indent is that the prompt section removed by Max Masnick means everything shifts to the left on output  This however did nothing for the maximum width of the output which was restricted to max-width 100 -14ex   This changes the max width of the output subarea to max-width 100

User · Answer

jupyter nbconvert yourNotebook ipynb --no-input --no-prompt  jupyter nbconvert yourNotebook ipynb This part of the code will take the latex file format of the jupyter notebook and converts it to a html --no-input This is like a parameter we are saying during conversion that dont add any inputs   here the input to a cell is the code   so we hide it --no-prompt Here also we are saying  During conversion dont show any prompts form the code like errors or warnings in the final HTML file   so that that html will have only the Text and the code output in the form of a report      Hope it helps

User · Answer

Here is a nice article  the same one  Ken posted  on how to polish up Jpuyter  the new IPython  notebooks for presentation  There are countless ways to extend Jupyter using JS  HTML  and CSS  including the ability to communicate with the notebook s python kernel from javascript  There are magic decorators for   HTML and   javascript so you can just do something like this in a cell by itself     HTML  lt script gt    function code toggle         if  code shown            div input   hide  500              toggleButton   val  Show Code         else            div input   show  500              toggleButton   val  Hide Code             code shown    code shown           document   ready function        code shown false         div input   hide          lt  script gt   lt form action  javascript code toggle    gt  lt input type  submit  id  toggleButton  value  Show Code  gt  lt  form gt    I can also vouch Chris s methods work in jupyter 4 X X

User · Answer

Very easy solution using Console of the browser  You copy this into your browser console and hit enter      div input div prompt container   on  click   function e           e target  closest  div input   find  div input area   0   toggle            Then you toggle the code of the cell simply by clicking on the number of cell input

User · Answer

This is now possible directly from nbconvert as of version 5 2 1  content can be filtered using the built-in template exporter exclude options  For example   jupyter nbconvert --to pdf --TemplateExporter exclude input True my notebook ipynb   will exclude the  input code  cells  ie the code itself  Similar options exist to exclude prompts  markdown cells  or outputs  or both inputs and outputs    These options should work irrespective of output format

User · Answer

from IPython display import HTML  HTML     lt script gt  code show true   function code toggle      if  code show       div input   hide       else       div input   show        code show    code show       document   ready code toggle    lt  script gt   lt form action  javascript code toggle    gt  lt input type  submit  value  Click here to toggle on off the raw code   gt  lt  form gt

User · Answer

Convert cell to Markdown and use HTML5  lt details gt  tag as in the example by joyrexus   https   gist github com joyrexus 16041f2426450e73f5df9391f7f7ae5f     collapsible markdown    lt details gt  lt summary gt CLICK ME lt  summary gt   lt p gt        yes  even hidden code blocks      python print  hello world          lt  p gt   lt  details gt

User · Answer

With all the solutions above even though you re hiding the code  you ll still get the   lt matplotlib lines Line2D at 0x128514278 gt   crap above your figure which you probably don t want   If you actually want to get rid of the input rather than just hiding it  I think  the cleanest solution is to save your figures to disk in hidden cells  and then just including the images in Markdown cells using e g    Caption  figure1 png

User · Answer

The newest IPython notebook version do not allow executing javascript in markdown cells anymore  so adding a new markdown cell with the following javascript code will not work anymore to hide your code cells  refer to this link   Change    ipython profile default static custom custom js as below   code show true  function code toggle      if  code show       div input   hide       else       div input   show        code show    code show       IPython events   on  app initialized NotebookApp   function            view menu   append   lt li id   toggle toolbar   title   Show Hide code cells   gt  lt a href   javascript code toggle     gt Toggle Code Cells lt  a gt  lt  li gt

User · Answer

Simple programmatic solution for exporting a notebook to HTML without the code cells  output only   add this code in a code cell of the notebook  my notebook ipynb you want to export  import codecs import nbformat import time from IPython display import Javascript from nbconvert import HTMLExporter  def save notebook        display          Javascript  quot IPython notebook save notebook   quot            include   application javascript              def html export output only read file  output file       exporter   HTMLExporter       exporter exclude input   True     output notebook   nbformat read read file  as version nbformat NO CONVERT      output  resources   exporter from notebook node output notebook      codecs open output file   w   encoding  utf-8   write output      save notebook to html save notebook   time sleep 1  output file    my notebook export html  html export output only  quot my notebook ipynb quot   output file

User · Answer

The accepted solution also works in julia Jupyter IJulia with the following modifications   display  text html       lt script gt  code show true   function code toggle      if  code show        div input   hide       else        div input   show        code show    code show        document   ready code toggle    lt  script gt   lt form action  javascript code toggle    gt  lt input type  submit  value  Click here to toggle on off the raw code   gt  lt  form gt        note in particular    use the display function escape the   sign  otherwise seen as a variable

User · Answer

I wrote some code that accomplishes this  and adds a button to toggle visibility of code   The following goes in a code cell at the top of a notebook   from IPython display import display from IPython display import HTML import IPython core display as di   Example  di display html   lt h3 gt  s  lt  h3 gt     str  raw True     This line will hide code by default when the notebook is exported as HTML di display html   lt script gt jQuery function    if  jQuery  body notebook app   length    0    jQuery   input area   toggle    jQuery   prompt   toggle        lt  script gt    raw True     This line will add a button to toggle visibility of code blocks  for use with the HTML export version di display html     lt button onclick  jQuery   input area   toggle    jQuery   prompt   toggle     gt Toggle code lt  button gt      raw True    You can see an example of how this looks in NBviewer here   Update  This will have some funny behavior with Markdown cells in Jupyter  but it works fine in the HTML export version of the notebook

User · Answer

jupyter nbconvert testing ipynb --to html --no-input

User · Answer

Many times  we need to hide some parts of codes while writing a long code  Example  - Just on clicking  quot Code show hide quot   we can hide 3 lines of codes   So here is the function that you need to define for partially hiding few part of codes and then call it whenever you want to hide some code  from IPython display import HTML  def hide toggle for next False       this cell    quot  quot  quot    div cell code cell rendered selected   quot  quot  quot    next cell   this cell     next         toggle text    Code show hide     text shown on toggle link     target cell   this cell    js hide current            if for next          target cell   next cell  toggle text      next cell           js hide current   this cell     find  quot div input quot   hide         js f name    code toggle     format str random randint 1 2  64         html    quot  quot  quot  lt script gt              function  f name       cell selector  find  div input   toggle                    js hide current           lt  script gt           lt a href  quot javascript  f name    quot  gt  toggle text  lt  a gt       quot  quot  quot  format f name js f name cell selector target cell js hide current js hide current  toggle text toggle text       return HTML html   Once we are ready with function definition  our next task is very easy  Just we need to call the function to hide show the code  print  quot Function for hiding the cell quot   hide toggle

User · Answer

This can be done using an IPython ToggleButton widget and a little bit of JavaScript  The following code should be placed into a code cell at the top of the document   import ipywidgets as widgets from IPython display import display  HTML  javascript functions    False   hide     True   show     button descriptions     False   Show code   True   Hide code     def toggle code state                Toggles the JavaScript show   hide   function on the div input element               output string     lt script gt     div input       lt  script gt       output args      javascript functions state        output          output string format  output args       display HTML output     def button action value                Calls the toggle code function and updates the button description               state   value new      toggle code state       value owner description   button descriptions state    state   False toggle code state   button   widgets ToggleButton state  description   button descriptions state   button observe button action   value    display button    This creates the following button to toggle showing hiding the code for the Jupyter Notebook  defaulted to the  hide  state     When set to the  show  state  you can then see the code for the Jupyter Notebook     As an aside  while much of this code should be placed at the beginning of the Notebook  the location of the toggle button is optional  Personally  I prefer to keep it at the bottom of the document  To do so  simply move the display button  line to a separate code cell at the bottom of the page

[javascript] How to hide code from cells in ipython notebook visualized with nbviewer?

Examples related to javascript

Examples related to ipython

Examples related to ipython-notebook