More better highlighting and image fix

Anton Vanhoucke · Anton Vanhoucke · commit 789e3b44bdfc · 2016-01-10T11:44:38.000+01:00
diff --git a/docs/tutorials/python-development-environment.md b/docs/tutorials/python-development-environment.md
@@ -72,26 +72,25 @@ Next we need a versioning system. That's a tool for tracking changes you made to
     git config --global user.name "Your Name"
 
 Now let's make a new project using our versioning system. Just type:
-``` sh
-mkdir myproject
-cd myproject/
-git init
-```
+
+    mkdir myproject
+    cd myproject/
+    git init
 
 Yay! We have a new project. It's empty though. So let's add some code. Start a text editor like this:
 `nano run_motor.py`
 
 
 Now add the following code:
-``` py
+~~~ py
 from ev3dev.brickpi import OUTPUT_A, Motor #Replace brickpi with ev3 if you use that.
 import time
 
 m = Motor(OUTPUT_A)
 m.run_forever(duty_cycle_sp = 100)
 time.sleep(1)
 m.stop()
-```
+~~~
 
 Press ctrl-X and `y` to save. It's time to let the first motor run. Plug it into port A on your brick and go: `python run_motor.py`. Tataaa! The motor is running full power for a second.
 
@@ -101,16 +100,12 @@ What we are going to do now is make a clone of our project on the ev3dev machine
 In the Welcome dialog choose: 'Checkout from version control' > 'Git'
 Now type the hostname of the ev3dev machine, followed by a semicolon the projectname. In the other fields choose a nice parent and project directory.
 
-{% include screenshot.html source="/images/osx/PyCharm/welcome.png" %}
-
-Now you can continue where you left of on the ev3dev machine, but with a larger screen, better keyboard and more tools! There is one problem, though: PyCharm puts red curly lines under the ev3dev library. {% include screenshot.html source="/images/osx/PyCharm/missing-lib.png" %} It doesn't recognise it. And that's logical, because it's missing on the development machine. If we install it we won't be able to run motors, but the documentation and autocomplete will be active. So on your development machine start a terminal and do:
-
-``` bash
-git clone https://github.com/rhempel/ev3dev-lang-python.git
-cd ev3dev-lang-python/
+{% include inline-screenshot.html source="/images/osx/PyCharm/welcome.png" caption="The 'Welcome' dialog in PyCharm"%}
 
-python setup.py install
-cd ..                     # Optional
-rm -r ev3dev-lang-python/ # Optional to remove the downloaded files. It's installed now anyway.
+Now you can continue where you left of on the ev3dev machine, but with a larger screen, better keyboard and more tools! There is one problem, though: PyCharm puts red curly lines under the ev3dev library. {% include inline-screenshot.html source="/images/osx/PyCharm/missing-lib.png" caption="Grrr. Those curly red lines. Fix them!" %} It doesn't recognise it. And that's logical, because it's missing on the development machine. If we install it we won't be able to run motors, but the documentation and autocomplete will be active. So on your development machine start a terminal and do:
 
-```
+    git clone https://github.com/rhempel/ev3dev-lang-python.git
+    cd ev3dev-lang-python/
+    python setup.py install
+    cd ..                     # Optional
+    rm -r ev3dev-lang-python/ # Optional to remove the downloaded files. It's installed now anyway.
