<jupyter_start><jupyter_text>JupyterLab Outsource![](../docs/img/jupyterlab-outsource.png "screenshot of JupyterLab rich text editing and visual programming")This was written it in a **What You See Is What You Get** environment, powered by [Prosemirror](https://github.com/prosemirror/prosemirror).> *But I can also edit be edited in the notebook markdown cell easily, either in **Preview** or **Edit** mode**In* JupyterLab, click the *Magic Wand* icon…<jupyter_code>%%html
<div class="jp-Toolbar-item">
    <div class="jp-Outsource-Picker jp-mod-styled" 
    style="height: 24px; widget:24px; background-repeat: no-repeat"></div>
</div><jupyter_output><empty_output><jupyter_text>You can pick from… * *Prosemirror* * *Blockly*> *Suggest more input types [on Github](https://github.com/deathbeds/jupyterlab-outsource)!*  BlocklyBlockly definitions, like which blocks and where to place them, are stored in the notebook cell metadata.<jupyter_code># start blockly
greeting = None
planet = None
i = None
j = None

def upRange(start, stop, step):
    while start <= stop:
        yield start
        start += abs(step)

def downRange(start, stop, step):
    while start >= stop:
        yield start
        start -= abs(step)


greeting = 'hello'
planet = 'world'
i_end = float(len(greeting))
for i in (0 <= i_end) and upRange(0, i_end, 1) or downRange(0, i_end, 1):
    j_end = float(len(planet))
    for j in (0 <= j_end) and upRange(0, j_end, 1) or downRange(0, j_end, 1):
        if greeting[int(i - 1)] == planet[int(j - 1)]:
            break
print(''.join([str(x) for x in ['letter ', i, ' in ', greeting, ' is the same as letter ', j, ' in ', planet]]))
# end blockly<jupyter_output>letter 5 in hello is the same as letter 2 in world