Interactive python shell on your blog!

Using python on a web page, wouldn’t it be great? It is great and it is very easy to do, thanks to datacamp. let’s see how to do it with a couple of lines of html.

This is an example of what you can do with python on a web page, in your blog:

An example of interactive shell: press Run

import numpy as np import matplotlib.pyplot as plt x = np.arange(0, 5, 0.1); y = np.sin(x) plt.plot(x, y) plt.show()
Just press 'Run'.

How to make it

Just use this code in your site, changing what you need to change.

<script async src="https://cdn.datacamp.com/dcl-react.js.gz"></script>

  <div class="exercise">
    <div class="title">
      <h2>This is an python exercise with a plot</h2>
    </div>

    <div data-datacamp-exercise data-lang="python" data-height="auto">
      <code data-type="pre-exercise-code"></code>
      <code data-type="sample-code">
        import numpy as np
        import matplotlib.pyplot as plt

        x = np.arange(0, 5, 0.1);
        y = np.sin(x)
        plt.plot(x, y)
        plt.show()
      </code>
      <code data-type="solution"></code>
      <code data-type="sct"></code>
      <div data-type="hint">Just press 'Run'.</div>
    </div>
  </div>

I suggest you, if you are using wordpress, to use the plugin Scripts and Styles to put this code into a shortcut and then use it on the page with the stuff.

Hot to add an interactive python shell on your computer

 

Utilities

Published by pythonprogramming

Started with basic on the spectrum, loved javascript in the 90ies and python in the 2000, now I am back with python, still making some javascript stuff when needed.