HOW TO ADD BEAUTIFUL SOURCE CODE IN MEDIUM ARTICLES
Tags: python, javascript, sourcecode
Published: 2019-05-12 12:46:14

---
title: HOW TO ADD BEAUTIFUL SOURCE CODE IN MEDIUM ARTICLES
published: true
description: An easy way to display neat and beautiful source code with syntax highlighting in Medium articles. With Kodeshot, in three quick steps, you can include a catchy representation of your source code.
tags: php,python,javascript,source code
cover_image: https://thepracticaldev.s3.amazonaws.com/i/368awl0sz70wmq6d7bh3.png
---

An easy way to display neat and beautiful source code with syntax highlighting in Medium articles.
With [Kodeshot](https://www.kodeshot.net), in three quick steps, you can include a catchy representation of your source code.

## 1. Medium restrictions

Medium can display both inline and multi-line code blocks. But none of them supports syntax highlighting.

Example :
```
fig = plt.figure()
ax = fig.add_axes([0, 0, 1, 1], projection='3d')
ax.axis('off')
# prepare the axes limits
ax.set_xlim((-25, 25))
ax.set_ylim((-35, 35))
ax.set_zlim((5, 55))
def lorenz_deriv(x_y_z, t0, sigma=sigma, beta=beta, rho=rho):
    """Compute the time-derivative of a Lorenz system."""
    x, y, z = x_y_z
    return [sigma * (y - x), x * (rho - z) - y, x * y - beta * z]
# Choose random starting points, uniformly distributed from -15 to 15
np.random.seed(1)
x0 = -15 + 30 * np.random.random((N, 3))
```

This is convenient but not very pleasant to read.

## 2. The solution : kodeshot.net

![www.kodeshot.net](https://thepracticaldev.s3.amazonaws.com/i/pkp23lnz3h23i2rmd9u5.png)

On [Kodeshot.net](https://www.kodeshot.net) :
* copy your source code in the text area, customize your code and capture
* save the image
* drag and drop the image in your article

The result :
![souce code](https://thepracticaldev.s3.amazonaws.com/i/kdeydgdlevfcozbbkage.png)
<figcaption>[1] Source code at the bottom of this page</figcaption>

Another example :
![souce code](https://thepracticaldev.s3.amazonaws.com/i/liog4owzm9qnatn62su4.png)
<figcaption>[2] Source code at the bottom of this page</figcaption>

You can change the font size, the width, the style, the corners…
This solution is quite straightforward, nicer than the solution proposed by Medium and nicer than a GitHub Gist embedded in the article.

And, if you want people to be able to copy and paste the source code, you can add under the image `[x] Source code at the bottom of this page` and, at the bottom of the article, display multi-line code blocks with your code (as I did in this article).


---

Source code
[1]
```
fig = plt.figure()
ax = fig.add_axes([0, 0, 1, 1], projection='3d')
ax.axis('off')
# prepare the axes limits
ax.set_xlim((-25, 25))
ax.set_ylim((-35, 35))
ax.set_zlim((5, 55))
def lorenz_deriv(x_y_z, t0, sigma=sigma, beta=beta, rho=rho):
    """Compute the time-derivative of a Lorenz system."""
    x, y, z = x_y_z
    return [sigma * (y - x), x * (rho - z) - y, x * y - beta * z]
# Choose random starting points, uniformly distributed from -15 to 15
np.random.seed(1)
x0 = -15 + 30 * np.random.random((N, 3))
```

[2]
```
protected function getMemcached($connectionId, array $credentials, array $options)
{
    $memcached = $this->createMemcachedInstance($connectionId);
if (count($credentials) === 2) {
        $this->setCredentials($memcached, $credentials);
    }
if (count($options)) {
        $memcached->setOptions($options);
    }
return $memcached;
}
```