Jupyter Notebook Enhancements, Tips And Tricks

fastai
27

How to add a keyboard shortcut to insert a code snippet

Inspired by https://stackoverflow.com/a/51719689/9201239
and some help from @stas

If you first enter a cell with either code mode or markdown mode, like the following

48%20AM
Screen Shot 2019-03-23 at 9.56.48 AM.png1218×238 17.1 KB

Then you press Ctrl + Shift + M, you will get the following

22%20AM
Screen Shot 2019-03-23 at 10.05.22 AM.png1640×234 14.8 KB

To make this happening, you just need to

  1. go to custom.js whose path can be found by running
echo $(jupyter --config-dir)/custom/custom.js
  1. add the following codes into custom.js and save.
Jupyter.keyboard_manager.edit_shortcuts.add_shortcut('Ctrl-Shift-M', {
                              help : 'add details drop',
                              help_index : 'zz',
                              handler : function (event) {
                              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 + '[/details][details=""]' + after)
                              cursor.ch += 20 // where to put your cursor
                              target.code_mirror.setCursor(cursor)
                              return false;
                              }}
                                                        );
  1. finally, go back to Jupyter Notebook and refresh your page, and you are ready to go.
1 Like