Jupyter Notebooks are powerful tools for data exploration, analysis, and sharing. However, when presenting your work or sharing insights with a non-technical audience, the raw code can often distract from the narrative. Many users find themselves asking, how to hide code from cells in ipython notebook visualized with nbviewer? This challenge arises because while Jupyter itself offers some interactive hiding capabilities, these don’t always persist when the notebook is rendered statically on platforms like nbviewer. Achieving a clean, code-free presentation on nbviewer is crucial for effective data storytelling, allowing your audience to focus purely on the results and insights without being overwhelmed by the underlying programming logic. This guide will walk you through robust methods to ensure your carefully crafted outputs shine, free from distracting code blocks.

Why Hide Code? The Power of Clean Data Storytelling

In the world of data science, communicating findings effectively is as important as the analysis itself. A Jupyter Notebook, when filled with intricate code, can be a barrier rather than a bridge to understanding for stakeholders who are primarily interested in the outcomes. Hiding the code transforms your notebook from a technical document into a compelling data story, making your presentations more impactful and professional.

Consider a business report or a research summary. The audience wants to grasp the conclusions, see the visualizations, and understand the implications without needing to parse Python syntax or understand library imports. By selectively hiding code, you empower your audience to navigate your narrative seamlessly, enhancing engagement and ensuring your key messages are absorbed. This approach is particularly vital when sharing notebooks via nbviewer, a platform designed for static rendering, where interactive local hiding features might not translate directly.

Moreover, a clean presentation reflects a higher level of polish and attention to detail. It demonstrates that you’ve considered your audience’s needs and tailored the content for maximum clarity. This shift from a raw development environment to a polished presentation format is a hallmark of expert data communication, a skill highly valued in any data-driven role. According to a Harvard Business Review article on data storytelling, clarity and narrative flow are paramount for effective communication.

Method 1: Utilizing Jupyter Cell Tags for nbviewer Compatibility

The most robust and universally compatible method to hide code from cells in ipython notebook visualized with nbviewer involves leveraging Jupyter’s built-in cell metadata and tags. This approach embeds instructions directly into the notebook’s JSON structure, which nbviewer is designed to interpret. The key is to use specific tags that signal to nbviewer (and other rendering engines) that certain inputs should not be displayed.

The primary tag for this purpose is remove_input. When a cell is tagged with remove_input, nbviewer will render its output but completely omit the code input block. This allows for a clean display of plots, tables, and text, without revealing the underlying code that generated them. This method is superior for static rendering because the instruction is part of the notebook’s permanent structure, not reliant on active JavaScript or local extensions.

Here’s how to apply these essential tags to your Jupyter Notebook cells:

1. Open your Jupyter Notebook: Launch the notebook in your local Jupyter environment (Jupyter Lab or Jupyter Notebook interface).
2. Enable Cell Toolbar: Go to View > Cell Toolbar > Tags. This will open a small toolbar above each cell.
3. Add the remove_input Tag: For each code cell whose input you wish to hide, click on the “Add Tag” button in the cell’s toolbar. Type remove_input into the input field and press Enter.
4. Verify Tag Application: You should see the remove_input tag appear within a box above the cell. You can also inspect the notebook’s raw JSON (File > Save and Export Notebook As > Notebook (.ipynb)) to confirm the tag is present in the cell’s metadata.
5. Save Your Notebook: Crucially, save your notebook (File > Save Notebook) after applying the tags. The changes are only permanent once saved.
6. Test with nbviewer: Upload or push your notebook to a public repository (like GitHub Gist or a public GitHub repo) and then paste its URL into nbviewer to see the rendered result. The code inputs for tagged cells should now be hidden.

For a more granular control, you can also use tags like hide_input (which allows a toggle button to show/hide code in some renderers, though remove_input is more reliable for full removal on nbviewer) or remove_output if you want to hide the output of a cell entirely. These tags offer significant control over the final presentation of your interactive notebooks, ensuring that only relevant information is displayed to your audience.

While cell tags offer a foundational method, Jupyter Notebook extensions can provide a more interactive and streamlined way to manage code visibility locally, which can then be saved for nbviewer. Extensions like jupyter_contrib_nbextensions offer a rich set of tools, including those specifically designed to toggle code input visibility. One popular extension is “Hide input.”

These extensions often provide convenient buttons or menu options within the Jupyter interface to quickly hide or show code cells, or even individual lines. When you use an extension to hide code and then save the notebook, the extension typically modifies the cell’s metadata in a way that is similar to manually adding tags. For instance, an extension might add a "collapsed": true or "jupyter": {"source_hidden": true} flag to the cell’s metadata. This metadata is what nbviewer reads to determine how to render the notebook.

It’s important to note that while extensions provide a user-friendly interface for managing code visibility, their effectiveness on nbviewer hinges on whether they correctly embed the necessary metadata. Always verify the resulting .ipynb file’s metadata and test it on nbviewer. If an extension only hides code client-side via JavaScript without modifying the notebook’s JSON metadata, those changes will not persist when rendered on a static platform like nbviewer. Therefore, always confirm that the extension you choose modifies the underlying notebook structure.

To install and use jupyter_contrib_nbextensions:

• First, install the package: pip install jupyter_contrib_nbextensions && jupyter contrib nbextension install --user
• Then, enable the configurator: jupyter nbextension enable hinterland/hinterland --user (or navigate to the Nbextensions tab in your Jupyter interface).

Once installed, look for extensions related to “Hide input” or “Collapse input cells.” Activating these and applying them to your cells, followed by saving, should ideally embed the correct metadata for nbviewer to interpret. Always cross-reference with the cell tag method if you encounter inconsistencies, ensuring that the remove_input tag is ultimately present for critical cells.

Ensuring Your Changes Persist and Render on nbviewer

The crucial step after modifying your Jupyter Notebook to hide code is ensuring that these changes are correctly saved and interpreted by nbviewer. nbviewer is a static renderer; it processes the .ipynb file as-is and generates an HTML page. This means that any interactive elements or local configurations from your Jupyter environment must be encoded within the notebook’s JSON structure to be visible (or hidden) on nbviewer.

When you add tags like remove_input or use extensions that modify code visibility, these actions update the notebook’s underlying JSON data. It’s not enough to just apply them; you must save the notebook. A common pitfall is making changes and then forgetting to save, or saving incorrectly. Always use File > Save Notebook or Ctrl<b>Question & Answer : </b><br></br><p>I have an ipython/jupyter notebook that I visualize using NBviewer.</p> <p>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?</p><br></br><pre>from IPython.display import HTML HTML('''<script> code_show=true; function code_toggle() { if (code_show){ $('div.input').hide(); } else { $('div.input').show(); } code_show = !code_show } $( document ).ready(code_toggle); </script> <form action="javascript:code_toggle()"><input type="submit" value="Click here to toggle on/off the raw code."></form>''') </pre>